luxolus
/
open-vault
2
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Update loading animation

This commit is contained in:
Joshua Ogle 2018-04-13 12:58:10 -06:00
parent c7dddaf537
commit 45b1efe259
3 changed files with 63 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/styles/utils/_bulma_variables.scss
View File

@ -37,7 +37,7 @@ $border: $grey-light;
$hr-margin: 1rem 0;
//typography
$family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
$family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
$family-primary: $family-sans;
$body-size: 14px;
$size-3: (24/14) + 0rem;

7
ui/app/templates/partials/loading.hbs
View File

@ -2,12 +2,7 @@
<div class="columns is-centered">
<div class="column is-narrow has-text-centered has-text-grey-dark has-current-color-fill">
<div class="level is-mobile">
<div class="level-item">
<span class="loader is-inline-block"></span>
</div>
<div class="level-item">
&nbsp;&nbsp;Loading&hellip;
</div>
{{partial 'svg/vault-loading'}}
</div>
</div>
</div>

61
ui/app/templates/svg/vault-loading.hbs Normal file
View File

@ -0,0 +1,61 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" version="1.1" id="vault-loading" role="alert" aria-label="Loading">
<style>
#vault-loading polygon {
animation: vault-loading-animation 1.3s infinite ease-in-out;
transform-origin: 50% 50%;
fill: #DCE2E9;
}
#vault-loading .vault-loading-order-1 {
animation-delay: .1s;
}
#vault-loading .vault-loading-order-2 {
animation-delay: .2s;
}
#vault-loading .vault-loading-order-3 {
animation-delay: .3s;
}
#vault-loading .vault-loading-order-4 {
animation-delay: .4s;
}
@keyframes vault-loading-animation {
0%,
70%,
100% {
transform: scale3D(1, 1, 1);
}
35% {
transform: scale3D(0, 0, 1);
}
}
</style>
<g id="vault-loading-y1">
<polygon class="vault-loading-order-4" points="0,0 5,10 10,0" style="transform-origin: 5px 5px" />
<polygon class="vault-loading-order-2" points="5,10 10,0 15,10" style="transform-origin: 10px 5px" />
<polygon class="vault-loading-order-3" points="10,0 15,10 20,0" style="transform-origin: 15px 5px" />
<polygon class="vault-loading-order-1" points="15,10 20,0 25,10" style="transform-origin: 20px 5px" />
<polygon class="vault-loading-order-3" points="20,0 25,10 30,0" style="transform-origin: 25px 5px" />
<polygon class="vault-loading-order-2" points="25,10 30,0 35,10" style="transform-origin: 30px 5px" />
<polygon class="vault-loading-order-4" points="30,0 35,10 40,0" style="transform-origin: 35px 5px" />
</g>
<g id="vault-loading-y2">
<polygon class="vault-loading-order-3" points="5,10 10,20 15,10" style="transform-origin: 10px 15px" />
<polygon class="vault-loading-order-1" points="10,20 15,10 20,20" style="transform-origin: 15px 15px" />
<polygon class="vault-loading-order-2" points="15,10 20,20 25,10" style="transform-origin: 20px 15px" />
<polygon class="vault-loading-order-1" points="20,20 25,10 30,20" style="transform-origin: 25px 15px" />
<polygon class="vault-loading-order-3" points="25,10 30,20 35,10" style="transform-origin: 30px 15px" />
</g>
<g id="vault-loading-y3">
<polygon class="vault-loading-order-3" points="10,20 15,30 20,20" style="transform-origin: 15px 25px" />
<polygon class="vault-loading-order-2" points="15,30 20,20 25,30" style="transform-origin: 20px 25px" />
<polygon class="vault-loading-order-3" points="20,20 25,30 30,20" style="transform-origin: 25px 25px" />
</g>
<g id="vault-loading-y4">
<polygon class="vault-loading-order-4" points="15,30 20,40 25,30" style="transform-origin: 20px 35px" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB