Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.
This article will look at how to get started with UI development with Chakra UI Vue.
Loading Spinner
We can add a loading spinner into our Vue app with Chakra UI Vue.
To add it, we write:
<template>
<c-box>
<c-spinner />
</c-box>
</template>
<script>
import { CBox, CSpinner } from "@chakra-ui/vue";
export default {
components: {
CBox,
CSpinner,
},
};
</script>
We add the c-spinner
component to display the spinner.
We can change the color of the spinner with the color
prop:
<template>
<c-box>
<c-spinner color="blue.500" />
</c-box>
</template>
<script>
import { CBox, CSpinner } from "@chakra-ui/vue";
export default {
components: {
CBox,
CSpinner,
},
};
</script>
And we can change the size of it with the size
prop:
<template>
<c-box>
<c-spinner size="lg" />
</c-box>
</template>
<script>
import { CBox, CSpinner } from "@chakra-ui/vue";
export default {
components: {
CBox,
CSpinner,
},
};
</script>
lg
is large. We can also set it to xs
for extra small, sm
for small, md
for medium or xl
for extra-large.
Other options we can change include the thickness, speed of the spinning, and the color of the empty area.
To change them, we write:
<template>
<c-box>
<c-spinner
thickness="4px"
speed="0.65s"
empty-color="green.200"
color="vue.500"
/>
</c-box>
</template>
<script>
import { CBox, CSpinner } from "@chakra-ui/vue";
export default {
components: {
CBox,
CSpinner,
},
};
</script>
thickness
changes the thickness of the spinner ring.
speed
changes the time it takes to complete one rotation cycle.
empty-color
sets the color of the empty part of the spinner ring.
Conclusion
We can add a loading spinner into our Vue app with Chakra UI Vue.