Простой Progress Bar на JQury как на YouTube
- Создаем файл progress.js, помещаем его в удобную папку на сайте и подключаем на всех страницах между <head></head> вот так <script src="полный_адрес_к_файлу/progress.js"></script>
- В файл 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');
});
}); - Дописываем такие стили, которые можно подправить под свой дизайн:
#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);
} - Очищаем кеш, перезагружаем страницу, и видим как в верху страницы появиться progress bar как на YouTube.
Данный вариант был найден на зарубежном сайте и немного переделан. В момент написания статьи ДЭМО можно было посмотреть прям на этом же сайте 🙂
FrankyJo
28.02.2018
Классная штука.
Может и себе такую на сайте сделаю.
admin
28.02.2018
😉