CodePen Embed - Upload Animation


<svg  width="50" height="50" viewBox="0 0 30 30" fill="none">
  <circle cx="15" cy="15" r="10" stroke="#0D0E11" stroke-opacity="0.19" stroke-width="3"/>
  <circle class="loader-gauge" cx="15" cy="15" r="10"   stroke="#617AF3" stroke-width="3" stroke-linecap="round"/>
</svg>

@keyframes uploadAni {
  from {
    stroke-dashoffset: 62;
  }
  to {
    stroke-dashoffset: 0;
  }
}

svg {
  transform: rotate(-90deg);
}

.loader-gauge {
  stroke-dasharray: 62;
  animation: uploadAni 3.5s ease-in-out infinite;
  will-change: stroke-dashoffset;
}

This Pen is owned by nagaeso on CodePen.

See more by @nagaeso-the-encoder on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.