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"> | |
6dba76a5 | 8 | import { defineProps } from 'vue' |
66a7748d | 9 | import FlatButton from '@/components/buttons/FlatButton.vue' |
32de5a57 | 10 | |
878855a2 | 11 | defineProps<{ |
66a7748d JB |
12 | loading: boolean |
13 | }>() | |
32de5a57 LM |
14 | </script> |
15 | ||
16 | <style> | |
17 | @keyframes rotation { | |
18 | from { | |
19 | transform: rotate(0deg); | |
20 | } | |
21 | to { | |
22 | transform: rotate(360deg); | |
23 | } | |
24 | } | |
25 | ||
26 | .spin { | |
27 | animation-name: rotation; | |
28 | animation-duration: 2s; | |
29 | animation-iteration-count: infinite; | |
30 | animation-timing-function: linear; | |
31 | } | |
32 | </style> |