백기선 2015-03-12
Merge branch 'enhance/change-spinner' into 'next'
from pull-request 1492

* refs/heads/enhance/change-spinner:
  loading-ui: replace spinner ui to progressbar
  lib: add npregress js library

Reviewed-by: 백기선 
@c6e41f6c8a7a9edc0c0647dfcc6d768bb21ec7cd
app/views/common/scripts.scala.html
--- app/views/common/scripts.scala.html
+++ app/views/common/scripts.scala.html
@@ -49,12 +49,6 @@
 </script>
 @**<!-- //yobi.ui.Toast -->**@
 
-@**<!-- //yobi.ui.Spinner -->**@
-<div id="yobiSpinner" class="yobiSpinner">
-    <div class="spinContainer"></div>
-</div>
-@**<!-- //yobi.ui.Spinner -->**@
-
 @if(UserApp.currentUser.isAnonymous){
 @common.loginDialog()
 }
@@ -73,7 +67,6 @@
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/rgbcolor.js")"></script>
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/humanize.js")"></script>
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/validate.js")"></script>
-<script type="text/javascript" src="@routes.Assets.at("javascripts/lib/spin.js")"></script>
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/xss.js")"></script>
 <script type="text/javascript" src="@routes.Assets.at("javascripts/common/yobi.Attachments.js")"></script>
 <script type="text/javascript" src="@routes.Assets.at("javascripts/common/yobi.Files.js")"></script>
@@ -86,7 +79,6 @@
 <script type="text/javascript" src="@routes.Assets.at("javascripts/common/yobi.ui.Dialog.js")"></script>
 <script type="text/javascript" src="@routes.Assets.at("javascripts/common/yobi.ui.Toast.js")"></script>
 <script type="text/javascript" src="@routes.Assets.at("javascripts/common/yobi.ui.Tabs.js")"></script>
-<script type="text/javascript" src="@routes.Assets.at("javascripts/common/yobi.ui.Spinner.js")"></script>
 <script type="text/javascript" src="@routes.Assets.at("javascripts/common/yobi.OriginalMessage.js")"></script>
 
 <script type="text/javascript">
app/views/git/clone.scala.html
--- app/views/git/clone.scala.html
+++ app/views/git/clone.scala.html
@@ -42,8 +42,7 @@
 </div>
 <script type="text/javascript">
     $(function(){
-        yobi.ui.Spinner.show();
-
+        NProgress.start();
         setTimeout(function(){
             var cloneUrl = "@routes.PullRequestApp.doClone(project.originalProject.owner, project.originalProject.name)";
             var cloneParam = {owner:"@project.owner", name:"@project.name", projectScope:"@project.projectScope.name"};
app/views/git/list.scala.html
--- app/views/git/list.scala.html
+++ app/views/git/list.scala.html
@@ -55,10 +55,10 @@
         // show spinners
         $(document).on({
             "pjax:send": function(){
-                yobi.ui.Spinner.show();
+                NProgress.start();
             },
             "pjax:complete": function(){
-                yobi.ui.Spinner.hide();
+                NProgress.done();
             }
         });
     });
app/views/layout.scala.html
--- app/views/layout.scala.html
+++ app/views/layout.scala.html
@@ -33,7 +33,12 @@
 <link rel="stylesheet" type="text/css" media="all" href="@routes.Assets.at("javascripts/lib/select2/select2.css")"/>
 <link rel="stylesheet" type="text/css" media="all" href="@routes.Assets.at("javascripts/lib/pikaday/pikaday.css")" />
 <link rel="stylesheet" type="text/css" media="all" href="@routes.Assets.at("stylesheets/yobi.css")">
+<link rel='stylesheet' href="@routes.Assets.at("javascripts/lib/nprogress/nprogress.css")"/>
 
+<script type="text/javascript" src="@routes.Assets.at("javascripts/lib/nprogress/nprogress.js")"></script>
+<script type="text/javascript">
+    NProgress.configure({ minimum: 0.6 });
+</script>
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/jquery/jquery-1.9.0.js")"></script>
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/jquery/jquery.browser.js")"></script>
 <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/jquery/jquery.pjax.js")"></script>
public/javascripts/common/yobi.CommentForm.js
--- public/javascripts/common/yobi.CommentForm.js
+++ public/javascripts/common/yobi.CommentForm.js
@@ -67,7 +67,7 @@
         }
 
         elements.commentForm.data("onsubmit", true);
-        yobi.ui.Spinner.show();
+        NProgress.start();
         return true;
     }
 
