Skip to content



  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


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


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="" 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" />
Edit this section

Contact us