zprogress/zprogress.js at master · cheerful/zprogress · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// 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)