@@ -98,7 +98,7 @@
      */
     function onKeydownWindow(evt){
         if (isEscapeKeyPressed(evt) && isOnSubmit()){
-            yobi.ui.Spinner.hide();
+            NProgress.done();
             elements.commentForm.data("onsubmit", false);
         }
     }
 
public/javascripts/common/yobi.ui.Spinner.js (deleted)
--- public/javascripts/common/yobi.ui.Spinner.js
@@ -1,125 +0,0 @@
-/**
- * Yobi, Project Hosting SW
- *
- * Copyright 2014 NAVER Corp.
- * http://yobi.io
- *
- * @author Jihan Kim
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/**
- * Method:
- * yobi.ui.Spinner.show()
- * yobi.ui.Spinner.hide()
- *
- * @requires spin.js (http://fgnass.github.io/spin.js)
- */
-(function(ns){
-
-    var oNS = $yobi.createNamespace(ns);
-    oNS.container[oNS.name] = (function(htOptions){
-
-        var htVar = {};
-        var htElement = {};
-
-        /**
-         * Initialize
-         * @param htOptions
-         * @private
-         */
-        function _init(htOptions){
-            _initVar(htOptions);
-            _initElement();
-        }
-
-        /**
-         * Initialize Variables
-         * @param htOptions
-         * @private
-         */
-        function _initVar(htOptions){
-            htVar.htOptions = $.extend({  // -- Default Options
-                "lines"    : 11, // The number of lines to draw
-                "length"   : 26, // The length of each line
-                "width"    : 7,  // The line thickness
-                "radius"   : 19, // The radius of the inner circle
-                "corners"  : 1,  // Corner roundness (0..1)
-                "rotate"   : 0,  // The rotation offset
-                "direction": -1, // 1: clockwise, -1: counterclockwise
-                "color"    : "#bbb", // #rgb or #rrggbb or array of colors
-                "speed"    : 1.5,    // Rounds per second
-                "trail"    : 66,     // Afterglow percentage
-                "shadow"   : false,  // Whether to render a shadow
-                "hwaccel"  : true,   // Whether to use hardware acceleration
-                "className": "spinner", // The CSS class to assign to the spinner
-                "zIndex"   : 2e9,    // The z-index (defaults to 2000000000)
-                "top"      : "auto", // Top position relative to parent in px
-                "left"     : "auto"  // Left position relative to parent in px
-            }, htOptions);
-
-            htVar.oSpinner = new Spinner(htVar.htOptions);
-        }
-
-        /**
-         * Initialize Elements
-         * @private
-         */
-        function _initElement(){
-            htElement.welWrapper = $("#yobiSpinner");
-            htElement.welContainer = htElement.welWrapper.find(".spinContainer");
-        }
-
-        /**
-         * Show spinner
-         * @private
-         */
-        function _showSpinner(htOptions){
-            var bUseDimmer = (htOptions && typeof htOptions.bUseDimmer !== "undefined") ?
-                              htOptions.bUseDimmer : false;
-            var sBackground = bUseDimmer ? "rgba(0,0,0,0.4)": "transparent";
-
-            htVar.oSpinner.spin();
-            htElement.welContainer.append(htVar.oSpinner.el);
-
-            htElement.welWrapper.css("background", sBackground);
-            htElement.welWrapper.show();
-        }
-
-        /**
-         * Hide spinner
-         * @private
-         */
-        function _hideSpinner(){
-            htElement.welWrapper.hide();
-            htVar.oSpinner.stop();
-        }
-
-        _init(htOptions || {});
-
-        // public interfaces
-        return {
-            "show": _showSpinner,
-            "hide": _hideSpinner
-        };
-    })();
-
-})("yobi.ui.Spinner");
-
-$(document).ready(function(){
-    if(navigator.userAgent.indexOf("Safari") > -1){
-        $(window).on("beforeunload", function(){
-            yobi.ui.Spinner.hide();
-        });
-    }
-});
 
