ВИД ПРЕЛОАДЕРА ДЛЯ ЗАГРУЗКИ СТРАНИЦ НА CSS
Описание:
Интересный и красивый прелоадер загрузки в чистом CSS коде с использованием кейфреймов для анимации. Вы полностью можете его изменить под себя, к примеру цветовую гамму , размер , скорость и много другое.
HTML
CSS
Вот и всё!
Интересный и красивый прелоадер загрузки в чистом CSS коде с использованием кейфреймов для анимации. Вы полностью можете его изменить под себя, к примеру цветовую гамму , размер , скорость и много другое.
HTML
Код
<div class="c">
<div class="center">
<div class="r r1"></div>
<div class="r r2"></div>
<div class="r r3"></div>
<div class="r r4"></div>
<div class="r r5"></div>
</div>
</div>
<div class="center">
<div class="r r1"></div>
<div class="r r2"></div>
<div class="r r3"></div>
<div class="r r4"></div>
<div class="r r5"></div>
</div>
</div>
CSS
Код
<style type="text/css">
.c {
position: relative;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.c .center {
width: 30px;
height: 30px;
background-color: #179cbb;
border-radius: 100%;
position: relative;
}
.c .center:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
background-color: #179cbb;
-webkit-animation: center 2s infinite;
animation: center 2s infinite;
}
.c .r {
width: 10px;
height: 10px;
background-color: #179cbb;
position: absolute;
border-radius: 100%;
top: 10px;
left: 10px;
-webkit-animation: rotate 2s infinite;
animation: rotate 2s infinite;
}
.c .r1 {
-webkit-animation-timing-function: cubic-bezier(0.1, 0, 0, 0.9);
animation-timing-function: cubic-bezier(0.1, 0, 0, 0.9);
}
.c .r2 {
-webkit-animation-timing-function: cubic-bezier(0.1, 0.1, 0.8, 0.9);
animation-timing-function: cubic-bezier(0.1, 0.1, 0.8, 0.9);
}
.c .r3 {
-webkit-animation-timing-function: cubic-bezier(0.1, 0.2, 0.7, 0.9);
animation-timing-function: cubic-bezier(0.1, 0.2, 0.7, 0.9);
}
.c .r4 {
-webkit-animation-timing-function: cubic-bezier(0.1, 0.3, 0.6, 0.9);
animation-timing-function: cubic-bezier(0.1, 0.3, 0.6, 0.9);
}
.c .r5 {
-webkit-animation-timing-function: cubic-bezier(0.1, 0.4, 0.5, 0.9);
animation-timing-function: cubic-bezier(0.1, 0.4, 0.5, 0.9);
}
@-webkit-keyframes center {
to {
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
}
}
@keyframes center {
to {
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);
transform: rotate(0deg) translateX(600%) rotate(0deg);
}
2% {
-webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);
transform: rotate(0deg) translateX(600%) rotate(0deg);
}
98% {
-webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);
transform: rotate(360deg) translateX(600%) rotate(-360deg);
}
100% {
-webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);
transform: rotate(360deg) translateX(600%) rotate(-360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);
transform: rotate(0deg) translateX(600%) rotate(0deg);
}
2% {
-webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);
transform: rotate(0deg) translateX(600%) rotate(0deg);
}
98% {
-webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);
transform: rotate(360deg) translateX(600%) rotate(-360deg);
}
100% {
-webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);
transform: rotate(360deg) translateX(600%) rotate(-360deg);
}
}
</style>
.c {
position: relative;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.c .center {
width: 30px;
height: 30px;
background-color: #179cbb;
border-radius: 100%;
position: relative;
}
.c .center:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
background-color: #179cbb;
-webkit-animation: center 2s infinite;
animation: center 2s infinite;
}
.c .r {
width: 10px;
height: 10px;
background-color: #179cbb;
position: absolute;
border-radius: 100%;
top: 10px;
left: 10px;
-webkit-animation: rotate 2s infinite;
animation: rotate 2s infinite;
}
.c .r1 {
-webkit-animation-timing-function: cubic-bezier(0.1, 0, 0, 0.9);
animation-timing-function: cubic-bezier(0.1, 0, 0, 0.9);
}
.c .r2 {
-webkit-animation-timing-function: cubic-bezier(0.1, 0.1, 0.8, 0.9);
animation-timing-function: cubic-bezier(0.1, 0.1, 0.8, 0.9);
}
.c .r3 {
-webkit-animation-timing-function: cubic-bezier(0.1, 0.2, 0.7, 0.9);
animation-timing-function: cubic-bezier(0.1, 0.2, 0.7, 0.9);
}
.c .r4 {
-webkit-animation-timing-function: cubic-bezier(0.1, 0.3, 0.6, 0.9);
animation-timing-function: cubic-bezier(0.1, 0.3, 0.6, 0.9);
}
.c .r5 {
-webkit-animation-timing-function: cubic-bezier(0.1, 0.4, 0.5, 0.9);
animation-timing-function: cubic-bezier(0.1, 0.4, 0.5, 0.9);
}
@-webkit-keyframes center {
to {
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
}
}
@keyframes center {
to {
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);
transform: rotate(0deg) translateX(600%) rotate(0deg);
}
2% {
-webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);
transform: rotate(0deg) translateX(600%) rotate(0deg);
}
98% {
-webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);
transform: rotate(360deg) translateX(600%) rotate(-360deg);
}
100% {
-webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);
transform: rotate(360deg) translateX(600%) rotate(-360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);
transform: rotate(0deg) translateX(600%) rotate(0deg);
}
2% {
-webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);
transform: rotate(0deg) translateX(600%) rotate(0deg);
}
98% {
-webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);
transform: rotate(360deg) translateX(600%) rotate(-360deg);
}
100% {
-webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);
transform: rotate(360deg) translateX(600%) rotate(-360deg);
}
}
</style>
Вот и всё!
Файлы для скачивания отсутствуют.
Поблагодарить автора
Автор: SТРАННИК
ИсточникМатериал взят с другого сайта
Комментарии (0)