ЗАГРУЗЧИК КАК У УСТАНОВЩИКА VISUAL STUDIO
14.03.2017 30 0 SТРАННИК

ЗАГРУЗЧИК КАК У УСТАНОВЩИКА VISUAL STUDIO

Описание:

Красивый  загрузчик от  Visual Studio,  подойдет на темных дизайнах, если чуть чуть поработать над скриптом то вы можете настроить его под себя, Вы можете изменять цвет, скорость, движение, И много чего.

HTML

Код
<div class="dot"></div>   
<div class="dot"></div>   
<div class="dot"></div>   
<div class="dot"></div>   
<div class="dot"></div>
CSS


Код
<style type="text/css">   
    body {   
    background-color: #2D2D30;   
    overflow: hidden;   
    }   
       
    .dot {   
    position: absolute;   
    width: 10px;   
    height: 10px;   
    border-radius: 20px;   
    top: 50%;   
    background-color: #0097FB;   
    -webkit-transform: translate(0, -50%);   
    transform: translate(0, -50%);   
    -webkit-animation: 3s linear loader infinite;   
    animation: 3s linear loader infinite;   
    }   
       
    .dot:nth-of-type(1) {   
    left: 0px;   
    }   
       
    .dot:nth-of-type(2) {   
    left: -10px;   
    -webkit-animation-delay: 0.15s;   
    animation-delay: 0.15s;   
    }   
       
    .dot:nth-of-type(3) {   
    left: -20px;   
    -webkit-animation-delay: 0.3s;   
    animation-delay: 0.3s;   
    }   
       
    .dot:nth-of-type(4) {   
    left: -30px;   
    -webkit-animation-delay: 0.45s;   
    animation-delay: 0.45s;   
    }   
       
    .dot:nth-of-type(5) {   
    left: -40px;   
    -webkit-animation-delay: 0.60s;   
    animation-delay: 0.60s;   
    }   
       
    @-webkit-keyframes loader {   
    0%,   
    20% {   
    -webkit-transform: translate(0, -50%);   
    transform: translate(0, -50%);   
    opacity: 0;   
    }   
    35% {   
    -webkit-transform: translate(45vw, -50%);   
    transform: translate(45vw, -50%);   
    opacity: 1;   
    }   
    65% {   
    -webkit-transform: translate(55vw, -50%);   
    transform: translate(55vw, -50%);   
    opacity: 1;   
    }   
    80%,   
    100% {   
    -webkit-transform: translate(100vw, -50%);   
    transform: translate(100vw, -50%);   
    opacity: 0;   
    }   
    }   
       
    @keyframes loader {   
    0%,   
    20% {   
    -webkit-transform: translate(0, -50%);   
    transform: translate(0, -50%);   
    opacity: 0;   
    }   
    35% {   
    -webkit-transform: translate(45vw, -50%);   
    transform: translate(45vw, -50%);   
    opacity: 1;   
    }   
    65% {   
    -webkit-transform: translate(55vw, -50%);   
    transform: translate(55vw, -50%);   
    opacity: 1;   
    }   
    80%,   
    100% {   
    -webkit-transform: translate(100vw, -50%);   
    transform: translate(100vw, -50%);   
    opacity: 0;   
    }   
    }   
</style>

Вот и всё!

Turbo-S - Если будет вопросы пишите в комментариях, Если нужен помощь по установке тогда создайте тему форуме.
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: SТРАННИК
ИсточникМатериал взят с другого сайта
Комментарии (0)
Добавить комментарий
Прокомментировать