Стильный Progress bar для сайта на Js и CSS
827материалов
228тем на форуме
3003комментария
6152пользователя

Стильный 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
Материал просмотрен: 560 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

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

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


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта