75 lines
1.7 KiB
JavaScript
75 lines
1.7 KiB
JavaScript
|
// zprogress (c) 2013 Thomas Fuchs
|
||
|
|
// MIT-licensed - https://github.com/madrobby/zprogress
|
||
|
|
|
||
|
|
;(function($){
|
||
|
|
var html =
|
||
|
|
'<style>#zprogress{position:fixed;top:0;left:0;width:100%;height:3px;opacity:0;pointer-events:none;-webkit-pointer-events:none;z-index:1000}'+
|
||
|
|
'#zprogress_indicator{width:100%;margin-left:-100%;height:100%;background:#1c88ff}'+
|
||
|
|
'</style>'+
|
||
|
|
'<div id=zprogress><div id=zprogress_indicator></div></div>',
|
||
|
|
$wrapper, $indicator, value, timeout,
|
||
|
|
MARGIN = 12.5,
|
||
|
|
LMARGIN = MARGIN/100,
|
||
|
|
RMARGIN = 1 - LMARGIN
|
||
|
|
|
||
|
|
function init(){
|
||
|
|
if($wrapper) return
|
||
|
|
|
||
|
|
$('body').append(html)
|
||
|
|
$wrapper = $('#zprogress')
|
||
|
|
$indicator = $('#zprogress_indicator')
|
||
|
|
}
|
||
|
|
|
||
|
|
function anim(){
|
||
|
|
$indicator.animate({ translateX: value*100+'%' }, 200)
|
||
|
|
}
|
||
|
|
|
||
|
|
function clear(){
|
||
|
|
if(timeout) clearTimeout(timeout)
|
||
|
|
timeout = undefined
|
||
|
|
}
|
||
|
|
|
||
|
|
function trickle(){
|
||
|
|
timeout = setTimeout(function(){
|
||
|
|
$.zprogress.inc((RMARGIN-value)*.035*Math.random())
|
||
|
|
trickle()
|
||
|
|
}, 350+(400*Math.random()))
|
||
|
|
}
|
||
|
|
|
||
|
|
$.zprogress = {
|
||
|
|
start: function(){
|
||
|
|
init()
|
||
|
|
clear()
|
||
|
|
value = LMARGIN
|
||
|
|
$wrapper.animate({ opacity: 1 })
|
||
|
|
$indicator.animate({ translateX: '0%' }, 0)
|
||
|
|
setTimeout(function(){
|
||
|
|
anim()
|
||
|
|
trickle()
|
||
|
|
},0)
|
||
|
|
},
|
||
|
|
inc: function(delta){
|
||
|
|
if(value<RMARGIN) value+=delta||.05
|
||
|
|
anim()
|
||
|
|
},
|
||
|
|
set: function(newValue){
|
||
|
|
init()
|
||
|
|
clear()
|
||
|
|
value = newValue
|
||
|
|
anim()
|
||
|
|
trickle()
|
||
|
|
},
|
||
|
|
done: function(){
|
||
|
|
init()
|
||
|
|
clear()
|
||
|
|
value = 1
|
||
|
|
anim()
|
||
|
|
setTimeout(function(){$wrapper.animate({ opacity: 0 })}, 100)
|
||
|
|
},
|
||
|
|
color: function(color){
|
||
|
|
init()
|
||
|
|
$indicator.css({ backgroundColor: color })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})(Zepto)
|