Show spinner while uploading mission or downloading mod

public/css/ladda-themeless.css

@@ -0,0 +1,330 @@
+/*!
+ * Ladda
+ * http://lab.hakim.se/ladda
+ * MIT licensed
+ *
+ * Copyright (C) 2013 Hakim El Hattab, http://hakim.se
+ */
+/*************************************
+ * CONFIG
+ */
+/*************************************
+ * MIXINS
+ */
+/*************************************
+ * BUTTON BASE
+ */
+.ladda-button {
+  position: relative; }
+
+/* Spinner animation */
+.ladda-button .ladda-spinner {
+  position: absolute;
+  z-index: 2;
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  top: 50%;
+  margin-top: -16px;
+  opacity: 0;
+  pointer-events: none; }
+
+/* Button label */
+.ladda-button .ladda-label {
+  position: relative;
+  z-index: 3; }
+
+/* Progress bar */
+.ladda-button .ladda-progress {
+  position: absolute;
+  width: 0;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.2);
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: 0.1s linear all !important;
+  -moz-transition: 0.1s linear all !important;
+  -ms-transition: 0.1s linear all !important;
+  -o-transition: 0.1s linear all !important;
+  transition: 0.1s linear all !important; }
+
+.ladda-button[data-loading] .ladda-progress {
+  opacity: 1;
+  visibility: visible; }
+
+/*************************************
+ * EASING
+ */
+.ladda-button,
+.ladda-button .ladda-spinner,
+.ladda-button .ladda-label {
+  -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
+  -moz-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
+  -ms-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
+  -o-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
+  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important; }
+
+.ladda-button[data-style=zoom-in],
+.ladda-button[data-style=zoom-in] .ladda-spinner,
+.ladda-button[data-style=zoom-in] .ladda-label,
+.ladda-button[data-style=zoom-out],
+.ladda-button[data-style=zoom-out] .ladda-spinner,
+.ladda-button[data-style=zoom-out] .ladda-label {
+  -webkit-transition: 0.3s ease all !important;
+  -moz-transition: 0.3s ease all !important;
+  -ms-transition: 0.3s ease all !important;
+  -o-transition: 0.3s ease all !important;
+  transition: 0.3s ease all !important; }
+
+/*************************************
+ * EXPAND LEFT
+ */
+.ladda-button[data-style=expand-right] .ladda-spinner {
+  right: 14px; }
+.ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-right][data-size="xs"] .ladda-spinner {
+  right: 4px; }
+.ladda-button[data-style=expand-right][data-loading] {
+  padding-right: 56px; }
+  .ladda-button[data-style=expand-right][data-loading] .ladda-spinner {
+    opacity: 1; }
+  .ladda-button[data-style=expand-right][data-loading][data-size="s"], .ladda-button[data-style=expand-right][data-loading][data-size="xs"] {
+    padding-right: 40px; }
+
+/*************************************
+ * EXPAND RIGHT
+ */
+.ladda-button[data-style=expand-left] .ladda-spinner {
+  left: 14px; }
+.ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-left][data-size="xs"] .ladda-spinner {
+  left: 4px; }
+.ladda-button[data-style=expand-left][data-loading] {
+  padding-left: 56px; }
+  .ladda-button[data-style=expand-left][data-loading] .ladda-spinner {
+    opacity: 1; }
+  .ladda-button[data-style=expand-left][data-loading][data-size="s"], .ladda-button[data-style=expand-left][data-loading][data-size="xs"] {
+    padding-left: 40px; }
+
+/*************************************
+ * EXPAND UP
+ */
+.ladda-button[data-style=expand-up] {
+  overflow: hidden; }
+  .ladda-button[data-style=expand-up] .ladda-spinner {
+    top: -32px;
+    left: 50%;
+    margin-left: -16px; }
+  .ladda-button[data-style=expand-up][data-loading] {
+    padding-top: 54px; }
+    .ladda-button[data-style=expand-up][data-loading] .ladda-spinner {
+      opacity: 1;
+      top: 14px;
+      margin-top: 0; }
+    .ladda-button[data-style=expand-up][data-loading][data-size="s"], .ladda-button[data-style=expand-up][data-loading][data-size="xs"] {
+      padding-top: 32px; }
+      .ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-up][data-loading][data-size="xs"] .ladda-spinner {
+        top: 4px; }
+
+/*************************************
+ * EXPAND DOWN
+ */
+.ladda-button[data-style=expand-down] {
+  overflow: hidden; }
+  .ladda-button[data-style=expand-down] .ladda-spinner {
+    top: 62px;
+    left: 50%;
+    margin-left: -16px; }
+  .ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-down][data-size="xs"] .ladda-spinner {
+    top: 40px; }
+  .ladda-button[data-style=expand-down][data-loading] {
+    padding-bottom: 54px; }
+    .ladda-button[data-style=expand-down][data-loading] .ladda-spinner {
+      opacity: 1; }
+    .ladda-button[data-style=expand-down][data-loading][data-size="s"], .ladda-button[data-style=expand-down][data-loading][data-size="xs"] {
+      padding-bottom: 32px; }
+
+/*************************************
+ * SLIDE LEFT
+ */
+.ladda-button[data-style=slide-left] {
+  overflow: hidden; }
+  .ladda-button[data-style=slide-left] .ladda-label {
+    position: relative; }
+  .ladda-button[data-style=slide-left] .ladda-spinner {
+    left: 100%;
+    margin-left: -16px; }
+  .ladda-button[data-style=slide-left][data-loading] .ladda-label {
+    opacity: 0;
+    left: -100%; }
+  .ladda-button[data-style=slide-left][data-loading] .ladda-spinner {
+    opacity: 1;
+    left: 50%; }
+
+/*************************************
+ * SLIDE RIGHT
+ */
+.ladda-button[data-style=slide-right] {
+  overflow: hidden; }
+  .ladda-button[data-style=slide-right] .ladda-label {
+    position: relative; }
+  .ladda-button[data-style=slide-right] .ladda-spinner {
+    right: 100%;
+    margin-left: -16px; }
+  .ladda-button[data-style=slide-right][data-loading] .ladda-label {
+    opacity: 0;
+    left: 100%; }
+  .ladda-button[data-style=slide-right][data-loading] .ladda-spinner {
+    opacity: 1;
+    left: 50%; }
+
+/*************************************
+ * SLIDE UP
+ */
+.ladda-button[data-style=slide-up] {
+  overflow: hidden; }
+  .ladda-button[data-style=slide-up] .ladda-label {
+    position: relative; }
+  .ladda-button[data-style=slide-up] .ladda-spinner {
+    left: 50%;
+    margin-left: -16px;
+    margin-top: 1em; }
+  .ladda-button[data-style=slide-up][data-loading] .ladda-label {
+    opacity: 0;
+    top: -1em; }
+  .ladda-button[data-style=slide-up][data-loading] .ladda-spinner {
+    opacity: 1;
+    margin-top: -16px; }
+
+/*************************************
+ * SLIDE DOWN
+ */
+.ladda-button[data-style=slide-down] {
+  overflow: hidden; }
+  .ladda-button[data-style=slide-down] .ladda-label {
+    position: relative; }
+  .ladda-button[data-style=slide-down] .ladda-spinner {
+    left: 50%;
+    margin-left: -16px;
+    margin-top: -2em; }
+  .ladda-button[data-style=slide-down][data-loading] .ladda-label {
+    opacity: 0;
+    top: 1em; }
+  .ladda-button[data-style=slide-down][data-loading] .ladda-spinner {
+    opacity: 1;
+    margin-top: -16px; }
+
+/*************************************
+ * ZOOM-OUT
+ */
+.ladda-button[data-style=zoom-out] {
+  overflow: hidden; }
+
+.ladda-button[data-style=zoom-out] .ladda-spinner {
+  left: 50%;
+  margin-left: -16px;
+  -webkit-transform: scale(2.5);
+  -moz-transform: scale(2.5);
+  -ms-transform: scale(2.5);
+  -o-transform: scale(2.5);
+  transform: scale(2.5); }
+
+.ladda-button[data-style=zoom-out] .ladda-label {
+  position: relative;
+  display: inline-block; }
+
+.ladda-button[data-style=zoom-out][data-loading] .ladda-label {
+  opacity: 0;
+  -webkit-transform: scale(0.5);
+  -moz-transform: scale(0.5);
+  -ms-transform: scale(0.5);
+  -o-transform: scale(0.5);
+  transform: scale(0.5); }
+
+.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner {
+  opacity: 1;
+  -webkit-transform: none;
+  -moz-transform: none;
+  -ms-transform: none;
+  -o-transform: none;
+  transform: none; }
+
+/*************************************
+ * ZOOM-IN
+ */
+.ladda-button[data-style=zoom-in] {
+  overflow: hidden; }
+
+.ladda-button[data-style=zoom-in] .ladda-spinner {
+  left: 50%;
+  margin-left: -16px;
+  -webkit-transform: scale(0.2);
+  -moz-transform: scale(0.2);
+  -ms-transform: scale(0.2);
+  -o-transform: scale(0.2);
+  transform: scale(0.2); }
+
+.ladda-button[data-style=zoom-in] .ladda-label {
+  position: relative;
+  display: inline-block; }
+
+.ladda-button[data-style=zoom-in][data-loading] .ladda-label {
+  opacity: 0;
+  -webkit-transform: scale(2.2);
+  -moz-transform: scale(2.2);
+  -ms-transform: scale(2.2);
+  -o-transform: scale(2.2);
+  transform: scale(2.2); }
+
+.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner {
+  opacity: 1;
+  -webkit-transform: none;
+  -moz-transform: none;
+  -ms-transform: none;
+  -o-transform: none;
+  transform: none; }
+
+/*************************************
+ * CONTRACT
+ */
+.ladda-button[data-style=contract] {
+  overflow: hidden;
+  width: 100px; }
+
+.ladda-button[data-style=contract] .ladda-spinner {
+  left: 50%;
+  margin-left: -16px; }
+
+.ladda-button[data-style=contract][data-loading] {
+  border-radius: 50%;
+  width: 52px; }
+
+.ladda-button[data-style=contract][data-loading] .ladda-label {
+  opacity: 0; }
+
+.ladda-button[data-style=contract][data-loading] .ladda-spinner {
+  opacity: 1; }
+
+/*************************************
+ * OVERLAY
+ */
+.ladda-button[data-style=contract-overlay] {
+  overflow: hidden;
+  width: 100px;
+  box-shadow: 0px 0px 0px 3000px rgba(0, 0, 0, 0); }
+
+.ladda-button[data-style=contract-overlay] .ladda-spinner {
+  left: 50%;
+  margin-left: -16px; }
+
+.ladda-button[data-style=contract-overlay][data-loading] {
+  border-radius: 50%;
+  width: 52px;
+  /*outline: 10000px solid rgba( 0, 0, 0, 0.5 );*/
+  box-shadow: 0px 0px 0px 3000px rgba(0, 0, 0, 0.8); }
+
+.ladda-button[data-style=contract-overlay][data-loading] .ladda-label {
+  opacity: 0; }
+
+.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner {
+  opacity: 1; }