public/javascripts/lib/nprogress/nprogress.css (added)
+++ public/javascripts/lib/nprogress/nprogress.css
@@ -0,0 +1,70 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #27abe1;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0px;
+  left: 0;
+
+  width: 100%;
+  height: 3px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 3px;
+  height: 100%;
+  box-shadow: 0 0 10px #fe6431, 0 0 5px #f3f3f3;
+  opacity: 1.0;
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 12px;
+  left: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 15px;
+  height: 15px;
+  box-sizing: border-box;
+
+  border: solid 3px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+          animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 
public/javascripts/lib/nprogress/nprogress.js (added)
+++ public/javascripts/lib/nprogress/nprogress.js
@@ -0,0 +1,476 @@
+/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
+ * @license MIT */
+
+;(function(root, factory) {
+
+  if (typeof define === 'function' && define.amd) {
+    define(factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory();
+  } else {
+    root.NProgress = factory();
+  }
+
+})(this, function() {
+  var NProgress = {};
+
+  NProgress.version = '0.1.6';
+
+  var Settings = NProgress.settings = {
+    minimum: 0.08,
+    easing: 'ease',
+    positionUsing: '',
+    speed: 200,
+    trickle: true,
+    trickleRate: 0.02,
+    trickleSpeed: 800,
+    showSpinner: true,
+    barSelector: '[role="bar"]',
+    spinnerSelector: '[role="spinner"]',
+    parent: 'body',
+    template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
+  };
+
+  /**
+   * Updates configuration.
+   *
+   *     NProgress.configure({
+   *       minimum: 0.1
+   *     });
+   */
+  NProgress.configure = function(options) {
+    var key, value;
+    for (key in options) {
+      value = options[key];
+      if (value !== undefined && options.hasOwnProperty(key)) Settings[key] = value;
+    }
+
+    return this;
+  };
+
+  /**
+   * Last number.
+   */
+
+  NProgress.status = null;
+
+  /**
+   * Sets the progress bar status, where `n` is a number from `0.0` to `1.0`.
+   *
+   *     NProgress.set(0.4);
+   *     NProgress.set(1.0);
+   */
+
+  NProgress.set = function(n) {
+    var started = NProgress.isStarted();
+
+    n = clamp(n, Settings.minimum, 1);
+    NProgress.status = (n === 1 ? null : n);
+
+    var progress = NProgress.render(!started),
+        bar      = progress.querySelector(Settings.barSelector),
+        speed    = Settings.speed,
+        ease     = Settings.easing;
+
+    progress.offsetWidth; /* Repaint */
+
+    queue(function(next) {
+      // Set positionUsing if it hasn't already been set
+      if (Settings.positionUsing === '') Settings.positionUsing = NProgress.getPositioningCSS();
+
+      // Add transition
+      css(bar, barPositionCSS(n, speed, ease));
+
+      if (n === 1) {
+        // Fade out
+        css(progress, { 
+          transition: 'none', 
+          opacity: 1 
+        });
+        progress.offsetWidth; /* Repaint */
+
+        setTimeout(function() {
+          css(progress, { 
+            transition: 'all ' + speed + 'ms linear', 
+            opacity: 0 
+          });
+          setTimeout(function() {
+            NProgress.remove();
+            next();
+          }, speed);
+        }, speed);
+      } else {
+        setTimeout(next, speed);
+      }
+    });
+
+    return this;
+  };
+
+  NProgress.isStarted = function() {
+    return typeof NProgress.status === 'number';
+  };
+
+  /**
+   * Shows the progress bar.
+   * This is the same as setting the status to 0%, except that it doesn't go backwards.
+   *
+   *     NProgress.start();
+   *
+   */
+  NProgress.start = function() {
+    if (!NProgress.status) NProgress.set(0);
+
+    var work = function() {
+      setTimeout(function() {
+        if (!NProgress.status) return;
+        NProgress.trickle();
+        work();
+      }, Settings.trickleSpeed);
+    };
+
+    if (Settings.trickle) work();
+
+    return this;
+  };
+
+  /**
+   * Hides the progress bar.
+   * This is the *sort of* the same as setting the status to 100%, with the
+   * difference being `done()` makes some placebo effect of some realistic motion.
+   *
+   *     NProgress.done();
+   *
+   * If `true` is passed, it will show the progress bar even if its hidden.
+   *
+   *     NProgress.done(true);
+   */
+
+  NProgress.done = function(force) {
+    if (!force && !NProgress.status) return this;
+
+    return NProgress.inc(0.3 + 0.5 * Math.random()).set(1);
+  };
+
+  /**
+   * Increments by a random amount.
+   */
+
+  NProgress.inc = function(amount) {
+    var n = NProgress.status;
+
+    if (!n) {
+      return NProgress.start();
+    } else {
+      if (typeof amount !== 'number') {
+        amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95);
+      }
+
+      n = clamp(n + amount, 0, 0.994);
+      return NProgress.set(n);
+    }
+  };
+
+  NProgress.trickle = function() {
+    return NProgress.inc(Math.random() * Settings.trickleRate);
+  };
+
+  /**
+   * Waits for all supplied jQuery promises and
+   * increases the progress as the promises resolve.
+   * 
+   * @param $promise jQUery Promise
+   */
+  (function() {
+    var initial = 0, current = 0;
+    
+    NProgress.promise = function($promise) {
+      if (!$promise || $promise.state() == "resolved") {
+        return this;
+      }
+      
+      if (current == 0) {
+        NProgress.start();
+      }
+      
+      initial++;
+      current++;
+      
+      $promise.always(function() {
+        current--;
+        if (current == 0) {
+            initial = 0;
+            NProgress.done();
+        } else {
+            NProgress.set((initial - current) / initial);
+        }
+      });
+      
+      return this;
+    };
+    
+  })();
+
+  /**
+   * (Internal) renders the progress bar markup based on the `template`
+   * setting.
+   */
+
+  NProgress.render = function(fromStart) {
+    if (NProgress.isRendered()) return document.getElementById('nprogress');
+
+    addClass(document.documentElement, 'nprogress-busy');
+    
+    var progress = document.createElement('div');
+    progress.id = 'nprogress';
+    progress.innerHTML = Settings.template;
+
+    var bar      = progress.querySelector(Settings.barSelector),
+        perc     = fromStart ? '-100' : toBarPerc(NProgress.status || 0),
+        parent   = document.querySelector(Settings.parent),
+        spinner;
+    
+    css(bar, {
+      transition: 'all 0 linear',
+      transform: 'translate3d(' + perc + '%,0,0)'
+    });
+
+    if (!Settings.showSpinner) {
+      spinner = progress.querySelector(Settings.spinnerSelector);
+      spinner && removeElement(spinner);
+    }
+
+    if (parent != document.body) {
+      addClass(parent, 'nprogress-custom-parent');
+    }
+
+    parent.appendChild(progress);
+    return progress;
+  };
+
+  /**
+   * Removes the element. Opposite of render().
+   */
+
+  NProgress.remove = function() {
+    removeClass(document.documentElement, 'nprogress-busy');
+    removeClass(document.querySelector(Settings.parent), 'nprogress-custom-parent')
+    var progress = document.getElementById('nprogress');
+    progress && removeElement(progress);
+  };
+
+  /**
+   * Checks if the progress bar is rendered.
+   */
+
+  NProgress.isRendered = function() {
+    return !!document.getElementById('nprogress');
+  };
+
+  /**
+   * Determine which positioning CSS rule to use.
+   */
+
+  NProgress.getPositioningCSS = function() {
+    // Sniff on document.body.style
+    var bodyStyle = document.body.style;
+
+    // Sniff prefixes
+    var vendorPrefix = ('WebkitTransform' in bodyStyle) ? 'Webkit' :
+                       ('MozTransform' in bodyStyle) ? 'Moz' :
+                       ('msTransform' in bodyStyle) ? 'ms' :
+                       ('OTransform' in bodyStyle) ? 'O' : '';
+
+    if (vendorPrefix + 'Perspective' in bodyStyle) {
+      // Modern browsers with 3D support, e.g. Webkit, IE10
+      return 'translate3d';
+    } else if (vendorPrefix + 'Transform' in bodyStyle) {
+      // Browsers without 3D support, e.g. IE9
+      return 'translate';
+    } else {
+      // Browsers without translate() support, e.g. IE7-8
+      return 'margin';
+    }
+  };
+
+  /**
+   * Helpers
+   */
+
+  function clamp(n, min, max) {
+    if (n < min) return min;
+    if (n > max) return max;
+    return n;
+  }
+
+  /**
+   * (Internal) converts a percentage (`0..1`) to a bar translateX
+   * percentage (`-100%..0%`).
+   */
+
+  function toBarPerc(n) {
+    return (-1 + n) * 100;
+  }
+
+
+  /**
+   * (Internal) returns the correct CSS for changing the bar's
+   * position given an n percentage, and speed and ease from Settings
+   */
+
+  function barPositionCSS(n, speed, ease) {
+    var barCSS;
+
+    if (Settings.positionUsing === 'translate3d') {
+      barCSS = { transform: 'translate3d('+toBarPerc(n)+'%,0,0)' };
+    } else if (Settings.positionUsing === 'translate') {
+      barCSS = { transform: 'translate('+toBarPerc(n)+'%,0)' };
+    } else {
+      barCSS = { 'margin-left': toBarPerc(n)+'%' };
+    }
+
+    barCSS.transition = 'all '+speed+'ms '+ease;
+
+    return barCSS;
+  }
+
+  /**
+   * (Internal) Queues a function to be executed.
+   */
+
+  var queue = (function() {
+    var pending = [];
+    
+    function next() {
+      var fn = pending.shift();
+      if (fn) {
+        fn(next);
+      }
+    }
+
+    return function(fn) {
+      pending.push(fn);
+      if (pending.length == 1) next();
+    };
+  })();
+
+  /**
+   * (Internal) Applies css properties to an element, similar to the jQuery 
+   * css method.
+   *
+   * While this helper does assist with vendor prefixed property names, it 
+   * does not perform any manipulation of values prior to setting styles.
+   */
+
+  var css = (function() {
+    var cssPrefixes = [ 'Webkit', 'O', 'Moz', 'ms' ],
+        cssProps    = {};
+
+    function camelCase(string) {
+      return string.replace(/^-ms-/, 'ms-').replace(/-([\da-z])/gi, function(match, letter) {
+        return letter.toUpperCase();
+      });
+    }
+
+    function getVendorProp(name) {
+      var style = document.body.style;
+      if (name in style) return name;
+
+      var i = cssPrefixes.length,
+          capName = name.charAt(0).toUpperCase() + name.slice(1),
+          vendorName;
+      while (i--) {
+        vendorName = cssPrefixes[i] + capName;
+        if (vendorName in style) return vendorName;
+      }
+
+      return name;
+    }
+
+    function getStyleProp(name) {
+      name = camelCase(name);
+      return cssProps[name] || (cssProps[name] = getVendorProp(name));
+    }
+
+    function applyCss(element, prop, value) {
+      prop = getStyleProp(prop);
+      element.style[prop] = value;
+    }
+
+    return function(element, properties) {
+      var args = arguments,
+          prop, 
+          value;
+
+      if (args.length == 2) {
+        for (prop in properties) {
+          value = properties[prop];
+          if (value !== undefined && properties.hasOwnProperty(prop)) applyCss(element, prop, value);
+        }
+      } else {
+        applyCss(element, args[1], args[2]);
+      }
+    }
+  })();
+
+  /**
+   * (Internal) Determines if an element or space separated list of class names contains a class name.
+   */
+
+  function hasClass(element, name) {
+    var list = typeof element == 'string' ? element : classList(element);
+    return list.indexOf(' ' + name + ' ') >= 0;
+  }
+
+  /**
+   * (Internal) Adds a class to an element.
+   */
+
+  function addClass(element, name) {
+    var oldList = classList(element),
+        newList = oldList + name;
+
+    if (hasClass(oldList, name)) return; 
+
+    // Trim the opening space.
+    element.className = newList.substring(1);
+  }
+
+  /**
+   * (Internal) Removes a class from an element.
+   */
+
+  function removeClass(element, name) {
+    var oldList = classList(element),
+        newList;
+
+    if (!hasClass(element, name)) return;
+
+    // Replace the class name.
+    newList = oldList.replace(' ' + name + ' ', ' ');
+
+    // Trim the opening and closing spaces.
+    element.className = newList.substring(1, newList.length - 1);
+  }
+
+  /**
+   * (Internal) Gets a space separated list of the class names on the element. 
+   * The list is wrapped with a single space on each end to facilitate finding 
+   * matches within the list.
+   */
+
+  function classList(element) {
+    return (' ' + (element.className || '') + ' ').replace(/\s+/gi, ' ');
+  }
+
+  /**
+   * (Internal) Removes an element from the DOM.
+   */
+
+  function removeElement(element) {
+    element && element.parentNode && element.parentNode.removeChild(element);
+  }
+
+  return NProgress;
+});
+
 
