archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-14 09:08:32 +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>
<a href="#" class="button button-large button-ghost">Go back</a> <a href="#" class="button button-large button-ghost">Go back</a>
</div> </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> </div>
</body> </body>
</html> </html>

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

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

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

@ -78,8 +78,9 @@
width: 1.4em; width: 1.4em;
height: 1.4em; height: 1.4em;
border-radius: 50%; border-radius: 50%;
border: 0.25em solid #fff; border: 0.25em solid;
border-color: #fff transparent #fff transparent; 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);
} }
} }