0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00

Merge pull request #947 from matthojo/Loading-Animation-Fix

Refactored loading bar SCSS
This commit is contained in:
John O'Nolan 2013-09-30 09:08:08 -07:00
commit 7b90178e76
2 changed files with 21 additions and 134 deletions

View file

@ -37,3 +37,21 @@
}
}
@include keyframes(shift-rightwards) {
0% {
@include transform(translateX(-100%));
}
40% {
@include transform(translateX(0%));
}
60% {
@include transform(translateX(0%));
}
100% {
@include transform(translateX(100%));
}
}

View file

@ -988,15 +988,8 @@ nav {
.js-loading .loading-bar {
display: block;
-webkit-animation: shift-rightwards 1.5s ease-in-out infinite;
-moz-animation: shift-rightwards 1.5s ease-in-out infinite;
-ms-animation: shift-rightwards 1.5s ease-in-out infinite;
-o-animation: shift-rightwards 1.5s ease-in-out infinite;
animation: shift-rightwards 1.5s ease-in-out infinite;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
animation-delay: 0.4s;
@include animation(shift-rightwards 1.5s ease-in-out infinite);
@include animation-delay(0.4s);
}
.loading-bar {
@ -1008,133 +1001,9 @@ nav {
height: 2px;
z-index: 900;
background: $blue;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
@include transform(translateX(100%));
}
@-webkit-keyframes shift-rightwards {
0% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
40% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
60% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
}
@-moz-keyframes shift-rightwards {
0% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
40% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
60% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
}
@-o-keyframes shift-rightwards {
0% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
40% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
60% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes shift-rightwards {
0% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
40% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
60% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
}
/* ==========================================================================
Modals
========================================================================== */