-
Notifications
You must be signed in to change notification settings - Fork 268
/
nanobar.js
143 lines (126 loc) · 3.27 KB
/
nanobar.js
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
/* http://nanobar.micronube.com/ || https://github.com/jacoborus/nanobar/ MIT LICENSE */
(function (root) {
'use strict'
// container styles
var css = '.nanobar{width:100%;height:4px;z-index:9999;top:0}.bar{width:0;height:100%;transition:height .3s;background:#000}'
// add required css in head div
function addCss () {
var s = document.getElementById('nanobarcss')
// check whether style tag is already inserted
if (s === null) {
s = document.createElement('style')
s.type = 'text/css'
s.id = 'nanobarcss'
document.head.insertBefore(s, document.head.firstChild)
// the world
if (!s.styleSheet) return s.appendChild(document.createTextNode(css))
// IE
s.styleSheet.cssText = css
}
}
function addClass (el, cls) {
if (el.classList) el.classList.add(cls)
else el.className += ' ' + cls
}
// create a progress bar
// this will be destroyed after reaching 100% progress
function createBar (rm) {
// create progress element
var el = document.createElement('div'),
width = 0,
here = 0,
on = 0,
bar = {
el: el,
go: go
}
addClass(el, 'bar')
// animation loop
function move () {
var dist = width - here
if (dist < 0.1 && dist > -0.1) {
place(here)
on = 0
if (width >= 100) {
el.style.height = 0
setTimeout(function () {
rm(el)
}, 300)
}
} else {
place(width - dist / 4)
setTimeout(go, 16)
}
}
// set bar width
function place (num) {
width = num
el.style.width = width + '%'
}
function go (num) {
if (num >= 0) {
here = num
if (!on) {
on = 1
move()
}
} else if (on) {
move()
}
}
return bar
}
function Nanobar (opts) {
opts = opts || {}
// set options
var el = document.createElement('div'),
applyGo,
nanobar = {
el: el,
go: function (p) {
// expand bar
applyGo(p)
// create new bar when progress reaches 100%
if (p >= 100) {
init()
}
}
}
// remove element from nanobar container
function rm (child) {
el.removeChild(child)
}
// create and insert progress var in nanobar container
function init () {
var bar = createBar(rm)
el.appendChild(bar.el)
applyGo = bar.go
}
addCss()
addClass(el, 'nanobar')
if (opts.id) el.id = opts.id
if (opts.classname) addClass(el, opts.classname)
// insert container
if (opts.target) {
// inside a div
el.style.position = 'relative'
opts.target.insertBefore(el, opts.target.firstChild)
} else {
// on top of the page
el.style.position = 'fixed'
document.getElementsByTagName('body')[0].appendChild(el)
}
init()
return nanobar
}
if (typeof exports === 'object') {
// CommonJS
module.exports = Nanobar
} else if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], function () { return Nanobar })
} else {
// Browser globals
root.Nanobar = Nanobar
}
}(this))