public/javascripts/lib/spin.js (deleted)
--- public/javascripts/lib/spin.js
@@ -1,349 +0,0 @@
-//fgnass.github.com/spin.js#v1.3
-
-/**
- * Copyright (c) 2011-2013 Felix Gnass
- * Licensed under the MIT license
- */
-(function(root, factory) {
-
-  /* CommonJS */
-  if (typeof exports == 'object')  module.exports = factory()
-
-  /* AMD module */
-  else if (typeof define == 'function' && define.amd) define(factory)
-
-  /* Browser global */
-  else root.Spinner = factory()
-}
-(this, function() {
-  "use strict";
-
-  var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */
-    , animations = {} /* Animation rules keyed by their name */
-    , useCssAnimations /* Whether to use CSS animations or setTimeout */
-
-  /**
-   * Utility function to create elements. If no tag name is given,
-   * a DIV is created. Optionally properties can be passed.
-   */
-  function createEl(tag, prop) {
-    var el = document.createElement(tag || 'div')
-      , n
-
-    for(n in prop) el[n] = prop[n]
-    return el
-  }
-
-  /**
-   * Appends children and returns the parent.
-   */
-  function ins(parent /* child1, child2, ...*/) {
-    for (var i=1, n=arguments.length; i<n; i++)
-      parent.appendChild(arguments[i])
-
-    return parent
-  }
-
-  /**
-   * Insert a new stylesheet to hold the @keyframe or VML rules.
-   */
-  var sheet = (function() {
-    var el = createEl('style', {type : 'text/css'})
-    ins(document.getElementsByTagName('head')[0], el)
-    return el.sheet || el.styleSheet
-  }())
-
-  /**
-   * Creates an opacity keyframe animation rule and returns its name.
-   * Since most mobile Webkits have timing issues with animation-delay,
-   * we create separate rules for each line/segment.
-   */
-  function addAnimation(alpha, trail, i, lines) {
-    var name = ['opacity', trail, ~~(alpha*100), i, lines].join('-')
-      , start = 0.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+0.01) + '%{opacity:1}' +
-        (start+trail) % 100 + '%{opacity:' + alpha + '}' +
-        '100%{opacity:' + z + '}' +
-        '}', sheet.cssRules.length)
-
-      animations[name] = 1
-    }
-
-    return name
-  }
-
-  /**
-   * Tries various vendor prefixes and returns the first supported property.
-   */
-  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
-    }
-  }
-
-  /**
-   * Sets multiple style properties at once.
-   */
-  function css(el, prop) {
-    for (var n in prop)
-      el.style[vendor(el, n)||n] = prop[n]
-
-    return el
-  }
-
-  /**
-   * Fills in default values.
-   */
-  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
-  }
-
-  /**
-   * Returns the absolute page-offset of the given element.
-   */
-  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
-  }
-
-  // Built-in defaults
-
-  var defaults = {
-    lines: 12,            // The number of lines to draw
-    length: 7,            // The length of each line
-    width: 5,             // The line thickness
-    radius: 10,           // The radius of the inner circle
-    rotate: 0,            // Rotation offset
-    corners: 1,           // Roundness (0..1)
-    color: '#000',        // #rgb or #rrggbb
-    direction: 1,         // 1: clockwise, -1: counterclockwise
-    speed: 1,             // Rounds per second
-    trail: 100,           // Afterglow percentage
-    opacity: 1/4,         // Opacity of the lines
-    fps: 20,              // Frames per second when using setTimeout()
-    zIndex: 2e9,          // Use a high z-index by default
-    className: 'spinner', // CSS class to assign to the element
-    top: 'auto',          // center vertically
-    left: 'auto',         // center horizontally
-    position: 'relative'  // element position
-  }
-
-  /** The constructor */
-  function Spinner(o) {
-    if (typeof this == 'undefined') return new Spinner(o)
-    this.opts = merge(o || {}, Spinner.defaults, defaults)
-  }
-
-  // Global defaults that override the built-ins:
-  Spinner.defaults = {}
-
-  merge(Spinner.prototype, {
-
-    /**
-     * Adds the spinner to the given target element. If this instance is already
-     * spinning, it is automatically removed from its previous target b calling
-     * stop() internally.
-     */
-    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 // element position
-        , tp // target position
-
-      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) {
-        // No CSS animation support, use setTimeout() instead
-        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, ~~(1000/fps))
-        })()
-      }
-      return self
-    },
-
-    /**
-     * Stops and removes the Spinner.
-     */
-    stop: function() {
-      var el = this.el
-      if (el) {
-        clearTimeout(this.timeout)
-        if (el.parentNode) el.parentNode.removeChild(el)
-        this.el = undefined
-      }
-      return this
-    },
-
-    /**
-     * Internal method that draws the individual lines. Will be overwritten
-     * in VML fallback mode below.
-     */
-    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
-    },
-
-    /**
-     * Internal method that adjusts the opacity of a single line.
-     * Will be overwritten in VML fallback mode below.
-     */
-    opacity: function(el, i, val) {
-      if (i < el.childNodes.length) el.childNodes[i].style.opacity = val
-    }
-
-  })
-
-
-  function initVML() {
-
-    /* Utility function to create a VML tag */
-    function vml(tag, attr) {
-      return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr)
-    }
-
-    // No CSS transforms but VML support, add a CSS rule for VML elements:
-    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}) // transparent stroke to fix color bleeding upon opacity change
-            )
-          )
-        )
-      }
-
-      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
-
-}));
public/javascripts/service/yobi.code.Browser.js
--- public/javascripts/service/yobi.code.Browser.js
+++ public/javascripts/service/yobi.code.Browser.js
@@ -157,7 +157,7 @@
 
         function _requestFolderList(){
             if(htVar.aPathQueue.length === 0){
-                yobi.ui.Spinner.hide();
+                NProgress.done();
                 htVar.aWelList.forEach(function(welList){
                     welList.css("display", "block");
                 });
@@ -184,11 +184,11 @@
             var nNewDepth = nParentDepth + 1;
             _setIndentByDepth(nNewDepth);
 
-            yobi.ui.Spinner.show();
+            NProgress.start();
             $.ajax(sURL, {
                 "success": function(oRes){
                     if(_isListExistsByPath(sTargetPath)){
-                        yobi.ui.Spinner.hide();
+                        NProgress.done();
                         return;
                     }
 
@@ -212,10 +212,10 @@
                         });
                     }
 
-                    yobi.ui.Spinner.hide();
+                    NProgress.done();
                 },
                 "error"  : function(){
-                    yobi.ui.Spinner.hide();
+                    NProgress.done();
                 }
             });
         }
