Skip to content

Usage

Types

  1. Small
  2. Normal
  3. Large
  4. Largest
Be careful not to use a loader with a low contrast color
Use the best contrast color for the loader

Colors

Tip! Mouse over the loaders to start/stop the animation!
  1. Brown (BR1)
  2. Lightest beige (BE5)
  3. Blue(BL1)
Edit this section

Implementation

For webpages and web applications, you can use the supplied styling and the svg files located under src/svg/ (or in the downloadable bundle). If you want loaders that are animated with JavaScript only, use the svg files under src/svg/animated.

<svg class="if loader dots horizontal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <g class="if svg g">
    <circle class="if svg circle" fill="#331e11" cx="8" cy="32" r="8" />
    <circle class="if svg circle" fill="#331e11" cx="32" cy="32" r="8" />
    <circle class="if svg circle" fill="#331e11" cx="56" cy="32" r="8" />
  </g>
</svg>
Edit this section

Contact us