Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Initial loading bar implementation

Browse source 
See #726

Becomes visible when <body> has a class of `js-loading`
This commit is contained in:
John O'Nolan 2013-09-30 11:17:06 +02:00
parent 8cbb09124d
commit 16742bcaef
2 changed files with 157 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

155
core/client/assets/sass/modules/global.scss
View file

@ -11,6 +11,7 @@
* Mobile Navigation * Mobile Navigation
* Drop-down / Pop-up Menu * Drop-down / Pop-up Menu
* Notifications * Notifications
* Loading Bar
* Modals * Modals
* Main Elements * Main Elements
* Floating Headers * Floating Headers
@ -980,6 +981,160 @@ nav {
background: $blue; background: $blue;
} }
/* ==========================================================================
Loading Bar
========================================================================== */
.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;
}
.loading-bar {
position: fixed;
display: none;
top: 0;
left: 0;
right: 0;
height: 2px;
z-index: 900;
background: $blue;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
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 Modals
========================================================================== */ ========================================================================== */

2
core/server/views/default.hbs
View file

@ -31,6 +31,8 @@
{{{block "pageStyles"}}} {{{block "pageStyles"}}}
</head> </head>
<body class="{{bodyClass}}"> <body class="{{bodyClass}}">
<div class="loading-bar"></div>
{{#unless hideNavbar}} {{#unless hideNavbar}}
{{> navbar}} {{> navbar}}
{{/unless}} {{/unless}}