darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-07 13:18:24 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add a loading indicator to the letter preview

Browse Source 
Letter previews take a few seconds to load.

Good to let the user know that something is happening and that they
should wait.
This commit is contained in:
Chris Hill-Scott
2017-03-16 17:09:46 +00:00
parent 846f9913fa
commit cf4a19e979
1 changed files with 21 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/assets/stylesheets/components/letter.scss
View File

@@ -1,6 +1,11 @@
$iso-paper-ratio: 141.42135624%; $iso-paper-ratio: 141.42135624%;
@keyframes ellipsis {
to {
width: 1.25em;
}
}
.letter { .letter {
padding: 0; padding: 0;
@@ -8,6 +13,21 @@ $iso-paper-ratio: 141.42135624%;
position: relative; position: relative;
background: $panel-colour; background: $panel-colour;
&:before {
position: absolute;
top: 10%;
left: 50%;
margin-left: -0.5em;
font-size: 96px;
color: $white;
overflow: hidden;
display: block;
vertical-align: bottom;
animation: ellipsis steps(4,end) 1.3s infinite;
content: "\2026"; // ellipsis
width: 0px;
}
a { a {
display: block; display: block;
overflow: hidden; overflow: hidden;