<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="green-check">
<rect class="path" x=".5" y=".5" width="23" height="23" rx="11.5"></rect>
<path class="pathDelay" d="M6 12l4 4.5 8-9"></path>
</svg>
#green-check {
width: 100px;
height: 100px;
fill: none;
stroke: green;
stroke-width: 1px;
}
.path {
stroke-dasharray: 314;
stroke-dashoffset: 314;
animation: goCheck 2s linear infinite;
}
.pathDelay {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: goCheck 2s linear infinite 1s;
}
@keyframes goCheck {
to {
stroke-dashoffset: 0;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.