public/index.html

@@ -5,6 +5,7 @@
   <title>Anrop</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
+  <link href="css/ladda-themeless.css" rel="stylesheet">
   <link href="css/styles.css" rel="stylesheet">
 
   <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->

public/js/app.js

@@ -18,6 +18,9 @@ require.config({
     'bootstrap': {
       deps: ['jquery']
     },
+    'ladda': {
+      deps: ['bootstrap']
+    },
     'marionette': {
       deps: ['backbone'],
       exports: 'Marionette'

public/js/app/views/missions/form.js

@@ -7,6 +7,7 @@ define(function (require) {
       Backbone            = require('backbone'),
       Marionette          = require('marionette'),
       FormView            = require('marionette-formview'),
+      Ladda               = require('ladda'),
       IframeTransport     = require('jquery.iframe-transport'),
       Mission             = require('app/models/mission'),
       tpl                 = require('text!tpl/missions/form.html');
@@ -18,21 +19,35 @@ define(function (require) {
       this.missions = options.missions;
       this.model = new Mission();
       this.bind("ok", this.submit);
+      this.bind('shown', this.shown);
+    },
+
+    shown: function (modal) {
+      var $okBtn = modal.$el.find('.btn.ok');
+      $okBtn.addClass('ladda-button').attr('data-style', 'expand-left');
+
+      this.laddaBtn = Ladda.create($okBtn.get(0));
     },
 
     submit: function (modal) {
       var self = this;
+      var $form = $('form');
 
       modal.preventClose();
 
-      var $form = $("form");
+      $form.find('.form-group').removeClass('has-error');
+      $form.find('.help-block').text('');
+
+      this.laddaBtn.start();
+      modal.$el.find('.btn.cancel').addClass('disabled');
+
       $.ajax("/api/missions", {
         files: $form.find(":file"),
         iframe: true
       }).complete(function(data) {
-        modal.close();
         self.missions.fetch({success : function () {
-          Backbone.history.navigate('#missions', true);
+          self.laddaBtn.stop();
+          modal.close();
         }});
       });
     },

public/js/app/views/missions/list.js

@@ -24,7 +24,7 @@ define(function (require) {
     upload: function (event) {
       event.preventDefault();
       var view = new FormView({missions: this.collection});
-      new Backbone.BootstrapModal({ content: view }).open()
+      new Backbone.BootstrapModal({ content: view, animate: true }).open()
     },
   });
 });

public/js/app/views/mods/form.js

@@ -7,6 +7,7 @@ define(function (require) {
       Backbone            = require('backbone'),
       Marionette          = require('marionette'),
       FormView            = require('marionette-formview'),
+      Ladda               = require('ladda'),
       Mod                 = require('app/models/mod'),
       tpl                 = require('text!tpl/mods/form.html');
 
@@ -17,6 +18,14 @@ define(function (require) {
       this.mods = options.mods;
       this.model = new Mod();
       this.bind('ok', this.submit);
+      this.bind('shown', this.shown);
+    },
+
+    shown: function (modal) {
+      var $okBtn = modal.$el.find('.btn.ok');
+      $okBtn.addClass('ladda-button').attr('data-style', 'expand-left');
+
+      this.laddaBtn = Ladda.create($okBtn.get(0));
     },
 
     submit: function (modal) {
@@ -28,17 +37,23 @@ define(function (require) {
       $form.find('.form-group').removeClass('has-error');
       $form.find('.help-block').text('');
 
+      this.laddaBtn.start();
+      modal.$el.find('.btn.cancel').addClass('disabled');
+
       this.model.save({ name: $form.find('.mod').val() }, {
         success: function () {
           self.mods.fetch({
             success : function () {
+              self.laddaBtn.stop();
               modal.close();
             }
           });
         },
         error: function () {
+          self.laddaBtn.stop();
           $form.find('.form-group').addClass('has-error');
           $form.find('.help-block').text('Problem downloading mod');
+          modal.$el.find('.btn.cancel').removeClass('disabled');
         }
       });
     },

public/js/app/views/mods/list.js

@@ -32,7 +32,7 @@ define(function (require) {
     download: function (event) {
       event.preventDefault();
       var view = new FormView({mods: this.collection});
-      new Backbone.BootstrapModal({ content: view }).open();
+      new Backbone.BootstrapModal({ content: view, animate: true }).open();
     },
   });
 });

public/js/lib/ladda.js

@@ -0,0 +1,157 @@
+(function(root, factory) {
+    if (typeof exports === "object") {
+        module.exports = factory();
+    } else if (typeof define === "function" && define.amd) {
+        define([ "spin" ], factory);
+    } else {
+        root.Ladda = factory(root.Spinner);
+    }
+})(this, function(Spinner) {
+    "use strict";
+    var ALL_INSTANCES = [];
+    function create(button) {
+        if (typeof button === "undefined") {
+            console.warn("Ladda button target must be defined.");
+            return;
+        }
+        if (!button.querySelector(".ladda-label")) {
+            button.innerHTML = '<span class="ladda-label">' + button.innerHTML + "</span>";
+        }
+        var spinner = createSpinner(button);
+        var spinnerWrapper = document.createElement("span");
+        spinnerWrapper.className = "ladda-spinner";
+        button.appendChild(spinnerWrapper);
+        var timer;
+        var instance = {
+            start: function() {
+                button.setAttribute("disabled", "");
+                button.setAttribute("data-loading", "");
+                clearTimeout(timer);
+                spinner.spin(spinnerWrapper);
+                this.setProgress(0);
+                return this;
+            },
+            startAfter: function(delay) {
+                clearTimeout(timer);
+                timer = setTimeout(function() {
+                    instance.start();
+                }, delay);
+                return this;
+            },
+            stop: function() {
+                button.removeAttribute("disabled");
+                button.removeAttribute("data-loading");
+                clearTimeout(timer);
+                timer = setTimeout(function() {
+                    spinner.stop();
+                }, 1e3);
+                return this;
+            },
+            toggle: function() {
+                if (this.isLoading()) {
+                    this.stop();
+                } else {
+                    this.start();
+                }
+                return this;
+            },
+            setProgress: function(progress) {
+                progress = Math.max(Math.min(progress, 1), 0);
+                var progressElement = button.querySelector(".ladda-progress");
+                if (progress === 0 && progressElement && progressElement.parentNode) {
+                    progressElement.parentNode.removeChild(progressElement);
+                } else {
+                    if (!progressElement) {
+                        progressElement = document.createElement("div");
+                        progressElement.className = "ladda-progress";
+                        button.appendChild(progressElement);
+                    }
+                    progressElement.style.width = (progress || 0) * button.offsetWidth + "px";
+                }
+            },
+            enable: function() {
+                this.stop();
+                return this;
+            },
+            disable: function() {
+                this.stop();
+                button.setAttribute("disabled", "");
+                return this;
+            },
+            isLoading: function() {
+                return button.hasAttribute("data-loading");
+            }
+        };
+        ALL_INSTANCES.push(instance);
+        return instance;
+    }
+    function bind(target, options) {
+        options = options || {};
+        var targets = [];
+        if (typeof target === "string") {
+            targets = toArray(document.querySelectorAll(target));
+        } else if (typeof target === "object" && typeof target.nodeName === "string") {
+            targets = [ target ];
+        }
+        for (var i = 0, len = targets.length; i < len; i++) {
+            (function() {
+                var element = targets[i];
+                if (typeof element.addEventListener === "function") {
+                    var instance = create(element);
+                    var timeout = -1;
+                    element.addEventListener("click", function() {
+                        instance.startAfter(1);
+                        if (typeof options.timeout === "number") {
+                            clearTimeout(timeout);
+                            timeout = setTimeout(instance.stop, options.timeout);
+                        }
+                        if (typeof options.callback === "function") {
+                            options.callback.apply(null, [ instance ]);
+                        }
+                    }, false);
+                }
+            })();
+        }
+    }
+    function stopAll() {
+        for (var i = 0, len = ALL_INSTANCES.length; i < len; i++) {
+            ALL_INSTANCES[i].stop();
+        }
+    }
+    function createSpinner(button) {
+        var height = button.offsetHeight, spinnerColor;
+        if (height > 32) {
+            height *= .8;
+        }
+        if (button.hasAttribute("data-spinner-size")) {
+            height = parseInt(button.getAttribute("data-spinner-size"), 10);
+        }
+        if (button.hasAttribute("data-spinner-color")) {
+            spinnerColor = button.getAttribute("data-spinner-color");
+        }
+        var lines = 12, radius = height * .2, length = radius * .6, width = radius < 7 ? 2 : 3;
+        return new Spinner({
+            color: spinnerColor || "#fff",
+            lines: lines,
+            radius: radius,
+            length: length,
+            width: width,
+            zIndex: "auto",
+            top: "auto",
+            left: "auto",
+            className: ""
+        });
+    }
+    function toArray(nodes) {
+        var a = [];
+        for (var i = 0; i < nodes.length; i++) {
+            a.push(nodes[i]);
+        }
+        return a;
+    }
+    return {
+        bind: bind,
+        create: create,
+        stopAll: stopAll
+    };
+});

public/js/lib/spin.js

@@ -0,0 +1,218 @@
+(function(root, factory) {
+    if (typeof exports == "object") module.exports = factory(); else if (typeof define == "function" && define.amd) define(factory); else root.Spinner = factory();
+})(this, function() {
+    "use strict";
+    var prefixes = [ "webkit", "Moz", "ms", "O" ], animations = {}, useCssAnimations;
+    function createEl(tag, prop) {
+        var el = document.createElement(tag || "div"), n;
+        for (n in prop) el[n] = prop[n];
+        return el;
+    }
+    function ins(parent) {
+        for (var i = 1, n = arguments.length; i < n; i++) parent.appendChild(arguments[i]);
+        return parent;
+    }
+    var sheet = function() {
+        var el = createEl("style", {
+            type: "text/css"
+        });
+        ins(document.getElementsByTagName("head")[0], el);
+        return el.sheet || el.styleSheet;
+    }();
+    function addAnimation(alpha, trail, i, lines) {
+        var name = [ "opacity", trail, ~~(alpha * 100), i, lines ].join("-"), start = .01 + i / lines * 100, z = Math.max(1 - (1 - alpha) / trail * (100 - start), alpha), prefix = useCssAnimations.substring(0, useCssAnimations.indexOf("Animation")).toLowerCase(), pre = prefix && "-" + prefix + "-" || "";
+        if (!animations[name]) {
+            sheet.insertRule("@" + pre + "keyframes " + name + "{" + "0%{opacity:" + z + "}" + start + "%{opacity:" + alpha + "}" + (start + .01) + "%{opacity:1}" + (start + trail) % 100 + "%{opacity:" + alpha + "}" + "100%{opacity:" + z + "}" + "}", sheet.cssRules.length);
+            animations[name] = 1;
+        }
+        return name;
+    }
+    function vendor(el, prop) {
+        var s = el.style, pp, i;
+        if (s[prop] !== undefined) return prop;
+        prop = prop.charAt(0).toUpperCase() + prop.slice(1);
+        for (i = 0; i < prefixes.length; i++) {
+            pp = prefixes[i] + prop;
+            if (s[pp] !== undefined) return pp;
+        }
+    }
+    function css(el, prop) {
+        for (var n in prop) el.style[vendor(el, n) || n] = prop[n];
+        return el;
+    }
+    function merge(obj) {
+        for (var i = 1; i < arguments.length; i++) {
+            var def = arguments[i];
+            for (var n in def) if (obj[n] === undefined) obj[n] = def[n];
+        }
+        return obj;
+    }
+    function pos(el) {
+        var o = {
+            x: el.offsetLeft,
+            y: el.offsetTop
+        };
+        while (el = el.offsetParent) o.x += el.offsetLeft, o.y += el.offsetTop;
+        return o;
+    }
+    var defaults = {
+        lines: 12,
+        length: 7,
+        width: 5,
+        radius: 10,
+        rotate: 0,
+        corners: 1,
+        color: "#000",
+        direction: 1,
+        speed: 1,
+        trail: 100,
+        opacity: 1 / 4,
+        fps: 20,
+        zIndex: 2e9,
+        className: "spinner",
+        top: "auto",
+        left: "auto",
+        position: "relative"
+    };
+    function Spinner(o) {
+        if (typeof this == "undefined") return new Spinner(o);
+        this.opts = merge(o || {}, Spinner.defaults, defaults);
+    }
+    Spinner.defaults = {};
+    merge(Spinner.prototype, {
+        spin: function(target) {
+            this.stop();
+            var self = this, o = self.opts, el = self.el = css(createEl(0, {
+                className: o.className
+            }), {
+                position: o.position,
+                width: 0,
+                zIndex: o.zIndex
+            }), mid = o.radius + o.length + o.width, ep, tp;
+            if (target) {
+                target.insertBefore(el, target.firstChild || null);
+                tp = pos(target);
+                ep = pos(el);
+                css(el, {
+                    left: (o.left == "auto" ? tp.x - ep.x + (target.offsetWidth >> 1) : parseInt(o.left, 10) + mid) + "px",
+                    top: (o.top == "auto" ? tp.y - ep.y + (target.offsetHeight >> 1) : parseInt(o.top, 10) + mid) + "px"
+                });
+            }
+            el.setAttribute("role", "progressbar");
+            self.lines(el, self.opts);
+            if (!useCssAnimations) {
+                var i = 0, start = (o.lines - 1) * (1 - o.direction) / 2, alpha, fps = o.fps, f = fps / o.speed, ostep = (1 - o.opacity) / (f * o.trail / 100), astep = f / o.lines;
+                (function anim() {
+                    i++;
+                    for (var j = 0; j < o.lines; j++) {
+                        alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity);
+                        self.opacity(el, j * o.direction + start, alpha, o);
+                    }
+                    self.timeout = self.el && setTimeout(anim, ~~(1e3 / fps));
+                })();
+            }
+            return self;
+        },
+        stop: function() {
+            var el = this.el;
+            if (el) {
+                clearTimeout(this.timeout);
+                if (el.parentNode) el.parentNode.removeChild(el);
+                this.el = undefined;
+            }
+            return this;
+        },
+        lines: function(el, o) {
+            var i = 0, start = (o.lines - 1) * (1 - o.direction) / 2, seg;
+            function fill(color, shadow) {
+                return css(createEl(), {
+                    position: "absolute",
+                    width: o.length + o.width + "px",
+                    height: o.width + "px",
+                    background: color,
+                    boxShadow: shadow,
+                    transformOrigin: "left",
+                    transform: "rotate(" + ~~(360 / o.lines * i + o.rotate) + "deg) translate(" + o.radius + "px" + ",0)",
+                    borderRadius: (o.corners * o.width >> 1) + "px"
+                });
+            }
+            for (;i < o.lines; i++) {
+                seg = css(createEl(), {
+                    position: "absolute",
+                    top: 1 + ~(o.width / 2) + "px",
+                    transform: o.hwaccel ? "translate3d(0,0,0)" : "",
+                    opacity: o.opacity,
+                    animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + " " + 1 / o.speed + "s linear infinite"
+                });
+                if (o.shadow) ins(seg, css(fill("#000", "0 0 4px " + "#000"), {
+                    top: 2 + "px"
+                }));
+                ins(el, ins(seg, fill(o.color, "0 0 1px rgba(0,0,0,.1)")));
+            }
+            return el;
+        },
+        opacity: function(el, i, val) {
+            if (i < el.childNodes.length) el.childNodes[i].style.opacity = val;
+        }
+    });
+    function initVML() {
+        function vml(tag, attr) {
+            return createEl("<" + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr);
+        }
+        sheet.addRule(".spin-vml", "behavior:url(#default#VML)");
+        Spinner.prototype.lines = function(el, o) {
+            var r = o.length + o.width, s = 2 * r;
+            function grp() {
+                return css(vml("group", {
+                    coordsize: s + " " + s,
+                    coordorigin: -r + " " + -r
+                }), {
+                    width: s,
+                    height: s
+                });
+            }
+            var margin = -(o.width + o.length) * 2 + "px", g = css(grp(), {
+                position: "absolute",
+                top: margin,
+                left: margin
+            }), i;
+            function seg(i, dx, filter) {
+                ins(g, ins(css(grp(), {
+                    rotation: 360 / o.lines * i + "deg",
+                    left: ~~dx
+                }), ins(css(vml("roundrect", {
+                    arcsize: o.corners
+                }), {
+                    width: r,
+                    height: o.width,
+                    left: o.radius,
+                    top: -o.width >> 1,
+                    filter: filter
+                }), vml("fill", {
+                    color: o.color,
+                    opacity: o.opacity
+                }), vml("stroke", {
+                    opacity: 0
+                }))));
+            }
+            if (o.shadow) for (i = 1; i <= o.lines; i++) seg(i, -2, "progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");
+            for (i = 1; i <= o.lines; i++) seg(i);
+            return ins(el, g);
+        };
+        Spinner.prototype.opacity = function(el, i, val, o) {
+            var c = el.firstChild;
+            o = o.shadow && o.lines || 0;
+            if (c && i + o < c.childNodes.length) {
+                c = c.childNodes[i + o];
+                c = c && c.firstChild;
+                c = c && c.firstChild;
+                if (c) c.opacity = val;
+            }
+        };
+    }
+    var probe = css(createEl("group"), {
+        behavior: "url(#default#VML)"
+    });
+    if (!vendor(probe, "transform") && probe.adj) initVML(); else useCssAnimations = vendor(probe, "animation");
+    return Spinner;
+});