Site icon GRAVITSAPA.INFO

Простой Progress Bar на JQury как на YouTube

Vitaliy
  1. Создаем файл progress.js, помещаем его в удобную папку на сайте и подключаем на всех страницах между <head></head> вот так <script src="полный_адрес_к_файлу/progress.js"></script>
  2. В файл progress.js вставляем этот код:
    $(function() {
    var $progress = $('#progress');
    $(document).ajaxStart(function() {
    if ($progress.length === 0) {
    $progress = $('<div><dt/><dd/></div>').attr('id', 'progress');
    $("body").append($progress);
    }
    $progress.width((50 + Math.random() * 30) + "%");
    });
    $(document).ajaxComplete(function() {
    $progress.width("100%").delay(200).fadeOut(400, function() {
    $progress.width("0%").delay(200).show();
    });
    });
    $(document).ready(function(){
    $.getJSON('https://jsonip.com');
    });
    });
  3. Дописываем такие стили, которые можно подправить под свой дизайн:

    #progress {
    position: fixed;
    z-index: 2147483647;
    top: 0;
    left: 0px;
    width: 0%;
    height: 5px;
    background: #2487ca;
    /*-moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;*/
    -moz-transition: width 500ms ease-out, opacity 400ms linear;
    -ms-transition: width 500ms ease-out, opacity 400ms linear;
    -o-transition: width 500ms ease-out, opacity 400ms linear;
    -webkit-transition: width 500ms ease-out, opacity 400ms linear;
    transition: width 500ms ease-out, opacity 400ms linear;
    }
    #progress dd, #progress dt {
    position: absolute;
    top: 0;
    height: 5px;
    -moz-box-shadow: rgba(0,0,0,0.2) 1px 0 6px 1px;
    -ms-box-shadow: rgba(0,0,0,0.2) 1px 0 6px 1px;
    -webkit-box-shadow: rgba(0,0,0,0.2) 1px 0 6px 1px;
    box-shadow: rgba(0,0,0,0.2) 1px 0 6px 1px;
    /*-moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;*/
    }
    #progress dt {
    opacity: .6;
    width: 180px;
    right: -80px;
    clip: rect(-6px, 90px, 14px, -6px);
    }
    #progress dd {
    opacity: .6;
    width: 20px;
    right: 0;
    clip: rect(-6px, 22px, 14px, 10px);
    }
  4. Очищаем кеш, перезагружаем страницу, и видим как в верху страницы появиться progress bar как на YouTube.

Данный вариант был найден на зарубежном сайте и немного переделан. В момент написания статьи ДЭМО можно было посмотреть прям на этом же сайте 🙂
Exit mobile version