Анимированный прогресс бар на JQuery

04.12.2019
CSS, jQuery

Категория: jQuery.

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








 


Анимированный прогресс бар на JQuery

CSS

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:650px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}
h3 {text-align:center}

.pbar .ui-progressbar-value {display:block !important}
.pbar {overflow: hidden}
.percent {position:relative;text-align: right;}
.elapsed {position:relative;text-align: right;}

JavaScript

$(document).ready(function(){
    jQuery.fn.anim_progressbar = function (aOptions) {
        // Определяем значения
        var iCms = 1000;
        var iMms = 60 * iCms;
        var iHms = 3600 * iCms;
        var iDms = 24 * 3600 * iCms;

        // Определяем опции
        var aDefOpts = {
            start: new Date(), // Текущее время
            finish: new Date().setTime(new Date().getTime() + 60 * iCms), // Текущее время  + 60 сек
            interval: 100
        }
        var aOpts = jQuery.extend(aDefOpts, aOptions);
        var vPb = this;

        // Каждый индикатор прогресса
        return this.each(
            function() {
                var iDuration = aOpts.finish - aOpts.start;

                // Вызываем оригинальный индикатор прогресса
                $(vPb).children('.pbar').progressbar();

                // Процесс обработки
                var vInterval = setInterval(
                    function(){
                        var iLeftMs = aOpts.finish - new Date(); // Оставшееся время в миллисекундах
                        var iElapsedMs = new Date() - aOpts.start, // Прошедшее время в миллисекундах
                            iDays = parseInt(iLeftMs / iDms), // Прошло дней
                            iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), // Прошло часов
                            iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), // Прошло минут
                            iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), // Прошло секунд
                            iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // Процент выполнения

                        // Выводим текущее положение и прогресс
                        $(vPb).children('.percent').html(''+iPerc.toFixed(1)+'%');
                        $(vPb).children('.elapsed').html(iDays+' дн. '+iHours+'ч.:'+iMin+'мин.:'+iSec+'сек.');
                        $(vPb).children('.pbar').children('.ui-progressbar-value').css('width', iPerc+'%');

                        // В случае завершения
                        if (iPerc >= 100) {
                            clearInterval(vInterval);
                            $(vPb).children('.percent').html('100%');
                            $(vPb).children('.elapsed').html('Завершено');
                        }
                    } ,aOpts.interval
                );
            }
        );
    }

    // Режим по умолчанию
    $('#progress1').anim_progressbar();

    // Для секунд с 5-й по 15-ю
    var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // Теперь прибавляем по 5 секунд
    var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // Теперь прибавляем по 15 секунд
    $('#progress2').anim_progressbar({start: iNow, finish: iEnd, interval: 100});

    // Устанавливаем интервал обновления в 1 секунду
    $('#progress3').anim_progressbar({interval: 1000});
});

В первой части кода мы создаем новый плагин jQuery anim_progressbar, а во второй — приводим несколько примеров инициализации с различными параметрами. Конструктору передаются следующие параметры: start (время старта), finish (время финиша) и interval (интервал обновления индикатора). Так что вы можете устанавливать не только часы и минуты, но и дни.

На сайте trubkibondareva.ru Вы можете приобрести курительные трубки ручной работы которые изготавливаются из древовидного кустарника, растущего в лесах Среднеземноморья.

Метки: , ,