Way Loader
В редакторе
Way Loader
Brain_Script
1427
2019-07-12 16:02:57
<body>
<svg width="80vw" height="80vh" viewBox="0 0 130 130">
<defs>
<symbol id="shape">
<path d="M 35 56.96 A 30,45 0 0,1 95,56.96 A 30,45 30 0,1 65,108.92 A 30,45 -120 0,1 35,56.96 A 30,45 90 0,1 95,56.96 A 30,45 120 0,1 65,108.92 A 30,45 -30 0,1 35,56.96"/>
</symbol>
</defs>
<use xlink:href="#shape"/>
<use xlink:href="#shape"/>
<use xlink:href="#shape"/>
<use xlink:href="#shape"/>
<use xlink:href="#shape"/>
<use xlink:href="#shape"/>
<use xlink:href="#shape"/>
</svg>
</body>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #FFFFFF;
}
use {
fill: none;
stroke-linecap: round;
stroke-width: 13;
opacity: 0.8;
animation: an linear reverse infinite;
}
use:nth-of-type(1) {
stroke: #e2e2e2;
stroke-width: 15;
}
use:nth-of-type(2) {
stroke: #00b8ee;
animation-duration: 12000ms;
animation-delay: -1800ms;
}
use:nth-of-type(3) {
stroke: #00909d;
animation-duration: 6000ms;
animation-delay: -900ms;
}
use:nth-of-type(4) {
stroke: #4abd3b;
animation-duration: 4000ms;
animation-delay: -600ms;
}
use:nth-of-type(5) {
stroke: #ff6c31;
animation-duration: 3000ms;
animation-delay: -450ms;
}
use:nth-of-type(6) {
stroke: #fd4459;
animation-duration: 2400ms;
animation-delay: -360ms;
}
use:nth-of-type(7) {
stroke: #fe46a2;
animation-duration: 2000ms;
animation-delay: -300ms;
}
@keyframes an {
0% {
stroke-dasharray: 1, 543.763;
stroke-dashoffset: -542.763;
}
50% {
stroke-dasharray: 115, 543.763;
stroke-dashoffset: -157.8815;
}
100% {
stroke-dasharray: 1, 543.763;
stroke-dashoffset: 0;
}
}
Войдите для добавления комментария.