[e-mobility-charging-stations-simulator.git] / ui / web / src / components / buttons / ReloadButton.vue

<template>
  <FlatButton>
    <span style="display: inline-block" :class="{ spin: loading }"> &#8635; </span>
  </FlatButton>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import FlatButton from '@/components/buttons/FlatButton.vue'

defineProps<{
  loading: boolean
}>()
</script>

<style>
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation-name: rotation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
</style>
Commit	Line	Data
32de5a57 LM	1	<template>
32de5a57 LM	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
66a7748d JB	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>