پیشنمایش زنده
کد HTML
<svg viewBox="0 0 205 615" class="cola">
<path d="M47 595c-8 0-26-6-26-34V261c0-17 9-29 16-38s16-28 16-28L68 59l-4-5s3-30 7-36 14-6 32-6 28 0 32 6 7 36 7 36l-4 5 15 136s9 19 16 28 16 21 16 38v300c0 28-18 34-26 34H47z"></path>
</svg>
کد CSS
.cola {
--pathlength: 1384;
width: 45px;
fill: transparent;
stroke: black;
stroke-linecap: round;
stroke-width: 15px;
stroke-dashoffset: var(--pathlength);
stroke-dasharray: 0 var(--pathlength);
animation: loader 8s cubic-bezier(.5,.1,.5,1) infinite both;
}
@keyframes loader {
90%, 100% {
stroke-dashoffset: 0;
stroke-dasharray: var(--pathlength) 0;
}
}