Archive for November, 2022

SVG + CSS loader

A concentric circles loader (spinner, throbber).

<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
    @keyframes fadeIn1 {
      0% {
        opacity: 0;
      }
      25% {
        opacity: 1;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fadeIn2 {
      0% {
        opacity: 0;
      }
      25% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fadeIn3 {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 0;
      }
      75% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes fadeIn4 {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 0;
      }
      75% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    .circle-1 {
      animation: fadeIn1 1.2s ease infinite;
    }
    .circle-2 {
      animation: fadeIn2 1.2s ease infinite;
    }
    .circle-3 {
      animation: fadeIn3 1.2s ease infinite;
    }
    .circle-4 {
      animation: fadeIn4 1.2s ease infinite;
    }
  </style>
  <circle class="circle-1" stroke="#C22929" fill="none" cx="21" cy="21" r="5"></circle>
  <circle class="circle-2" stroke="#CCAD6D" fill="none" cx="21" cy="21" r="10"></circle>
  <circle class="circle-3" stroke="#9DCB11" fill="none" cx="21" cy="21" r="15"></circle>
  <circle class="circle-4" stroke="#11CB28" fill="none" cx="21" cy="21" r="20"></circle>
</svg>