taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
stable
Xavier Julián 2014-12-11 10:31:22 +01:00 committed by Juanfran
parent 947ac85669
commit 520f203c74
11 changed files with 59 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/coffee/modules/common/loader.coffee
View File

@ -57,7 +57,7 @@ Loader = () ->
defaultConfig = {
enabled: false,
minTime: 1000
minTime: 300
}
config = _.merge({}, defaultConfig)

6
app/partials/views/components/loading-bar.jade Normal file
View File

@ -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

2
app/partials/views/components/spinner.jade
View File

@ -1,2 +0,0 @@
object.logo-svg(type="image/svg+xml", data="/svg/spinner.svg")
img(src="/svg/logo.svg", alt="TAIGA")

2
app/partials/views/modules/loader.jade
View File

@ -1,4 +1,4 @@
.loader(tg-loader)
include ../components/loading-bar
div.container
include ../components/spinner
p Loading...

1
app/partials/views/modules/projects-nav.jade
View File

@ -1,6 +1,5 @@
.projects-nav-overlay
div.container
include ../components/spinner
p Loading project...
div.wizard-create-project(tg-lb-create-project)

21
app/styles/components/loader.scss
View File

@ -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;
}
}

24
app/styles/components/loading-bar.scss Normal file
View File

@ -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;
}
}
}

49
app/styles/layout/animation.scss
View File

@ -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);
}
}

3
app/styles/layout/base.scss
View File

@ -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;

3
app/styles/layout/issues.scss
View File

@ -1,6 +1,7 @@
.issues {
.filters-bar {
@include table-flex-child(1, 260px, 0, 260px);
@include flex(1);
width: 210px;
}
.filters-inner {
opacity: 1;

2
main-sass.js
View File

@ -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',