Progress Circular ​

The VProgressCircular component is a circular progress bar that can be used in Vue.js applications. It is customizable and can display a progress value or be used as an indeterminate loader.

Usage ​

The VProgressCircular component is a circular progress indicator that can be customized with different colors, sizes, and values. It can be used in a variety of scenarios, such as loading screens, progress bars, or data visualizations.

To use the VProgressCircular component, simply import it and create a new instance. You can then use it in your Vue templates as shown below:

The v-model directive is used to bind the progress variable to the component's value. This allows you to update the progress dynamically and have the component reflect those changes.

Text ​

The VProgressCircular component can display the progress value as text inside the circle. To enable this, simply wrap the component's slot content with curly braces and add it inside the component's tags.

Indeterminate ​

The VProgressCircular component can also be used in an indeterminate mode, where the progress value is unknown and the circle animates continuously.

Custom Color ​

You can customize the color of the VProgressCircular component by setting the color prop to a valid CSS color value. For example, to set the color to a specific shade of red, you can use the following code:

Custom Size ​

You can adjust the size of the VProgressCircular component by setting the size and width props. The size prop sets the diameter of the circle, while the width prop sets the thickness of the circle's stroke.

Props ​

Events ​

Styling ​

The component provides a few CSS classes that can be used to style the progress bar:

• .v-progress-circular: the main container element
• .v-progress-circular--indeterminate: applied when the indeterminate prop is true
• .v-progress-circular-underlay: the underlay circle element
• .v-progress-circular-overlay: the overlay circle element
• .v-progress-circular-text: the progress value text element

The scoped attribute is used to limit the CSS rules to the component only.

Standalone Installation ​

You can also install the component individually via @morpheme/progress-circular package:

npm i @morpheme/progress-circular

npm i @morpheme/progress-circular

Then, use it like so:

<script setup lang="ts">
import VProgressCircular from '@morpheme/progress-circular';
</script>

<template>
  <VProgressCircular :model-value="50" />
</template>

<script setup lang="ts">
import VProgressCircular from '@morpheme/progress-circular';
</script>

<template>
  <VProgressCircular :model-value="50" />
</template>

Storybook ​

View Storybook documentation here.