Commit | Line | Data |
---|---|---|
32de5a57 LM |
1 | <template> |
2 | <FlatButton> | |
878855a2 | 3 | <span style="display: inline-block" :class="{ spin: loading }"> ↻ </span> |
32de5a57 LM |
4 | </FlatButton> |
5 | </template> | |
6 | ||
7 | <script setup lang="ts"> | |
66a7748d | 8 | import FlatButton from '@/components/buttons/FlatButton.vue' |
32de5a57 | 9 | |
878855a2 | 10 | defineProps<{ |
66a7748d JB |
11 | loading: boolean |
12 | }>() | |
32de5a57 LM |
13 | </script> |
14 | ||
15 | <style> | |
16 | @keyframes rotation { | |
17 | from { | |
18 | transform: rotate(0deg); | |
19 | } | |
20 | to { | |
21 | transform: rotate(360deg); | |
22 | } | |
23 | } | |
24 | ||
25 | .spin { | |
26 | animation-name: rotation; | |
27 | animation-duration: 2s; | |
28 | animation-iteration-count: infinite; | |
29 | animation-timing-function: linear; | |
30 | } | |
31 | </style> |