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

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