ВИД ПРЕЛОАДЕРА ДЛЯ ЗАГРУЗКИ СТРАНИЦ НА CSS
14.03.2017 81 0 SТРАННИК

ВИД ПРЕЛОАДЕРА ДЛЯ ЗАГРУЗКИ СТРАНИЦ НА 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>

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>

Вот и всё!
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: SТРАННИК
ИсточникМатериал взят с другого сайта
Комментарии (0)
Добавить комментарий
Прокомментировать