ЗАГРУЗЧИК КАК У УСТАНОВЩИКА VISUAL STUDIO
Описание:
Красивый загрузчик от Visual Studio, подойдет на темных дизайнах, если чуть чуть поработать над скриптом то вы можете настроить его под себя, Вы можете изменять цвет, скорость, движение, И много чего.
HTML
CSS
Вот и всё!
Turbo-S - Если будет вопросы пишите в комментариях, Если нужен помощь по установке тогда создайте тему форуме.
Красивый загрузчик от Visual Studio, подойдет на темных дизайнах, если чуть чуть поработать над скриптом то вы можете настроить его под себя, Вы можете изменять цвет, скорость, движение, И много чего.
HTML
Код
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
Код
<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>
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)