Tridi — Loading spinner

This docs is for Tridi v1.x. Read Tridi v2 documentation or how to upgrade to version 2.x

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.


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



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


.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 {
  /* ... */


new Tridi({
  element: '#tridi-spinner',
  location: './path/to/image/folder',
  format: 'jpg',
  count: 36,
  spinner: true,

« Back to main page