| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | /** |
| A | 2 | * Copyright (c) 2011-2014 Felix Gnass |
| 3 | * Licensed under the MIT license | |
| 4 | * http://spin.js.org/ | |
| 5 | * | |
| 6 | * Example: | |
| 7 | var opts = { | |
| 8 | lines: 12 // The number of lines to draw | |
| 9 | , length: 7 // The length of each line | |
| 10 | , width: 5 // The line thickness | |
| 11 | , radius: 10 // The radius of the inner circle | |
| 12 | , scale: 1.0 // Scales overall size of the spinner | |
| 13 | , corners: 1 // Roundness (0..1) | |
| 14 | , color: '#000' // #rgb or #rrggbb | |
| 15 | , opacity: 1/4 // Opacity of the lines | |
| 16 | , rotate: 0 // Rotation offset | |
| 17 | , direction: 1 // 1: clockwise, -1: counterclockwise | |
| 18 | , speed: 1 // Rounds per second | |
| 19 | , trail: 100 // Afterglow percentage | |
| 20 | , fps: 20 // Frames per second when using setTimeout() | |
| 21 | , zIndex: 2e9 // Use a high z-index by default | |
| 22 | , className: 'spinner' // CSS class to assign to the element | |
| 23 | , top: '50%' // center vertically | |
| 24 | , left: '50%' // center horizontally | |
| 25 | , shadow: false // Whether to render a shadow | |
| 26 | , hwaccel: false // Whether to use hardware acceleration (might be buggy) | |
| 27 | , position: 'absolute' // Element positioning | |
| 28 | } | |
| 29 | var target = document.getElementById('foo') | |
| 30 | var spinner = new Spinner(opts).spin(target) | |
| 31 | */ | |
| 32 | ;(function (root, factory) { | |
| 33 | ||
| 34 | /* CommonJS */ | |
| 35 | if (typeof module == 'object' && module.exports) module.exports = factory() | |
| 36 | ||
| 37 | /* AMD module */ | |
| 38 | else if (typeof define == 'function' && define.amd) define(factory) | |
| 39 | ||
| 40 | /* Browser global */ | |
| 41 | else root.Spinner = factory() | |
| 42 | }(this, function () { | |
| 43 | "use strict" | |
| 44 | ||
| 45 | var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */ | |
| 46 | , animations = {} /* Animation rules keyed by their name */ | |
| 47 | , useCssAnimations /* Whether to use CSS animations or setTimeout */ | |
| 48 | , sheet /* A stylesheet to hold the @keyframe or VML rules. */ | |
| 49 | ||
| 50 | /** | |
| 51 | * Utility function to create elements. If no tag name is given, | |
| 52 | * a DIV is created. Optionally properties can be passed. | |
| 53 | */ | |
| 54 | function createEl (tag, prop) { | |
| 55 | var el = document.createElement(tag || 'div') | |
| 56 | , n | |
| 57 | ||
| 58 | for (n in prop) el[n] = prop[n] | |
| 59 | return el | |
| 60 | } | |
| 61 | ||
| 62 | /** | |
| 63 | * Appends children and returns the parent. | |
| 64 | */ | |
| 65 | function ins (parent /* child1, child2, ...*/) { | |
| 66 | for (var i = 1, n = arguments.length; i < n; i++) { | |
| 67 | parent.appendChild(arguments[i]) | |
| 68 | } | |
| 69 | ||
| 70 | return parent | |
| 71 | } | |
| 72 | ||
| 73 | /** | |
| 74 | * Creates an opacity keyframe animation rule and returns its name. | |
| 75 | * Since most mobile Webkits have timing issues with animation-delay, | |
| 76 | * we create separate rules for each line/segment. | |
| 77 | */ | |
| 78 | function addAnimation (alpha, trail, i, lines) { | |
| 79 | var name = ['opacity', trail, ~~(alpha * 100), i, lines].join('-') | |
| 80 | , start = 0.01 + i/lines * 100 | |
| 81 | , z = Math.max(1 - (1-alpha) / trail * (100-start), alpha) | |
| 82 | , prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase() | |
| 83 | , pre = prefix && '-' + prefix + '-' || '' | |
| 84 | ||
| 85 | if (!animations[name]) { | |
| 86 | sheet.insertRule( | |
| 87 | '@' + pre + 'keyframes ' + name + '{' + | |
| 88 | '0%{opacity:' + z + '}' + | |
| 89 | start + '%{opacity:' + alpha + '}' + | |
| 90 | (start+0.01) + '%{opacity:1}' + | |
| 91 | (start+trail) % 100 + '%{opacity:' + alpha + '}' + | |
| 92 | '100%{opacity:' + z + '}' + | |
| 93 | '}', sheet.cssRules.length) | |
| 94 | ||
| 95 | animations[name] = 1 | |
| 96 | } | |
| 97 | ||
| 98 | return name | |
| 99 | } | |
| 100 | ||
| 101 | /** | |
| 102 | * Tries various vendor prefixes and returns the first supported property. | |
| 103 | */ | |
| 104 | function vendor (el, prop) { | |
| 105 | var s = el.style | |
| 106 | , pp | |
| 107 | , i | |
| 108 | ||
| 109 | prop = prop.charAt(0).toUpperCase() + prop.slice(1) | |
| 110 | if (s[prop] !== undefined) return prop | |
| 111 | for (i = 0; i < prefixes.length; i++) { | |
| 112 | pp = prefixes[i]+prop | |
| 113 | if (s[pp] !== undefined) return pp | |
| 114 | } | |
| 115 | } | |
| 116 | ||
| 117 | /** | |
| 118 | * Sets multiple style properties at once. | |
| 119 | */ | |
| 120 | function css (el, prop) { | |
| 121 | for (var n in prop) { | |
| 122 | el.style[vendor(el, n) || n] = prop[n] | |
| 123 | } | |
| 124 | ||
| 125 | return el | |
| 126 | } | |
| 127 | ||
| 128 | /** | |
| 129 | * Fills in default values. | |
| 130 | */ | |
| 131 | function merge (obj) { | |
| 132 | for (var i = 1; i < arguments.length; i++) { | |
| 133 | var def = arguments[i] | |
| 134 | for (var n in def) { | |
| 135 | if (obj[n] === undefined) obj[n] = def[n] | |
| 136 | } | |
| 137 | } | |
| 138 | return obj | |
| 139 | } | |
| 140 | ||
| 141 | /** | |
| 142 | * Returns the line color from the given string or array. | |
| 143 | */ | |
| 144 | function getColor (color, idx) { | |
| 145 | return typeof color == 'string' ? color : color[idx % color.length] | |
| 146 | } | |
| 147 | ||
| 148 | // Built-in defaults | |
| 149 | ||
| 150 | var defaults = { | |
| 151 | lines: 12 // The number of lines to draw | |
| 152 | , length: 7 // The length of each line | |
| 153 | , width: 5 // The line thickness | |
| 154 | , radius: 10 // The radius of the inner circle | |
| 155 | , scale: 1.0 // Scales overall size of the spinner | |
| 156 | , corners: 1 // Roundness (0..1) | |
| 157 | , color: '#000' // #rgb or #rrggbb | |
| 158 | , opacity: 1/4 // Opacity of the lines | |
| 159 | , rotate: 0 // Rotation offset | |
| 160 | , direction: 1 // 1: clockwise, -1: counterclockwise | |
| 161 | , speed: 1 // Rounds per second | |
| 162 | , trail: 100 // Afterglow percentage | |
| 163 | , fps: 20 // Frames per second when using setTimeout() | |
| 164 | , zIndex: 2e9 // Use a high z-index by default | |
| 165 | , className: 'spinner' // CSS class to assign to the element | |
| 166 | , top: '50%' // center vertically | |
| 167 | , left: '50%' // center horizontally | |
| 168 | , shadow: false // Whether to render a shadow | |
| 169 | , hwaccel: false // Whether to use hardware acceleration (might be buggy) | |
| 170 | , position: 'absolute' // Element positioning | |
| 171 | } | |
| 172 | ||
| 173 | /** The constructor */ | |
| 174 | function Spinner (o) { | |
| 175 | this.opts = merge(o || {}, Spinner.defaults, defaults) | |
| 176 | } | |
| 177 | ||
| 178 | // Global defaults that override the built-ins: | |
| 179 | Spinner.defaults = {} | |
| 180 | ||
| 181 | merge(Spinner.prototype, { | |
| 182 | /** | |
| 183 | * Adds the spinner to the given target element. If this instance is already | |
| 184 | * spinning, it is automatically removed from its previous target b calling | |
| 185 | * stop() internally. | |
| 186 | */ | |
| 187 | spin: function (target) { | |
| 188 | this.stop() | |
| 189 | ||
| 190 | var self = this | |
| 191 | , o = self.opts | |
| 192 | , el = self.el = createEl(null, {className: o.className}) | |
| 193 | ||
| 194 | css(el, { | |
| 195 | position: o.position | |
| 196 | , width: 0 | |
| 197 | , zIndex: o.zIndex | |
| 198 | , left: o.left | |
| 199 | , top: o.top | |
| 200 | }) | |
| 201 | ||
| 202 | if (target) { | |
| 203 | target.insertBefore(el, target.firstChild || null) | |
| 204 | } | |
| 205 | ||
| 206 | el.setAttribute('role', 'progressbar') | |
| 207 | self.lines(el, self.opts) | |
| 208 | ||
| 209 | if (!useCssAnimations) { | |
| 210 | // No CSS animation support, use setTimeout() instead | |
| 211 | var i = 0 | |
| 212 | , start = (o.lines - 1) * (1 - o.direction) / 2 | |
| 213 | , alpha | |
| 214 | , fps = o.fps | |
| 215 | , f = fps / o.speed | |
| 216 | , ostep = (1 - o.opacity) / (f * o.trail / 100) | |
| 217 | , astep = f / o.lines | |
| 218 | ||
| 219 | ;(function anim () { | |
| 220 | i++ | |
| 221 | for (var j = 0; j < o.lines; j++) { | |
| 222 | alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity) | |
| 223 | ||
| 224 | self.opacity(el, j * o.direction + start, alpha, o) | |
| 225 | } | |
| 226 | self.timeout = self.el && setTimeout(anim, ~~(1000 / fps)) | |
| 227 | })() | |
| 228 | } | |
| 229 | return self | |
| 230 | } | |
| 231 | ||
| 232 | /** | |
| 233 | * Stops and removes the Spinner. | |
| 234 | */ | |
| 235 | , stop: function () { | |
| 236 | var el = this.el | |
| 237 | if (el) { | |
| 238 | clearTimeout(this.timeout) | |
| 239 | if (el.parentNode) el.parentNode.removeChild(el) | |
| 240 | this.el = undefined | |
| 241 | } | |
| 242 | return this | |
| 243 | } | |
| 244 | ||
| 245 | /** | |
| 246 | * Internal method that draws the individual lines. Will be overwritten | |
| 247 | * in VML fallback mode below. | |
| 248 | */ | |
| 249 | , lines: function (el, o) { | |
| 250 | var i = 0 | |
| 251 | , start = (o.lines - 1) * (1 - o.direction) / 2 | |
| 252 | , seg | |
| 253 | ||
| 254 | function fill (color, shadow) { | |
| 255 | return css(createEl(), { | |
| 256 | position: 'absolute' | |
| 257 | , width: o.scale * (o.length + o.width) + 'px' | |
| 258 | , height: o.scale * o.width + 'px' | |
| 259 | , background: color | |
| 260 | , boxShadow: shadow | |
| 261 | , transformOrigin: 'left' | |
| 262 | , transform: 'rotate(' + ~~(360/o.lines*i + o.rotate) + 'deg) translate(' + o.scale*o.radius + 'px' + ',0)' | |
| 263 | , borderRadius: (o.corners * o.scale * o.width >> 1) + 'px' | |
| 264 | }) | |
| 265 | } | |
| 266 | ||
| 267 | for (; i < o.lines; i++) { | |
| 268 | seg = css(createEl(), { | |
| 269 | position: 'absolute' | |
| 270 | , top: 1 + ~(o.scale * o.width / 2) + 'px' | |
| 271 | , transform: o.hwaccel ? 'translate3d(0,0,0)' : '' | |
| 272 | , opacity: o.opacity | |
| 273 | , animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1 / o.speed + 's linear infinite' | |
| 274 | }) | |
| 275 | ||
| 276 | if (o.shadow) ins(seg, css(fill('#000', '0 0 4px #000'), {top: '2px'})) | |
| 277 | ins(el, ins(seg, fill(getColor(o.color, i), '0 0 1px rgba(0,0,0,.1)'))) | |
| 278 | } | |
| 279 | return el | |
| 280 | } | |
| 281 | ||
| 282 | /** | |
| 283 | * Internal method that adjusts the opacity of a single line. | |
| 284 | * Will be overwritten in VML fallback mode below. | |
| 285 | */ | |
| 286 | , opacity: function (el, i, val) { | |
| 287 | if (i < el.childNodes.length) el.childNodes[i].style.opacity = val | |
| 288 | } | |
| 289 | ||
| 290 | }) | |
| 291 | ||
| 292 | ||
| 293 | function initVML () { | |
| 294 | ||
| 295 | /* Utility function to create a VML tag */ | |
| 296 | function vml (tag, attr) { | |
| 297 | return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr) | |
| 298 | } | |
| 299 | ||
| 300 | // No CSS transforms but VML support, add a CSS rule for VML elements: | |
| 301 | sheet.addRule('.spin-vml', 'behavior:url(#default#VML)') | |
| 302 | ||
| 303 | Spinner.prototype.lines = function (el, o) { | |
| 304 | var r = o.scale * (o.length + o.width) | |
| 305 | , s = o.scale * 2 * r | |
| 306 | ||
| 307 | function grp () { | |
| 308 | return css( | |
| 309 | vml('group', { | |
| 310 | coordsize: s + ' ' + s | |
| 311 | , coordorigin: -r + ' ' + -r | |
| 312 | }) | |
| 313 | , { width: s, height: s } | |
| 314 | ) | |
| 315 | } | |
| 316 | ||
| 317 | var margin = -(o.width + o.length) * o.scale * 2 + 'px' | |
| 318 | , g = css(grp(), {position: 'absolute', top: margin, left: margin}) | |
| 319 | , i | |
| 320 | ||
| 321 | function seg (i, dx, filter) { | |
| 322 | ins( | |
| 323 | g | |
| 324 | , ins( | |
| 325 | css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}) | |
| 326 | , ins( | |
| 327 | css( | |
| 328 | vml('roundrect', {arcsize: o.corners}) | |
| 329 | , { width: r | |
| 330 | , height: o.scale * o.width | |
| 331 | , left: o.scale * o.radius | |
| 332 | , top: -o.scale * o.width >> 1 | |
| 333 | , filter: filter | |
| 334 | } | |
| 335 | ) | |
| 336 | , vml('fill', {color: getColor(o.color, i), opacity: o.opacity}) | |
| 337 | , vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change | |
| 338 | ) | |
| 339 | ) | |
| 340 | ) | |
| 341 | } | |
| 342 | ||
| 343 | if (o.shadow) | |
| 344 | for (i = 1; i <= o.lines; i++) { | |
| 345 | seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)') | |
| 346 | } | |
| 347 | ||
| 348 | for (i = 1; i <= o.lines; i++) seg(i) | |
| 349 | return ins(el, g) | |
| 350 | } | |
| 351 | ||
| 352 | Spinner.prototype.opacity = function (el, i, val, o) { | |
| 353 | var c = el.firstChild | |
| 354 | o = o.shadow && o.lines || 0 | |
| 355 | if (c && i + o < c.childNodes.length) { | |
| 356 | c = c.childNodes[i + o]; c = c && c.firstChild; c = c && c.firstChild | |
| 357 | if (c) c.opacity = val | |
| 358 | } | |
| 359 | } | |
| 360 | } | |
| 361 | ||
| 362 | if (typeof document !== 'undefined') { | |
| 363 | sheet = (function () { | |
| 364 | var el = createEl('style', {type : 'text/css'}) | |
| 365 | ins(document.getElementsByTagName('head')[0], el) | |
| 366 | return el.sheet || el.styleSheet | |
| 367 | }()) | |
| 368 | ||
| 369 | var probe = css(createEl('group'), {behavior: 'url(#default#VML)'}) | |
| 370 | ||
| 371 | if (!vendor(probe, 'transform') && probe.adj) initVML() | |
| 372 | else useCssAnimations = vendor(probe, 'animation') | |
| 373 | } | |
| 374 | ||
| 375 | return Spinner | |
| 376 | ||
| 377 | })); | |
