Way Loader

В редакторе

Way Loader

Brain_Script
458
2019-07-12 13:02:57
76c60b65
<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; } }
Капитальный ремонт квартир
квартир. Профессиональные специалисты
.
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика