Прогрессбар с анимированным градиентом на CSS
Прогрессбар с анимированным градиентом на CSS
Анимированный прогрессбар очень часто используется в приложениях для мобильных устройств. Но его также можно использовать и на сайтах, когда выполняется какой-то длительный процесс и надо создать у пользователя иллюзию, что приложение не зависло и что-то происходит прямо сейчас. Для анимации обычно применяется бегущий градиентный фон. Сегодня сделаем такой градиентный прогрессбар на чистом CSS, а "оживим" его с помощью JavaScript.
Начнем с небольшой теории. Для создания градиентного фона у выбранного элемента в CSS используется свойство linear-gradient. Для максимального эффекта наш градиент должен состоять из нескольких интервалов разного цвета. Вручную подбирать цвета довольно геморройно, поэтому рекомендую воспользоваться онлайновым сервисом CSS Gradient. С его помощью можно буквально в несколько кликов создать готовый стиль градиента.
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- .progress {
- background: rgb(76,233,92);
- background: linear-gradient(
- 90deg,
- rgba(76,233,92,1) 0%,
- rgba(177,40,66,1) 20%,
- rgba(157,153,6,1) 40%,
- rgba(189,44,4,1) 60%,
- rgba(222,172,2,1) 80%,
- rgba(0,212,255,1) 100%
- );
- animation: progress 5s infinite linear;
- background-size: 200%;
- }
- @keyframes progress {
- 0% {
- background-position: 80% 0%;
- }
- 25% {
- background-position: 60% 40%;
- }
- 50% {
- background-position: 20% 100%;
- }
- 75% {
- background-position: 60% 40%;
- }
- 100% {
- background-position: 80% 0%;
- }
- }
- </style>
HTML-верстка в данном случае будет очень простой. Элементу, который будет визуализировать собой прогрессбар, назначается класс с описанным выше анимированным градиентом и устанавливаются нужные размеры, соответствующие прогрессу выполняемой задачи.
Code (HTML) : Убрать нумерацию
- <div class="progress" id="progress" style="width:30%; height:20px;"></div>
- <span id="prc" style="font-size:30px;">0%</span>
Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript">
- var percent=0;
- setInterval(function() {
- percent++;
- if (percent>100) {
- percent=0;
- }
- document.getElementById('progress').style.width=percent+'%';
- document.getElementById('prc').innerHTML=percent+'%';
- },1000);
- </script>
Готовый пример прогрессбара с градиентным фоном можно посмотреть на демонстрационной странице.
Просмотров: 77 | Комментариев: 0
Комментарии
Отзывы посетителей сайта о статье
Комментариeв нет
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 35,172 раза
Поблагодарили 35,172 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |