Use Spin.js to pimp the loading indicators in flyouts

bower.json

@@ -3,6 +3,7 @@
   "private": true,
   "dependencies": {
     "bootstrap": "3.1.1",
-    "jcrop": "0.9.12"
+    "jcrop": "0.9.12",
+    "spin.js": "1.3.3"
   }
 }

gulpfile.js

@@ -34,6 +34,9 @@ gulp.task('scripts', function () {
     // 'bower_components/bootstrap/js/tab.js',
     // 'bower_components/bootstrap/js/affix.js',
 
+    'bower_components/spin.js/spin.js',
+    'bower_components/spin.js/jquery.spin.js',
+
     'js/main.js'
   ])
     .pipe(uglify())

js/custom.js

 +function(n){"use strict";function t(){var n=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var i in t)if(void 0!==n.style[i])return{end:t[i]};return!1}n.fn.emulateTransitionEnd=function(t){var i=!1,r=this;n(this).one(n.support.transition.end,function(){i=!0});var o=function(){i||n(r).trigger(n.support.transition.end)};return setTimeout(o,t),this},n(function(){n.support.transition=t()})}(jQuery);
 +function(t){"use strict";var e=function(s,n){this.$element=t(s),this.options=t.extend({},e.DEFAULTS,n),this.transitioning=null,this.options.parent&&(this.$parent=t(this.options.parent)),this.options.toggle&&this.toggle()};e.DEFAULTS={toggle:!0},e.prototype.dimension=function(){var t=this.$element.hasClass("width");return t?"width":"height"},e.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var e=t.Event("show.bs.collapse");if(this.$element.trigger(e),!e.isDefaultPrevented()){var s=this.$parent&&this.$parent.find("> .panel > .in");if(s&&s.length){var n=s.data("bs.collapse");if(n&&n.transitioning)return;s.collapse("hide"),n||s.data("bs.collapse",null)}var i=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[i](0),this.transitioning=1;var a=function(){this.$element.removeClass("collapsing").addClass("collapse in")[i]("auto"),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!t.support.transition)return a.call(this);var l=t.camelCase(["scroll",i].join("-"));this.$element.one(t.support.transition.end,t.proxy(a,this)).emulateTransitionEnd(350)[i](this.$element[0][l])}}},e.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var e=t.Event("hide.bs.collapse");if(this.$element.trigger(e),!e.isDefaultPrevented()){var s=this.dimension();this.$element[s](this.$element[s]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse").removeClass("in"),this.transitioning=1;var n=function(){this.transitioning=0,this.$element.trigger("hidden.bs.collapse").removeClass("collapsing").addClass("collapse")};return t.support.transition?void this.$element[s](0).one(t.support.transition.end,t.proxy(n,this)).emulateTransitionEnd(350):n.call(this)}}},e.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()};var s=t.fn.collapse;t.fn.collapse=function(s){return this.each(function(){var n=t(this),i=n.data("bs.collapse"),a=t.extend({},e.DEFAULTS,n.data(),"object"==typeof s&&s);!i&&a.toggle&&"show"==s&&(s=!s),i||n.data("bs.collapse",i=new e(this,a)),"string"==typeof s&&i[s]()})},t.fn.collapse.Constructor=e,t.fn.collapse.noConflict=function(){return t.fn.collapse=s,this},t(document).on("click.bs.collapse.data-api","[data-toggle=collapse]",function(e){var s,n=t(this),i=n.attr("data-target")||e.preventDefault()||(s=n.attr("href"))&&s.replace(/.*(?=#[^\s]+$)/,""),a=t(i),l=a.data("bs.collapse"),o=l?"toggle":n.data(),r=n.attr("data-parent"),h=r&&t(r);l&&l.transitioning||(h&&h.find('[data-toggle=collapse][data-parent="'+r+'"]').not(n).addClass("collapsed"),n[a.hasClass("in")?"addClass":"removeClass"]("collapsed")),a.collapse(o)})}(jQuery);
-!function(n){jQuery(function(){n(".Button.Hidden").removeClass("Hidden").hide()})}(jQuery,window,document);
\ No newline at end of file
+!function(t,e){"object"==typeof exports?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Spinner=e()}(this,function(){"use strict";function t(t,e){var i,o=document.createElement(t||"div");for(i in e)o[i]=e[i];return o}function e(t){for(var e=1,i=arguments.length;i>e;e++)t.appendChild(arguments[e]);return t}function i(t,e,i,o){var n=["opacity",e,~~(100*t),i,o].join("-"),r=.01+i/o*100,s=Math.max(1-(1-t)/e*(100-r),t),a=d.substring(0,d.indexOf("Animation")).toLowerCase(),l=a&&"-"+a+"-"||"";return u[n]||(c.insertRule("@"+l+"keyframes "+n+"{0%{opacity:"+s+"}"+r+"%{opacity:"+t+"}"+(r+.01)+"%{opacity:1}"+(r+e)%100+"%{opacity:"+t+"}100%{opacity:"+s+"}}",c.cssRules.length),u[n]=1),n}function o(t,e){var i,o,n=t.style;for(e=e.charAt(0).toUpperCase()+e.slice(1),o=0;o<p.length;o++)if(i=p[o]+e,void 0!==n[i])return i;return void 0!==n[e]?e:void 0}function n(t,e){for(var i in e)t.style[o(t,i)||i]=e[i];return t}function r(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var o in i)void 0===t[o]&&(t[o]=i[o])}return t}function s(t){for(var e={x:t.offsetLeft,y:t.offsetTop};t=t.offsetParent;)e.x+=t.offsetLeft,e.y+=t.offsetTop;return e}function a(t,e){return"string"==typeof t?t:t[e%t.length]}function l(t){return"undefined"==typeof this?new l(t):void(this.opts=r(t||{},l.defaults,h))}function f(){function i(e,i){return t("<"+e+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',i)}c.addRule(".spin-vml","behavior:url(#default#VML)"),l.prototype.lines=function(t,o){function r(){return n(i("group",{coordsize:d+" "+d,coordorigin:-f+" "+-f}),{width:d,height:d})}function s(t,s,l){e(u,e(n(r(),{rotation:360/o.lines*t+"deg",left:~~s}),e(n(i("roundrect",{arcsize:o.corners}),{width:f,height:o.width,left:o.radius,top:-o.width>>1,filter:l}),i("fill",{color:a(o.color,t),opacity:o.opacity}),i("stroke",{opacity:0}))))}var l,f=o.length+o.width,d=2*f,p=2*-(o.width+o.length)+"px",u=n(r(),{position:"absolute",top:p,left:p});if(o.shadow)for(l=1;l<=o.lines;l++)s(l,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(l=1;l<=o.lines;l++)s(l);return e(t,u)},l.prototype.opacity=function(t,e,i,o){var n=t.firstChild;o=o.shadow&&o.lines||0,n&&e+o<n.childNodes.length&&(n=n.childNodes[e+o],n=n&&n.firstChild,n=n&&n.firstChild,n&&(n.opacity=i))}}var d,p=["webkit","Moz","ms","O"],u={},c=function(){var i=t("style",{type:"text/css"});return e(document.getElementsByTagName("head")[0],i),i.sheet||i.styleSheet}(),h={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",direction:1,speed:1,trail:100,opacity:.25,fps:20,zIndex:2e9,className:"spinner",top:"auto",left:"auto",position:"relative"};l.defaults={},r(l.prototype,{spin:function(e){this.stop();var i,o,r=this,a=r.opts,l=r.el=n(t(0,{className:a.className}),{position:a.position,width:0,zIndex:a.zIndex}),f=a.radius+a.length+a.width;if(e&&(e.insertBefore(l,e.firstChild||null),o=s(e),i=s(l),n(l,{left:("auto"==a.left?o.x-i.x+(e.offsetWidth>>1):parseInt(a.left,10)+f)+"px",top:("auto"==a.top?o.y-i.y+(e.offsetHeight>>1):parseInt(a.top,10)+f)+"px"})),l.setAttribute("role","progressbar"),r.lines(l,r.opts),!d){var p,u=0,c=(a.lines-1)*(1-a.direction)/2,h=a.fps,m=h/a.speed,y=(1-a.opacity)/(m*a.trail/100),g=m/a.lines;!function v(){u++;for(var t=0;t<a.lines;t++)p=Math.max(1-(u+(a.lines-t)*g)%m*y,a.opacity),r.opacity(l,t*a.direction+c,p,a);r.timeout=r.el&&setTimeout(v,~~(1e3/h))}()}return r},stop:function(){var t=this.el;return t&&(clearTimeout(this.timeout),t.parentNode&&t.parentNode.removeChild(t),this.el=void 0),this},lines:function(o,r){function s(e,i){return n(t(),{position:"absolute",width:r.length+r.width+"px",height:r.width+"px",background:e,boxShadow:i,transformOrigin:"left",transform:"rotate("+~~(360/r.lines*f+r.rotate)+"deg) translate("+r.radius+"px,0)",borderRadius:(r.corners*r.width>>1)+"px"})}for(var l,f=0,p=(r.lines-1)*(1-r.direction)/2;f<r.lines;f++)l=n(t(),{position:"absolute",top:1+~(r.width/2)+"px",transform:r.hwaccel?"translate3d(0,0,0)":"",opacity:r.opacity,animation:d&&i(r.opacity,r.trail,p+f*r.direction,r.lines)+" "+1/r.speed+"s linear infinite"}),r.shadow&&e(l,n(s("#000","0 0 4px #000"),{top:"2px"})),e(o,e(l,s(a(r.color,f),"0 0 1px rgba(0,0,0,.1)")));return o},opacity:function(t,e,i){e<t.childNodes.length&&(t.childNodes[e].style.opacity=i)}});var m=n(t("group"),{behavior:"url(#default#VML)"});return!o(m,"transform")&&m.adj?f():d=o(m,"animation"),l});
+!function(n){if("object"==typeof exports)n(require("jquery"),require("spin"));else if("function"==typeof define&&define.amd)define(["jquery","spin"],n);else{if(!window.Spinner)throw new Error("Spin.js not present");n(window.jQuery,window.Spinner)}}(function(n,e){n.fn.spin=function(i,s){return this.each(function(){var r=n(this),t=r.data();t.spinner&&(t.spinner.stop(),delete t.spinner),i!==!1&&(i=n.extend({color:s||r.css("color")},n.fn.spin.presets[i]||i),t.spinner=new e(i).spin(this))})},n.fn.spin.presets={tiny:{lines:8,length:2,width:2,radius:3},small:{lines:8,length:4,width:3,radius:5},large:{lines:10,length:8,width:4,radius:8}}});
+!function(n,e,i){jQuery(function(){n(".Button.Hidden").removeClass("Hidden").hide(),n(i).on("click",".ToggleFlyout",function(e){var i={lines:11,radius:5,length:5,width:2};n(".InProgress",e.currentTarget).spin(i)})})}(jQuery,window,document);
\ No newline at end of file

js/main.js

@@ -7,6 +7,18 @@
     // if the button is later shown.
     $('.Button.Hidden').removeClass('Hidden').hide();
 
+    // Attach spinners using Spin.js to the .InProgress element in flyouts.
+    $(document).on('click', '.ToggleFlyout', function (e) {
+      var spinner = {
+        lines  : 11
+      , radius : 5
+      , length : 5
+      , width  : 2
+      };
+
+      $('.InProgress', e.currentTarget).spin(spinner);
+    });
+
   });
 
 })(jQuery, window, document);