UI Development with Chakra UI Vue — Circular Progress Display

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.

Circular Progress Display

Chakra UI Vue comes with a circular progress component.

To add it, we can write:

<template>
  <c-box>
    <c-circular-progress :value="80" />
  </c-box>
</template>

<script>
import { CBox, CCircularProgress } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CCircularProgress,
  },
};
</script>

to add the c-circular-progress component to add the circular progress display.

value is set to the progress value, which can be between 0 to 100.

We can change the size with the size prop:

<template>
  <c-box>
    <c-circular-progress :value="80" size="120px" />
  </c-box>
</template>

<script>
import { CBox, CCircularProgress } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CCircularProgress,
  },
};
</script>

And we can change its color with the color prop:

<template>
  <c-box>
    <c-circular-progress :value="80" color="orange" size="120px" />
  </c-box>
</template>

<script>
import { CBox, CCircularProgress } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CCircularProgress,
  },
};
</script>

Also, we can add the c-circular-progress-label component to add a label in the circular progress component:

<template>
  <c-box>
    <c-circular-progress :value="40" color="green">
      <c-circular-progress-label>40%</c-circular-progress-label>
    </c-circular-progress>
  </c-box>
</template>

<script>
import {
  CBox,
  CCircularProgress,
  CCircularProgressLabel,
} from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CCircularProgress,
    CCircularProgressLabel,
  },
};
</script>

To make it animate, we can use the is-determinate prop:

<template>
  <c-box>
    <c-circular-progress is-indeterminate />
  </c-box>
</template>

<script>
import { CBox, CCircularProgress } from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CCircularProgress,
  },
};
</script>

Conclusion

We can add a circular progress display into our Vue app with Chakar UI Vue.