ui/web/src/components/buttons/ReloadButton.vue

   1 <template>
   2   <FlatButton>
   3     <span style="display: inline-block" :class="{ spin: loading }"> &#8635; </span>
   4   </FlatButton>
   5 </template>
   6
   7 <script setup lang="ts">
   8 import { defineProps } from 'vue'
   9 import FlatButton from '@/components/buttons/FlatButton.vue'
  10
  11 defineProps<{
  12   loading: boolean
  13 }>()
  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>