UI Development with Chakra UI Vue — Progress Bar

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.

Progress Bar

We can add a progress bar into our Vue app with the c-progress component.

For instance, we can write:

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

<script>
import { CBox, CProgress } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CProgress,
  },
};
</script>

value has the progress value between 0 and 100.

We can change the size with the size prop:

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

<script>
import { CBox, CProgress } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CProgress,
  },
};
</script>

lg makes it large.

We can also set it to sm for small or md for large.

Also, we can set its height with the height prop:

<template>
  <c-box>
    <c-progress :value="80" height="32px" />
  </c-box>
</template>

<script>
import { CBox, CProgress } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CProgress,
  },
};
</script>

We can make it animated with the is-animated prop:

<template>
  <c-box>
    <c-progress :value="80" has-stripe is-animated />
  </c-box>
</template>

<script>
import { CBox, CProgress } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CProgress,
  },
};
</script>

has-stripe adds stripes to the progress bar.

Conclusion

We can add progress bars into our Vue app with Chakra UI Vue.