Уважаемые друзья и пользователи сайта ART-UCOZ!
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Загрузчик как у установщика Visual Studio
Дата добавления: 13.03.2017 - 06:10
Категория: Хаки / Дополнения
Добавил: Buger
Количество просмотров: 1.3k
Количество комментариев: 0
Размер файла: 3.1 Kb
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Установка очень проста. Вы сможете изменить цвет точек по своему желанию, так как весь код написан на чистом css.
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>
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>
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>
Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: