diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 6104b3c48..a65e5c5d5 100644 --- a/public/css/icinga/base.less +++ b/public/css/icinga/base.less @@ -188,13 +188,35 @@ td, th { transition: none !important; } -// Styles for when containers are loading. JS will remove this once the containers are ready -.impact { - .transition(background-color 2s 1s linear !important); - background-color: @gray-lighter !important; -} +.container { + &:before { + content: ""; + display: block; -.impact > .controls, .impact li.active a { - .transition(background-color 2s 1s linear !important); - background-color: @gray-lighter !important; + background: @body-bg-color url(/img/icinga-loader.gif) no-repeat center center; + background-size: 4em 4em; + + opacity: 0; + z-index: -10; + pointer-events: none; + .transition(none); + } + + &.impact { + overflow: hidden; + position: relative; + } + + &.impact:before { + position: absolute; + top: 2.5em; + right: 0; + bottom: 0; + left: 0; + + opacity: .7; + z-index: 10; + pointer-events: all; + .transition(opacity 1s 2s linear); + } } diff --git a/public/img/icinga-loader.gif b/public/img/icinga-loader.gif new file mode 100644 index 000000000..a732af0d8 Binary files /dev/null and b/public/img/icinga-loader.gif differ diff --git a/public/js/icinga/loader.js b/public/js/icinga/loader.js index 8b73a3f11..c5ebe8283 100644 --- a/public/js/icinga/loader.js +++ b/public/js/icinga/loader.js @@ -299,7 +299,11 @@ this.requests[id] = req; } if (! autorefresh) { - req.$target.addClass('impact'); + setTimeout(function () { + // The column may have not been shown before. To make the transition + // delay working we have to wait for the column getting rendered + req.$target.addClass('impact'); + }, 0); } this.icinga.ui.refreshDebug(); return req;