/* <svg class="envelo-loader-circular" viewBox="0 0 50 50">
  <circle class="envelo-loader-path" cx="25" cy="25" r="20" fill="none" stroke-miterlimit="10"/>
</svg> */

 /* ^ USAGE ^ */

 .envelo-loader-circular {
    width: 40px;
    height: 40px;
    animation: loader-rotate 2s linear infinite;
  }
  
  .envelo-loader-path {
    stroke-width: 3;
    stroke: var(--secondary);
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: loader-dash 1.5s ease-in-out infinite;
    stroke-linecap: round;
  }
  
  @keyframes loader-rotate {
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes loader-dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -35px;
    }
    100% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -124px;
    }
  }