TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 09:03:12 +03:00
Code Issues Projects Releases Wiki Activity

display a spinner whilst the app is loading (#491)

Browse Source 
no issue
- use the same loading indicator as used on my.ghost.org
- will display whilst the JS is loading and initializing rather than showing a completely blank screen
This commit is contained in:
Kevin Ansfield 2017-01-15 21:11:43 +00:00 committed by Austin Burdine
parent dfd6d444c3
commit 7a5481f242
5 changed files with 69 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ghost/admin/app/index.html
View File

@ -37,6 +37,13 @@
{{content-for "head-footer"}}
</head>
<body>
<div class="ember-load-indicator">
<div class="gh-loading-content">
<div class="gh-loading-spinner"></div>
</div>
</div>
{{content-for "body"}}
{{content-for "body-footer"}}

1
ghost/admin/app/styles/app.css
View File

@ -17,6 +17,7 @@
/* Components: Groups of Patterns
/* ---------------------------------------------------------- */
@import "components/loading-indicator.css";
@import "components/modals.css";
@import "components/notifications.css";
@import "components/uploader.css";

58
ghost/admin/app/styles/components/loading-indicator.css Normal file
View File

@ -0,0 +1,58 @@
/* Loading state */
.ember-load-indicator {
display: flex;
flex-direction: row;
align-items: stretch;
overflow: hidden;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
padding-bottom: 8vh;
}
.gh-loading-content {
position: relative;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
flex-direction: column;
}
.gh-loading-content.basic-auth {
z-index: 1000;
}
.gh-loading-spinner {
position: relative;
display: inline-block;
box-sizing: border-box;
margin: -2px 0;
width: 50px;
height: 50px;
border: rgba(0,0,0,0.1) solid 1px;
border-radius: 100px;
animation: spin 1s linear infinite;
}
.gh-loading-spinner:before {
content: "";
display: block;
margin-top: 7px;
width: 7px;
height: 7px;
background: #4C5156;
border-radius: 100px;
z-index: 10;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

2
ghost/admin/app/templates/application.hbs
View File

@ -26,3 +26,5 @@
close=(route-action "toggleMarkdownHelpModal")
modifier="wide"}}
{{/if}}
{{ember-load-remover}}

1
ghost/admin/package.json
View File

@ -64,6 +64,7 @@
"ember-export-application-global": "1.1.1",
"ember-invoke-action": "1.4.0",
"ember-light-table": "1.8.1",
"ember-load": "0.0.11",
"ember-load-initializers": "0.6.3",
"ember-myth": "0.1.1",
"ember-one-way-controls": "1.1.2",