archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-04 21:25:24 +00:00
Code Issues Projects Releases Wiki Activity

improved loading animation

Browse source
This commit is contained in:
Bram Wiepjes 2019-03-22 11:19:10 +01:00
parent cee1040bcb
commit 703ac6d861
3 changed files with 11 additions and 6 deletions
web-frontend
public
index.html
src/scss
base
_helpers.scss
components
_button.scss

4
web-frontend/public/index.html
View file

@ -149,6 +149,10 @@
</a>
<a href="#" class="button button-large button-ghost">Go back</a>
</div>
<div style="margin-bottom: 20px">
<a href="#" class="button button-large button-loading">Loading</a>
<a href="#" class="button button-loading">Loading</a>
</div>
</div>
</body>
</html>

8
web-frontend/src/scss/base/_helpers.scss
View file

@ -23,14 +23,14 @@
@keyframes spin {
0% {
transform: rotate(0deg);
transform:rotate(0);
}
40% {
transform: rotate(360deg);
50% {
transform:rotate(360deg);
}
100% {
transform: rotate(720deg);
transform:rotate(720deg);
}
}

5
web-frontend/src/scss/components/_button.scss
View file

@ -78,8 +78,9 @@
width: 1.4em;
height: 1.4em;
border-radius: 50%;
border: 0.25em solid #fff;
border: 0.25em solid;
border-color: #fff transparent #fff transparent;
animation: spin 1.8s linear infinite;
animation: spin infinite 1800ms;
animation-timing-function: cubic-bezier(.785, .135, .15, .86);
}
}