регистрация
856материалов
3307комментариев
234темы на форуме
6952пользователя

Стильный Progress bar для сайта на Js и CSS


Описание:

Индикатор прогресса можно встретить практически на любом сайте. Обычно он отражает состояние процесса, например, загрузки или переноса файла. Делаете ли вы веб приложение или просто сайт, наверняка вам потребуется данный элемент интерфейса. В этой материале мы рассмотрим как можно сделать визуальную полосу загрузки чего либо с помощью JavaScript! Данные виды прогресс-баров полностью реализован с помощью градиентов, теней и границ-радиусов CSS3 с примесью анимации.

Установка:

Для начал подключаем стили:
Код
.progress-bar {
            background-color: none;
            height: 24px;
            padding: 2.5px;
            width: 35%; /* 130px */
            margin: 7px 0 2px 0;            
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
            -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
            box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;            
            }
                       
            .progress-bar span {
            display: inline-block;
            height: 100%;
            background-color: #777;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
            -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
            box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
            -webkit-transition: width .4s ease-in-out;
            -moz-transition: width .4s ease-in-out;
            -ms-transition: width .4s ease-in-out;
            -o-transition: width .4s ease-in-out;
            transition: width .4s ease-in-out;            
            }
                       
            /*---------------------------*/            
                       
            .blue span {
            background-color: #34c2e3;            
            }

            .orange span {
            background-color: #fecf23;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));
            background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);
            background-image: -moz-linear-gradient(top, #fecf23, #fd9215);
            background-image: -ms-linear-gradient(top, #fecf23, #fd9215);
            background-image: -o-linear-gradient(top, #fecf23, #fd9215);
            background-image: linear-gradient(top, #fecf23, #fd9215);            
            }            

            .green span {
            background-color: #a5df41;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
            background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);
            background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
            background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
            background-image: -o-linear-gradient(top, #a5df41, #4ca916);
            background-image: linear-gradient(top, #a5df41, #4ca916);            
            }            
                       
            /*---------------------------*/            
                       
            .stripes span {
            -webkit-background-size: 30px 30px;
            -moz-background-size: 30px 30px;
            background-size: 30px 30px;            
            background-image: -webkit-gradient(linear, left top, right bottom,
            color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
            color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
            to(transparent));
            background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
            transparent 75%, transparent);
            background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
            transparent 75%, transparent);
            background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
            transparent 75%, transparent);
            background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
            transparent 75%, transparent);
            background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
            transparent 75%, transparent);            
                       
            -webkit-animation: animate-stripes 3s linear infinite;
            -moz-animation: animate-stripes 3s linear infinite;            
            }
                       
            @-webkit-keyframes animate-stripes {            
            0% {background-position: 0 0;} 100% {background-position: 60px 0;}
            }
                       
                       
            @-moz-keyframes animate-stripes {
            0% {background-position: 0 0;} 100% {background-position: 60px 0;}
            }
                       
            /*---------------------------*/            

            .shine span {
            position: relative;
            }
                       
            .shine span::after {
            content: '';
            opacity: 0;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: #fff;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;            
                       
            -webkit-animation: animate-shine 2s ease-out infinite;
            -moz-animation: animate-shine 2s ease-out infinite;            
            }

            @-webkit-keyframes animate-shine {            
            0% {opacity: 0; width: 0;}
            50% {opacity: .5;}
            100% {opacity: 0; width: 95%;}
            }
                       
                       
            @-moz-keyframes animate-shine {
            0% {opacity: 0; width: 0;}
            50% {opacity: .5;}
            100% {opacity: 0; width: 95%;}
            }

            /*---------------------------*/            
                       
            .glow span {
            -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
            -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
            box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
                       
            -webkit-animation: animate-glow 1s ease-out infinite;
            -moz-animation: animate-glow 1s ease-out infinite;            
            }

            @-webkit-keyframes animate-glow {
            0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}            
            50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}            
            100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
            }

            @-moz-keyframes animate-glow {
            0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}            
            50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}            
            100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
            }

В то место, где хотите видеть прогресс бар, вставляете код:
Код
<div class="progress-bar blue stripes"><span style="width: 40%"></span></div>
<p>Установить на :
            <a href="#" class="quarter">25%</a> /
            <a href="#" class="half">50%</a> /
            <a href="#" class="three-quarters">75%</a> /
            <a href="#" class="full">100%</a>
</p>

<div class="progress-bar orange shine"> <span style="width: 65%"></span></div>
<p>Установить на :
            <a href="#" class="quarter">25%</a> /
            <a href="#" class="half">50%</a> /
            <a href="#" class="three-quarters">75%</a> /
            <a href="#" class="full">100%</a>
</p>

<div class="progress-bar green glow"> <span style="width: 55%"></span></div>
<p>Установить на :
            <a href="#" class="quarter">25%</a> /
            <a href="#" class="half">50%</a> /
            <a href="#" class="three-quarters">75%</a> /
            <a href="#" class="full">100%</a>
</p>

Подключаем скрипт, в котором будем устанавливать пункты для корректировки сравнения, перед </body>:
Код
<script>$(document).ready(function(){            
            $('.quarter').click(function(){
            $(this).parent().prev().children('span').css('width','25%');
            });
            $('.half').click(function(){
            $(this).parent().prev().children('span').css('width','50%');
            });
            $('.three-quarters').click(function(){
            $(this).parent().prev().children('span').css('width','75%');
            });
            $('.full').click(function(){
            $(this).parent().prev().children('span').css('width','100%');
            });            
            });</script>


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 04.10.2016 в 17:00
Материал просмотрен: 1130 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
uLike – кнопка «Мне нравится»
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0