Back to Vuetify

Progress circular

packages/docs/src/pages/en/components/progress-circular.md

4.0.71.5 KB
Original Source

Progress circular

The v-progress-circular component is used to convey data circularly to users. It also can be put into an indeterminate state to portray loading.

<PageFeatures />

Usage

In its simplest form, v-progress-circular displays a circular progress bar. Use the value prop to control the progress.

<ExamplesUsage name="v-progress-circular" /> <PromotedEntry />

API

ComponentDescription
v-progress-circularPrimary Component
<ApiInline hide-links />

Examples

Props

Color

Alternate colors can be applied to v-progress-circular using the color prop.

<ExamplesExample file="v-progress-circular/prop-color" />

Indeterminate

Using the indeterminate prop, a v-progress-circular continues to animate indefinitely.

<ExamplesExample file="v-progress-circular/prop-indeterminate" />

Reveal

The reveal prop animates the progress circle from 0 to its model value when the component mounts.

<ExamplesExample file="v-progress-circular/prop-reveal" />

Rotate

The rotate prop gives you the ability to customize the v-progress-circular's origin.

<ExamplesExample file="v-progress-circular/prop-rotate" />

Size and Width

The size and width props allow you to easily alter the size and width of the v-progress-circular component.

<ExamplesExample file="v-progress-circular/prop-size-and-width" />

Slots

Default

default slot can be used to replace the text inside the loader.

<ExamplesExample file="v-progress-circular/prop-slot-default" />