public/javascripts/service/yobi.code.Diff.js
--- public/javascripts/service/yobi.code.Diff.js
+++ public/javascripts/service/yobi.code.Diff.js
@@ -142,7 +142,8 @@
 
             if(htElement.welBtnAccept.length > 0 && htElement.welBtnAccept.data("requestAs")){
                 htElement.welBtnAccept.data("requestAs").on("beforeRequest", function(){
-                    yobi.ui.Spinner.show({"bUseDimmer": true});
+                    htElement.welBtnAccept.attr('disabled','disabled');
+                    NProgress.start();
                 });
             }
 
public/javascripts/service/yobi.git.View.js
--- public/javascripts/service/yobi.git.View.js
+++ public/javascripts/service/yobi.git.View.js
@@ -121,7 +121,8 @@
 
             if(htElement.welBtnAccept.length > 0 && htElement.welBtnAccept.data("requestAs")){
                 htElement.welBtnAccept.data("requestAs").on("beforeRequest", function(){
-                    yobi.ui.Spinner.show({"bUseDimmer": true});
+                    htElement.welBtnAccept.attr('disabled','disabled');
+                    NProgress.start();
                 });
             }
         }
public/javascripts/service/yobi.git.Write.js
--- public/javascripts/service/yobi.git.Write.js
+++ public/javascripts/service/yobi.git.Write.js
@@ -131,7 +131,7 @@
 
             _showMergeResult({"message" : Messages("pullRequest.is.merging")});
 
