В этой статье подробно рассмотрим, как вызвать анимацию загрузки, которая будет работать на чистом CSS3. Возможно кому то покажется, что создать такой эффект сложно, но здесь как раз все очень просто, а точнее сделать красивую анимацию загрузки на CSS3.
Первым делом создаем блок div в html:
Код
<div class="ksunelka_gedsab"></div>
Следующий шаг, это закрепить стили CSS:
Код
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@-moz-keyframes spin {
100% { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes spin {
100% { -webkit-transform:rotate(360deg); }
}
@-ms-keyframes spin {
100% { -ms-transform:rotate(360deg); }
}
@-o-keyframes spin {
100% { -o-transform:rotate(360deg); }
}
.ksunelka_gedsab {
width: 28px;
height: 28px;
border: 5px solid #191818;
border-left-color: #2b2a2a;
border-right-color: rgba(0, 0, 0, 0);
border-bottom-color: #545050;
border-radius: 100%;
animation: spin 600ms infinite linear;
-moz-animation: spin 600ms infinite linear;
-o-animation: spin 600ms infinite linear;
-webkit-animation: spin 600ms infinite linear;
-ms-animation: spin 600ms infinite linear;
}
Вся настройка происходит в стилистике, это сам оттенок цвета, также ширина, вообщем все оформление.
Демонстрация
