Индикаторы прогресса на CSS3
4 индикатора активности процесса, в которых не используется ничего, кроме кода CSS3.
Разметка HTML
Индикаторы имеют очень простую структуру:
<div class="main_body"> <div class="element"> <div class="loading1"> </div> </div> <div class="element"> <div class="loading2"> <div></div> </div> </div> <div class="element"> <div class="loading3"> <div>ждите..</div> <div></div> <div></div> </div> </div> <div class="element"> <div class="loading4"> </div> </div> </div>
CSS
Все индикаторы используют анимации CSS3 для формирования динамичного изображения.
Код для первого индикатора (в виде вращающегося волчка).
.loading1 { background-color: #000; width: 90px; height: 90px; border: 30px solid #FFF; border-right-width: 0; border-radius: 50%; box-shadow: 0 0 10px 5px #009933; /* Анимация css3 */ -webkit-animation: anim1 1s linear infinite; -moz-animation: anim1 1s linear infinite; -ms-animation: anim1 1s linear infinite; -o-animation: anim1 1s linear infinite; animation: anim1 1s linear infinite; } /* Кадры анимации css3 */ @-webkit-keyframes anim1 { from { -webkit-transform: rotateX(45deg) rotateZ(0deg); } 50% { -webkit-transform: rotateX(0deg) rotateZ(180deg); } to { -webkit-transform: rotateX(45deg) rotateZ(360deg); } } @-moz-keyframes anim1 { from { -moz-transform: rotateX(45deg) rotateZ(0deg); } 50% { -moz-transform: rotateX(0deg) rotateZ(180deg); } to { -moz-transform: rotateX(45deg) rotateZ(360deg); } } @-ms-keyframes anim1 { from { -ms-transform: rotateX(45deg) rotateZ(0deg); } 50% { -ms-transform: rotateX(0deg) rotateZ(180deg); } to { -ms-transform: rotateX(45deg) rotateZ(360deg); } } @-o-keyframes anim1 { from { -o-transform: rotateX(45deg) rotateZ(0deg); } 50% { -o-transform: rotateX(0deg) rotateZ(180deg); } to { -o-transform: rotateX(45deg) rotateZ(360deg); } } @keyframes anim1 { from { transform: rotateX(45deg) rotateZ(0deg); } 50% { transform: rotateX(0deg) rotateZ(180deg); } to { transform: rotateX(45deg) rotateZ(360deg); } }
Код второго индикатора (слайдера перемещающегося слайдера).
.loading2 { background-color: #009933; border-radius: 2px; height: 20px; margin-top: 60px; overflow: hidden; position: relative; width: 140px; } .loading2 > div { background-color: #FFFFFF; height: 100%; width: 0; /* Анимация css3 */ -webkit-animation-name:anim2; -webkit-animation-duration:2.0s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -webkit-animation-timing-function:ease; -moz-animation-name:anim2; -moz-animation-duration:2.0s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear; -moz-animation-timing-function:ease; -ms-animation-name:anim2; -ms-animation-duration:2.0s; -ms-animation-iteration-count:infinite; -ms-animation-direction:linear; -ms-animation-timing-function:ease; -o-animation-name:anim2; -o-animation-duration:2.0s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; -o-animation-timing-function:ease; animation-name:anim2; animation-duration:2.0s; animation-iteration-count:infinite; animation-direction:linear; animation-timing-function:ease; } /* Кадры анимации css3 */ @-webkit-keyframes anim2 { from { width: 0; } 50% { width: 100%; } to { width: 0; } } @-moz-keyframes anim2 { from { width: 0; } 50% { width: 100%; } to { width: 0; } } @-ms-keyframes anim2 { from { width: 0; } 50% { width: 100%; } to { width: 0; } } @-o-keyframes anim2 { from { width: 0; } 50% { width: 100%; } to { width: 0; } } @keyframes anim2 { from { width: 0; } 50% { width: 100%; } to { width: 0; } }
Код третьего индикатора - вращающиеся вокруг слова обручи.
.loading3 { border-radius: 50%; font-size: 20px; height: 100px; line-height: 90px; position: relative; text-align: center; width: 100px; } .loading3 > div:nth-child(2), .loading3 > div:nth-child(3) { background-color: rgba(255, 255, 255, 0.2); border: 5px solid #FFF; border-radius: 50%; box-shadow: 0 0 5px 0 #009933; height: 100px; position: absolute; top: 0px; /* Устанавливаем ширину верхней и нижней рамки равной 0 */ border-top-width: 0; border-bottom-width: 0; /* Анимация css3 */ -webkit-animation: anim3 2s linear infinite; -moz-animation: anim3 2s linear infinite; -ms-animation: anim3 2s linear infinite; -o-animation: anim3 2s linear infinite; animation: anim3 2s linear infinite; } .loading3 > div:nth-child(2) { border-color: #FFF; left: 0px; width: 90px; } .loading3 > div:nth-child(3) { border-color: #009933; left: -5px; width: 100px; /* Задержка css3 */ -webkit-animation-delay:0.5s; -moz-animation-delay:0.5s; -ms-animation-delay:0.5s; -o-animation-delay:0.5s; animation-delay:0.5s; } /* Кадры анимации css3 */ @-webkit-keyframes anim3 { from { -webkit-transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(180deg); } to { -webkit-transform: rotateY(360deg); } } @-moz-keyframes anim3 { from { -moz-transform: rotateY(0deg); } 50% { -moz-transform: rotateY(180deg); } to { -moz-transform: rotateY(360deg); } } @-ms-keyframes anim3 { from { -ms-transform: rotateY(0deg); } 50% { -ms-transform: rotateY(180deg); } to { -ms-transform: rotateY(360deg); } } @-o-keyframes anim3 { from { -o-transform: rotateY(0deg); } 50% { -o-transform: rotateY(180deg); } to { -o-transform: rotateY(360deg); } } @keyframes anim3 { from { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } to { transform: rotateY(360deg); } }
Код четвертого индикатора - для любителей феншуй.
.loading4 { background: none repeat scroll 0 0 #EEEEEE; border-color: #009933; border-radius: 100%; border-style: solid; border-width: 2px 2px 50px; height: 48px; position: relative; width: 96px; /* Анимация css3 */ -webkit-animation: anim4 1s linear infinite; -moz-animation: anim4 2s linear infinite; -ms-animation: anim4 1s linear infinite; -o-animation: anim4 1s linear infinite; animation: anim4 1s linear infinite; } .loading4:before { background: none repeat scroll 0 0 #EEEEEE; border: 18px solid #009933; border-radius: 100%; content: ""; height: 12px; left: 0; position: absolute; top: 50%; width: 12px; } .loading4:after { background: none repeat scroll 0 0 #009933; border: 18px solid #EEEEEE; border-radius: 100%; content: ""; height: 12px; left: 50%; position: absolute; top: 50%; width: 12px; } /* Кадры анимации css3 */ @-webkit-keyframes anim4 { from { -webkit-transform: rotateZ(0deg); } 50% { -webkit-transform: rotateZ(180deg); } to { -webkit-transform: rotateZ(360deg); } } @-moz-keyframes anim4 { from { -moz-transform: rotateZ(0deg); } 50% { -moz-transform: rotateZ(180deg); } to { -moz-transform: rotateZ(360deg); } } @-ms-keyframes anim4 { from { -ms-transform: rotateZ(0deg); } 50% { -ms-transform: rotateZ(180deg); } to { -ms-transform: rotateZ(360deg); } } @-o-keyframes anim4 { from { -o-transform: rotateZ(0deg); } 50% { -o-transform: rotateZ(180deg); } to { -o-transform: rotateZ(360deg); } } @keyframes anim4 { from { transform: rotateZ(0deg); } 50% { transform: rotateZ(180deg); } to { transform: rotateZ(360deg); } }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/19SfCyI3mF4/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
Неудача — это не единичное внезапное событие. Ваш провал не возникает внезапно. Напротив, неудача появляется, когда вы совершаете одни и те же ошибки изо дня в день. Джим Рон |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.