-            yobi.ui.Spinner.show();
+            NProgress.start();
 
             $.ajax(vars.mergeResultURL, {
                 "data": data
@@ -139,7 +139,7 @@
             .done(_onSuccessMergeResult)
             .fail(_onErrorMergeResult)
             .always(function(){
-                yobi.ui.Spinner.hide();
+                NProgress.done();
             });
         }
 
public/javascripts/service/yobi.issue.LabelEditor.js
--- public/javascripts/service/yobi.issue.LabelEditor.js
+++ public/javascripts/service/yobi.issue.LabelEditor.js
@@ -614,7 +614,7 @@
                 "project.id" : elements.editCategoryForm.data("projectId")
             };
 
-            yobi.ui.Spinner.show();
+            NProgress.start();
 
             $.ajax(elements.editCategoryForm.data("categoryUpdateUri"), {
                 "method": "put",
@@ -625,7 +625,7 @@
                 _showError(res, "label.category.edit");
             }).always(function(){
                 elements.editCategoryForm.modal("hide");
-                yobi.ui.Spinner.hide();
+                NProgress.done();
             });
         }
 
@@ -679,7 +679,7 @@
                 return false;
             }
 
-            yobi.ui.Spinner.show();
+            NProgress.start();
 
             $.ajax(elements.editLabelForm.data("updateUri"), {
                 "method": "put",
@@ -690,7 +690,7 @@
                 _showError(res, "label.edit");
             }).always(function(){
                 elements.editLabelForm.modal("hide");
-                yobi.ui.Spinner.hide();
+                NProgress.done();
             });
         }
 
