61 lines
2.7 KiB
Handlebars
61 lines
2.7 KiB
Handlebars
<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> |