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

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

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

const props = 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>
5a010bf0	3	<span style="display: inline-block" :class="{ spin: props.loading }"> ↻ </span>
32de5a57 LM	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>