Ajax.ruСтильный загрузчик (preloader) CSS3
| Параметр | Значение |
|---|---|
| Категория | Css скрипты |
| Добавил | uAdministrator |
| Дата публикации | 15.05.2024, 20:36 |
| Авторский | |
| Адапт. дизайн | |
| Просмотрен | 59 |
Интересный по дизайн создан загрузчик, который был создан на чистом CSS и подойдет на разные по стилистике сайт, что темный или светлый. Думаю вы многие встречали, когда хотели скачать файл, то автоматически подключается загрузчик, а точнее изображение которое создано на стилях. Что намного лучше и безусловно стильно смотрится на любой интернет площадке. Возможно кто то может его применить и на загрузку странице, что аналогично будет смотреться.
Если вам такой формат не подходит, то на официальном сайте вы можете подобрать тот формат, что больше вам понравится или подойдет на портал, ссылка ниже представлена будет. Что работает, то все будет продемонстрировано, остается только установить. Здесь большое отличие от формата GIF, то здесь можно самому в стилях вывести форматирование как вы видите, а это тоже изменение скорости.
Установка:
1. В CSS можно в самый низ прописать:
Панель управления → Управление дизайном → Таблица стилей (CSS)
background-color: rgba(0, 0, 0, 0);
border:5px solid rgba(0, 183, 229, 0.9);
opacity:.9;
border-right:5px solid rgba(0, 0, 0, 0);
border-left:5px solid rgba(0, 0, 0, 0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:50px;
-moz-animation:spinPulse 2s infinite ease-in-out;
-webkit-animation:spinPulse 2s infinite linear;
}
.circle1 {
background-color: rgba(0, 0, 0, 0);
border:5px solid rgba(0, 183, 229, 0.9);
opacity:.9;
border-left:5px solid rgba(0, 0, 0, 0);
border-right:5px solid rgba(0, 0, 0, 0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:60px;
position:relative;
top:-110px;
-moz-animation:spinoffPulse 3s infinite linear;
-webkit-animation:spinoffPulse 3s infinite linear;
}
@-moz-keyframes spinPulse {
0% {
-moz-transform:rotate(160deg);
opacity:0;
box-shadow:0 0 1px #2187e7;
}
50% {
-moz-transform:rotate(145deg);
opacity:1;
}
100% {
-moz-transform:rotate(-320deg);
opacity:0;
}
}
@-moz-keyframes spinoffPulse {
0% {
-moz-transform:rotate(0deg);
}
100% {
-moz-transform:rotate(360deg);
}
}
@-webkit-keyframes spinPulse {
0% {
-webkit-transform:rotate(160deg);
opacity:0;
box-shadow:0 0 1px #2187e7;
}
50% {
-webkit-transform:rotate(145deg);
opacity:1;
}
100% {
-webkit-transform:rotate(-320deg);
opacity:0;
}
}
@-webkit-keyframes spinoffPulse {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
}
}
2. Теперь остается поставить код на ту страницу, где будет производиться:
<div class="circle1"></div>
Выбрать другой стиль загрузчика: www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-loading-animation-loop/index.html
Теги:
Комментариев пока нет..
Ты можешь быть первым, кто оставит комментарий к публикации!
| Всего комментариев: 0 | |