Цветная полоса загрузки CSS анимации

В редакторе

Цветная полоса загрузки CSS анимации

Brain_Script
290
2019-07-12 12:03:35
<div class="nendoveb-kubscupon"> <h3>Загрузка, пожалуйста подождите.</h3> <div class="kacekagen-protsem"> <div class="akemobvous"></div> </div> </div>
.nendoveb-kubscupon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:350px; height:100px; } .nendoveb-kubscupon h3 { color:rgba(100,100,100,0.9); } .nendoveb-kubscupon .kacekagen-protsem { width: 0%; height: 5px; background: linear-gradient(to right,rgb(51, 253, 93),rgb(71, 185, 236),rgb(42, 147, 245),rgb(41, 168, 222),rgb(120, 56, 179),rgb(234, 34, 70)); margin-top: 10px; background-size: 353px 5px; border-radius: 12px; animation: loading 6s ease-in-out forwards; } .nendoveb-kubscupon .akemobvous { width: 100%; height: 35px; background: linear-gradient(to bottom,rgba(185, 173, 173, 0.17),rgba(97, 91, 91, 0.1),rgba(53, 51, 51, 0)); transform: skew(45deg) translate(15px,5px); } @keyframes loading { to { width:100%; } }
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика