From 520f203c74e9601b727acf9a24da208aa09f5f73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Thu, 11 Dec 2014 10:31:22 +0100 Subject: [PATCH] Redesign loading icon and improve loading time (visually) Minor style fixes in menu secundary Redesign loading icon and improve loading time Improved contrast and saturation in loading colors Loader clean up fix loader blink --- app/coffee/modules/common/loader.coffee | 2 +- .../views/components/loading-bar.jade | 6 +++ app/partials/views/components/spinner.jade | 2 - app/partials/views/modules/loader.jade | 2 +- app/partials/views/modules/projects-nav.jade | 1 - app/styles/components/loader.scss | 21 ++++---- app/styles/components/loading-bar.scss | 24 +++++++++ app/styles/layout/animation.scss | 49 +++++-------------- app/styles/layout/base.scss | 3 +- app/styles/layout/issues.scss | 3 +- main-sass.js | 2 +- 11 files changed, 59 insertions(+), 56 deletions(-) create mode 100644 app/partials/views/components/loading-bar.jade delete mode 100644 app/partials/views/components/spinner.jade create mode 100644 app/styles/components/loading-bar.scss diff --git a/app/coffee/modules/common/loader.coffee b/app/coffee/modules/common/loader.coffee index ac1d745a..df14802d 100644 --- a/app/coffee/modules/common/loader.coffee +++ b/app/coffee/modules/common/loader.coffee @@ -57,7 +57,7 @@ Loader = () -> defaultConfig = { enabled: false, - minTime: 1000 + minTime: 300 } config = _.merge({}, defaultConfig) diff --git a/app/partials/views/components/loading-bar.jade b/app/partials/views/components/loading-bar.jade new file mode 100644 index 00000000..5f1f7937 --- /dev/null +++ b/app/partials/views/components/loading-bar.jade @@ -0,0 +1,6 @@ +div.loading + span.item.item-1 + span.item.item-2 + span.item.item-3 + span.item.item-4 + span.item.item-5 diff --git a/app/partials/views/components/spinner.jade b/app/partials/views/components/spinner.jade deleted file mode 100644 index e8959845..00000000 --- a/app/partials/views/components/spinner.jade +++ /dev/null @@ -1,2 +0,0 @@ -object.logo-svg(type="image/svg+xml", data="/svg/spinner.svg") - img(src="/svg/logo.svg", alt="TAIGA") diff --git a/app/partials/views/modules/loader.jade b/app/partials/views/modules/loader.jade index ffb3c848..957ff663 100644 --- a/app/partials/views/modules/loader.jade +++ b/app/partials/views/modules/loader.jade @@ -1,4 +1,4 @@ .loader(tg-loader) + include ../components/loading-bar div.container - include ../components/spinner p Loading... diff --git a/app/partials/views/modules/projects-nav.jade b/app/partials/views/modules/projects-nav.jade index fa3cebb7..c3d23e0d 100644 --- a/app/partials/views/modules/projects-nav.jade +++ b/app/partials/views/modules/projects-nav.jade @@ -1,6 +1,5 @@ .projects-nav-overlay div.container - include ../components/spinner p Loading project... div.wizard-create-project(tg-lb-create-project) diff --git a/app/styles/components/loader.scss b/app/styles/components/loader.scss index fa4973f3..d7111242 100644 --- a/app/styles/components/loader.scss +++ b/app/styles/components/loader.scss @@ -1,8 +1,6 @@ .loader { - @include transition(opacity .5s linear); background-color: $white; bottom: 0; - display: none; height: 100%; left: 0; opacity: 0; @@ -10,23 +8,22 @@ right: 0; top: 0; width: 100%; - z-index: 99900; + z-index: -100; .container { - margin: 0 auto; - margin-top: 15%; - position: relative; - width: 150px; + @include display(flex); + @include align-items(center); + @include justify-content(center); + height: 100%; + width: 100%; } p { @extend %large; - color: $gray-light; - padding-top: 20px; + color: $gray; text-align: center; } &.active { - @include transition(opacity .5s linear); - background-color: rgba($white, .9); - display: block; + background-color: rgba($white, .95); opacity: 1; + z-index: 99900; } } diff --git a/app/styles/components/loading-bar.scss b/app/styles/components/loading-bar.scss new file mode 100644 index 00000000..3bc23dcd --- /dev/null +++ b/app/styles/components/loading-bar.scss @@ -0,0 +1,24 @@ +.loading { + @include display(flex); + @include align-items(stretch); + @include flex-direction(row); + @include justify-content(flex-start); + .item { + @include animation-duration(5s); + @include animation-iteration-count(infinite); + @include animation-name(loadBar); + @include animation-timing-function(ease-in); + @include flex(1); + background: $gray; + height: 5px; + } + + $colors-list: #bbe831 #237400 #e43050 #810061 #618000; + @each $current-color in $colors-list { + $i: index($colors-list, $current-color) - 1; + .item-#{$i} { + @include animation-delay(#{$i}s); + background: $current-color; + } + } +} diff --git a/app/styles/layout/animation.scss b/app/styles/layout/animation.scss index 3a787900..6781c449 100644 --- a/app/styles/layout/animation.scss +++ b/app/styles/layout/animation.scss @@ -1,39 +1,3 @@ -// Rotating loader -@include keyframes(spin) { - 100% { - @include transform(rotate(360deg)); - } -} - -//Spinner -@include keyframes(fadeIn) { - 0% { - @include transform(translateX(1rem)); - @include filter(blur(5px)); - opacity: 0; - } - 1.6% { - @include transform(translateX(.2rem)); - @include filter(blur(0)); - opacity: 1; - } - 12% { - @include transform(translateX(-.2rem)); - @include filter(blur(0)); - opacity: 1; - } - 16% { - @include transform(translateX(-1rem)); - @include filter(blur(5px)); - opacity: 0; - } - 100% { - @include transform(translateX(-1rem)); - @include filter(blur(5px)); - opacity: 0; - } -} - //Loading @include keyframes(loading) { 0% { @@ -60,3 +24,16 @@ opacity: 1; } } + +//Bar loading +@include keyframes(loadBar) { + 0% { + @include flex(1); + } + 10% { + @include flex(10); + } + 20% { + @include flex(1); + } +} diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss index 8752ab87..a6f0808e 100644 --- a/app/styles/layout/base.scss +++ b/app/styles/layout/base.scss @@ -80,6 +80,7 @@ body { } .master { + background: $white; height: 100%; min-height: 100%; position: relative; @@ -106,7 +107,7 @@ body { @include flex(1); @include transition(all .2s linear); padding: 2em 1em; - width: 260px; + width: 210px; .filters-inner { @include transition (all .4s ease-in); opacity: 1; diff --git a/app/styles/layout/issues.scss b/app/styles/layout/issues.scss index 3af26e41..2095adb2 100644 --- a/app/styles/layout/issues.scss +++ b/app/styles/layout/issues.scss @@ -1,6 +1,7 @@ .issues { .filters-bar { - @include table-flex-child(1, 260px, 0, 260px); + @include flex(1); + width: 210px; } .filters-inner { opacity: 1; diff --git a/main-sass.js b/main-sass.js index 6e14f951..511ac228 100644 --- a/main-sass.js +++ b/main-sass.js @@ -51,7 +51,7 @@ exports.files = function () { 'components/wysiwyg', 'components/select-color', 'components/loader', - 'components/spinner', + 'components/loading-bar', 'components/help-notion-button', 'components/beta', 'components/markitup',