public/javascripts/service/yobi.issue.List.js
--- public/javascripts/service/yobi.issue.List.js
+++ public/javascripts/service/yobi.issue.List.js
@@ -227,11 +227,11 @@
         }
 
         function _onBeforeLoadIssueList(){
-            yobi.ui.Spinner.show();
+            NProgress.start();
         }
 
         function _onLoadIssueList(){
-            yobi.ui.Spinner.hide();
+            NProgress.done();
 
             _initElement(htInitialOptions);
             _initPagination();
public/javascripts/service/yobi.organization.New.js
--- public/javascripts/service/yobi.organization.New.js
+++ public/javascripts/service/yobi.organization.New.js
@@ -89,7 +89,7 @@
                 $('span.warning').hide();
                 $('span.msg').html(aErrors[0].message).show();
             } else {
-                yobi.ui.Spinner.show();
+                NProgress.start();
             }
         }
 
public/javascripts/service/yobi.organization.Setting.js
--- public/javascripts/service/yobi.organization.Setting.js
+++ public/javascripts/service/yobi.organization.Setting.js
@@ -104,7 +104,7 @@
                 $('span.warning').hide();
                 $('span.msg').html(aErrors[0].message).show();
             } else {
-                yobi.ui.Spinner.show();
+                NProgress.start();
             }
         }
 
public/javascripts/service/yobi.project.New.js
--- public/javascripts/service/yobi.project.New.js
+++ public/javascripts/service/yobi.project.New.js
@@ -158,7 +158,7 @@
                 return false;
             }
 
-            yobi.ui.Spinner.show();
+            NProgress.start();
         }
 
         /**
Add a comment
List