Частный вебмастер г. Псков.
Создание сайтов - Магия & Креатив!

Admin
Дата: 15-08-2016
Просмотров: 1391
Комментарии: 4

Progeress bar

Progeress bar

Реализация Progress bar, без применения посторонних плагинов (шаблон-имитация).


MODX Revolution

Progress bar, просто не заменим при построении графиков, размещении опросов или же если владельцу сайта необходимо информировать посетителя о состоянии готовности какой-либо операции в процентном соотношении. В связи с этим хочу поделиться своим способом реализации этого элемента интерфейса при помощи Jquery. Пример, своего рода, имитации загрузки, которую Вы сможете использовать как шаблон.

1. Первым делом простейший html код:

<div class="progress_bar">
    <div class="line">
        <div class="percent">0%</div>
    </div>
</div>

2. Стили и цветовые схемы Вы можете применить согласно дизайна своего сайта:

.progress_bar{	
	width: 610px;
	border:1px solid white;
	border-radius:4px;
	padding: 1px;
}
.line{
	border-radius:4px;
}     
.percent{
  text-align:center;
  color:#666;
}  

3. Ну и последнее, jQuery код с комментариями:

var total=250; //Итоговый результат, для примера взято число 250//
var percent=0; //Первоначальная переменная, для примера взято число 0//
$(document).ready(function lines(){ //Запускаем функцию// 
var value=$('.progress_bar').width(); //Получаем ширину блока, будет необходимо для масштабирования блоков//  
$('.percent').width(value);//устанавливаем постоянную ширину-отцентрируем значение//

    percent+=Math.ceil(Math.random()*20);//Это имитация (случайное значение)-здесь необходимо установить алгоритм для решения Вашей задачи//
    
    var line=(percent/total)*100; //Узнаем процент выполнения от общего значения//  
    if(line>50)$('.percent').css('color','white');  //Эстетика - цвет значения после прохождения 50%//  
    if(line>100)line=100; //Выводим значение-строго ровно 100//        
$('.percent').html(line.toFixed(0)+'%'); //Подставляем значение (целое число)// 
$('.line').css('background','#0382c8') //Цвет индикатора// 
          .width(line*(value/100));  //Индикатор заполняется согласно длинне блока div(смотри css), т.е. 610px)//                  
    if(line!=100) setTimeout(lines, 100);//Цикличность-интервал в соответствии с Вашей задачей//
});

Пример (обновите страницу):

0%

Скачать
Эта имитация-достаточно грубая модель, поскольку применение Progress bar весьма индивидуально, тем не менее надеюсь этот пример окажется полезным при решении Ваших задач.
Вернуться

Комментарии (4)

  1. Андрей
    Андрей
    25 декабря 2016, 10:00

    Ой, а в архиве нет сss!?


  2. Admin
    Admin
    25 декабря 2016, 10:02
    (Комментарий был изменён)

    Да, я добавил, спасибо, просто я подумал что вряд ли понадобится, шаблоны у всех разные!


  3. Игорь
    Игорь
    07 июня 2017, 15:23

    Прикольно!


  4. Admin
    Admin
    07 июня 2017, 15:25

    Спс!!))