Простая анимация для круговорота элемента, который идет в разном оттенке цвета с помощью CSS. Вероятно вам встречались разные загрузки, которые в большинстве выполнены в формате GIF, в отличение от этого, что создан на CSS. Его можно использовать на индикаторе загрузка, как файлов, так на интернет сайте, где выставить под загрузку страницы.
Здесь можно изменить, где будет при первом запуске приложения приложение запуститься в течение нескольких секунд, в отличие от изображение, которое будет какое то время загружается, чтоб появится на экране.
Создание анимации в две разные фазы:
1. Круговой прогресс, который идет в круговом индикаторе прогресса и обновление зависит от хода загрузки.
2. Расширение кругового изображения, что открывает картинку через расширяющееся круговое окно.
Приступаем к установке:
HTML
Код
<div class="madever-inceasing"></div>
CSS
Код
.madever-inceasing,
.madever-inceasing::before,
.madever-inceasing::after {
border-width: 0.4em;
border-style: solid;
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
animation: animate 4s ease-in-out infinite alternate;
}
.madever-inceasing {
width: 10em;
height: 10em;
font-size: 20px;
border-top-color: red;
border-bottom-color: blue;
position: relative;
}
.madever-inceasing::before,
.madever-inceasing::after {
content: '';
position: absolute;
}
.madever-inceasing::before {
width: 70%;
height: 70%;
border-top-color: orange;
border-bottom-color: cyan;
animation-duration: 8s;
}
.madever-inceasing::after {
width: 40%;
height: 40%;
border-top-color: yellow;
border-bottom-color: limegreen;
animation-duration: 16s;
}
@keyframes animate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(1440deg);
}
}
Демонстрация
