Skip to main content

Spinner

Standard

<div class="env-spinner">
   <div class="env-rect1"></div>
   <div class="env-rect2"></div>
   <div class="env-rect3"></div>
   <div class="env-rect4"></div>
   <div class="env-rect5"></div>
</div>

Bounce

<div class="env-spinner-bounce">
   <div class="env-bounce1"></div>
   <div class="env-bounce2"></div>
   <div class="env-bounce3"></div>
</div>

Hide spinner

Use modifier env-spinner--hide or env-spinner-bounce--hide to hide the spinner. i.e env-spinner env-spinner--hide

Delayed spinner

Delay showing the spinner to avoid spinner flashing when the content loads fast.

Use modifier env-spinner--fade-in or env-spinner-bounce--fade-in for a delayed spinner. Data attribute data-delay="short" may be used to control delay timing. Allowed values are:

  • short (0.25s delay)
  • medium (0.5s)
  • long (1s)

Delayed spinner demo

<div id="demo-delayed-spinner" class="demo-delayed-spinner">
   <div class="env-spinner env-spinner--hide">
      <div class="env-rect1"></div>
      <div class="env-rect2"></div>
      <div class="env-rect3"></div>
      <div class="env-rect4"></div>
      <div class="env-rect5"></div>
   </div>
</div>

Envision documentation