Tridi v2 — Loading spinner

Looking for older version? Read Tridi v1 documentation here

Tridi can display a loading spinner while preloading or updating images. To enable this, set spinner option to true.

Spinner requires CSS styles to work correctly. For basic styling see tridi.css.

Options

  • spinner (boolean) - enables / disables loading spinner. Optional, defaults to false

Code

HTML

<div id="tridi-spinner"></div>

CSS


.tridi-loading {
  /* Styles for loading overlay */
}

.tridi-spinner {
  /* Styles for loading spinner */
}

// You can also use container-specific classes generated by Tridi

.tridi-{element id or class}-loading {
  /* ... */
}

.tridi-{element id or class}-spinner {
  /* ... */
}

JavaScript

const tridiInstance = Tridi.create({
  element: '#tridi-spinner',
  location: './path/to/image/folder',
  format: 'jpg',
  count: 36,
  spinner: true,
});

tridiInstance.load();

« Back to main page