Навигация
Категории
| Скрипты для Ucoz [474] |
| Шаблоны для Ucoz [199] |
| Графика для Ucoz [11] |
| Скрипты Меню для сайта [21] |
| Ajax Окна [4] |
Мини-Чат
Опрос
Лучшие пользователи
Ник: Толик
Файлов: 744
Ник: cyber
Файлов: 159
Ник: waxirewion
Файлов: 59
Ник: Admin™
Файлов: 5
Партнеры
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
| Главная » Файлы » Всё для Ucoz » Скрипты для Ucoz |
Скрипт: Оригинальный индикатор загрузки на CSS3 для Ucoz
Скрипт: Оригинальный индикатор загрузки на CSS3 для Ucoz.
Сделаем анимированный индикатор загрузки на CSS3 без использования каких-либо изображений. Будем использовать две синхронизированные анимации - одну для формирования плавного изменения цвета,а вторую - для вращения всей композиции.
Установка:
HTML - код .
Можно использовать псевдо-элементы, но анимация для них будет возможно только в Mozilla Firefox. Поэтому используем ниже приведенную конструкцию:
CSS
Следует обратить внимание на следующие моменты:
Для формирования приятного изменения цвета во всех трех треугольниках нужно увеличивать задержку анимации.
Между кадрами анимации для 20% и 100% поворота имеется интервал. Такой трюк формирует эффект остановки при проигрывании анимации.
p.s. Несмотря на привлекательность данного метода для формирования подобных популярных элементов, в настоящее время должно проводиться с осторожностью. CSS3 еще не достаточно хорошо поддерживается в браузерах. Но за такими методами будущее, так как они помогают сокращать количество HTTP запросов от браузера пользователя.
Установка:
HTML - код .
Можно использовать псевдо-элементы, но анимация для них будет возможно только в Mozilla Firefox. Поэтому используем ниже приведенную конструкцию:
Code
<div class="loading-wrap" style="position:fixed; left:50%; top:50%;">
<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="triangle3"></div>
</div><script>$(window).load(function() {$('.loading-wrap').fadeOut(0);});</script>
<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="triangle3"></div>
</div><script>$(window).load(function() {$('.loading-wrap').fadeOut(0);});</script>
CSS
Следует обратить внимание на следующие моменты:
Code
.loading-wrap {
width: 60px; height: 60px;
position: absolute;
top: 50%; left: 50%;
margin: -30px 0 0 -30px;
background: #777;
animation: rotation ease-in-out 2s infinite;
border-radius: 30px;
}
.triangle1, .triangle2, .triangle3 {
border-width: 0 20px 30px 20px;
border-style: solid;
border-color: transparent;
border-bottom-color: #67cbf0;
height: 0; width: 0;
position: absolute;
left: 10px; top: -10px;
animation: fadecolor 2s 1s infinite;
}
.triangle2, .triangle3 {
content: '';
top: 20px; left: 30px;
animation-delay: 1.1s;
}
.triangle3 {
left: -10px;
animation-delay: 1.2s;
}
@keyframes rotation {
0% {transform: rotate(0deg);}
20% {transform: rotate(360deg);}
100% {transform: rotate(360deg);}
}
@keyframes fadecolor {
0% {border-bottom-color: #eee;}
100%{border-bottom-color: #67cbf0;}
}
width: 60px; height: 60px;
position: absolute;
top: 50%; left: 50%;
margin: -30px 0 0 -30px;
background: #777;
animation: rotation ease-in-out 2s infinite;
border-radius: 30px;
}
.triangle1, .triangle2, .triangle3 {
border-width: 0 20px 30px 20px;
border-style: solid;
border-color: transparent;
border-bottom-color: #67cbf0;
height: 0; width: 0;
position: absolute;
left: 10px; top: -10px;
animation: fadecolor 2s 1s infinite;
}
.triangle2, .triangle3 {
content: '';
top: 20px; left: 30px;
animation-delay: 1.1s;
}
.triangle3 {
left: -10px;
animation-delay: 1.2s;
}
@keyframes rotation {
0% {transform: rotate(0deg);}
20% {transform: rotate(360deg);}
100% {transform: rotate(360deg);}
}
@keyframes fadecolor {
0% {border-bottom-color: #eee;}
100%{border-bottom-color: #67cbf0;}
}
p.s. Несмотря на привлекательность данного метода для формирования подобных популярных элементов, в настоящее время должно проводиться с осторожностью. CSS3 еще не достаточно хорошо поддерживается в браузерах. Но за такими методами будущее, так как они помогают сокращать количество HTTP запросов от браузера пользователя.
| Всего комментариев: 0 | |