Show progress bar in Youtube spfjs
With spf js framework from google I show a "boot message" (like gmail) when navigating to a page:
<script src=" //ajax.googleapis.com/ajax/libs/spf/2.2.0/spf.js"></script>
<script type="text/javascript">
$(document).ready( function() {
spf.init();
$(document).on("click", ".spf-link", function(e){
$('.loading_message').show();
});
});
</script>
But what I want is a good progress bar like the one we can see on the documentation page (or on Youtube or Medium), is there a good way or sample code to do this?
+3
source to share
2 answers
You can use this library: https://github.com/rstacruz/nprogress . Then, in code, do the following:
$(document).on("spfclick", function() {
// Show progress bar
NProgress.start();
});
$(document).on("spfrequest", function() {
// Increment progress as request is made
NProgress.inc();
});
$(document).on("spfprocess", function() {
// Set progress bar width to 100%
NProgress.done();
});
$(document).on("spfdone", function() {
// Finish request and remove progress bar
NProgress.remove();
});
Make it ready.
+3
source to share
From the docs .
Html
<div id="progress"><dt></dt><dd></dd></div>
Js
var progress = document.getElementById('progress');
var position = -1;
var start = -1;
var timer = -1;
// Animation states: start time, duration, progress complete, and css class.
var animation = {
// Most progress waiting for response; duration is 3x expected to
// accommodate slow networks and will be short-circuited by next step.
REQUEST: [0, 300, '95%', 'waiting'],
// Finish during short processing time.
PROCESS: [100, 25, '101%', 'waiting'],
// Fade it out slowly.
DONE: [125, 150, '101%', 'done']
};
document.addEventListener('spfrequest', handleRequest);
document.addEventListener('spfprocess', handleProcess);
document.addEventListener('spfdone', handleDone);
function setProgress(anim) {
clearTimeout(timer);
var elapsed = (new Date()).getTime() - start;
var scheduled = anim[0];
var duration = anim[1];
var percentage = anim[2];
var classes = anim[3];
var wait = scheduled - elapsed;
// Since navigation can often be faster than the animation,
// wait for the last scheduled step of the progress bar to complete
// before finishing.
if (classes == 'done' && wait > 0) {
timer = setTimeout(function() {
setProgress(anim);
}, wait);
return;
}
progress.className = '';
var ps = progress.style;
ps.transitionDuration = ps.TransitionDuration = duration + 'ms';
ps.width = percentage;
if (classes == 'done') {
// If done, set the class now to start the fade-out and wait until
// the duration is over (i.e. the fade is complete) to reset the bar
// to the beginning.
progress.className = classes;
timer = setTimeout(function() {
ps.width = '0%';
}, duration);
} else {
// If waiting, set the class after the duration is over (i.e. the
// bar has finished moving) to set the class and start the pulse.
timer = setTimeout(function() {
progress.className = classes;
}, duration);
}
}
function handleRequest(event) {
start = (new Date()).getTime();
setProgress(animation.REQUEST);
}
function handleProcess(event) {
setProgress(animation.PROCESS);
//window.scroll(0,0);
}
function handleDone(event) {
setProgress(animation.DONE);
//handleScroll();
}
function clearProgress() {
clearTimeout(timer);
progress.className = '';
var ps = progress.style;
ps.transitionDuration = ps.TransitionDuration = '0ms';
ps.width = '0%';
}
CSS
@-webkit-keyframes pulse {
30% { opacity: 0.6; }
60% { opacity: 0; }
100% { opacity: 0.6; }
}
@keyframes pulse {
30% { opacity: 0.6; }
60% { opacity: 0; }
100% { opacity: 0.6; }
}
#progress {
position: fixed;
z-index: 1000;
top: 0;
left: -6px;
width: 0%;
height: 2px;
background: alpha($purple, 0.6)
border-radius: 1px;
/* the following transition times are overridden by JS */
-webkit-transition: width 150ms ease-out;
transition: width 150ms ease-out;
}
#progress.done {
opacity: 0;
}
#progress dd,
#progress dt {
position: absolute;
top: 0;
height: 2px;
box-shadow: #45C2FF 1px 0 6px 1px;
border-radius: 100%;
}
#progress dd {
opacity: 0.6;
width: 20px;
right: 0;
clip: rect(-6px, 22px, 14px, 10px);
}
#progress dt {
opacity: 0.6;
width: 180px;
right: -80px;
clip: rect(-6px, 90px, 14px, -6px);
}
#progress.waiting dd,
#progress.waiting dt {
-webkit-animation: pulse 2s ease-out 0s infinite;
animation: pulse 2s ease-out 0s infinite;
}
+1
source to share