diff --git a/public/res/extensions/workingIndicator.js b/public/res/extensions/workingIndicator.js index 58bbd9f8..f28beca1 100644 --- a/public/res/extensions/workingIndicator.js +++ b/public/res/extensions/workingIndicator.js @@ -10,12 +10,13 @@ define([ var $workingIndicatorElt; workingIndicator.onAsyncRunning = function (isRunning) { $bodyElt.toggleClass("working", isRunning); - $workingIndicatorElt.toggleClass("show", isRunning); + $workingIndicatorElt.toggleClass("hide", !isRunning); }; workingIndicator.onReady = function () { $bodyElt = $(document.body); - $workingIndicatorElt = $(".working-indicator"); + $workingIndicatorElt = $('
'); + $('.working-indicator').append($workingIndicatorElt); for (var i = 0; i < 4; i++) { $workingIndicatorElt.append($('
').css({ 'animation-delay': (i*2/10).toPrecision(3) + 's', @@ -25,5 +26,4 @@ define([ }; return workingIndicator; - }); \ No newline at end of file diff --git a/public/res/styles/main.less b/public/res/styles/main.less index 4d86570c..ccc2fedc 100644 --- a/public/res/styles/main.less +++ b/public/res/styles/main.less @@ -332,22 +332,19 @@ a { .working-indicator { overflow: hidden; height: @input-height-base; + width: 65px; padding-top: 10px; padding-right: 8px; - vertical-align: middle; .bar { display: inline-block; - visibility: hidden; width: 10px; height: 10px; border-radius: 1px; margin: 0 2px; + opacity: 0.25; background-color: @btn-success-color; - animation: indicator 0.6s ease-out infinite; - -webkit-animation: indicator 0.6s ease-out infinite; /* Safari and Chrome */ - } - &.show div { - visibility: visible; + animation: indicator 0.8s ease-out infinite; + -webkit-animation: indicator 0.8s ease-out infinite; /* Safari and Chrome */ } } }