Categories
Chakra UI Vue

UI Development with Chakra UI Vue — Loading Spinner

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *