Files
directus/docs/reference/app/components/v-progress-circular.md
Nitwel c2e7c85bbd Update documentation of app (#4222)
* move component docs to documentation

* update app docs tables for components

* update docs

* Add components to docs sidebar

* fix generated tables

* fix tables

* rename transitions

* update tables

* update nested components

* update tables

* update tables

* update tables

* update v-table table

* add basic documentation to each component

* remove all stories of storybook

* add missing documentation

* undate tables

* update tables

* update docs sidebar

* update app docs

* remove unused references

* add general readme

* update docs

* make reference titiles smaller

* add reference tag

* improve docs

* update order of tabs in sidebar

* remove all readmes and stories from interfaces/displays

* Cleanup menu

* Remove storybook

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
2021-02-24 17:48:19 -05:00

41 lines
1.5 KiB
Markdown

# Progress Circular
Displays a circular progress bar as the name suggests. Can be used to show that something is loading or how much
something is done.
```html
<v-progress-circular indeterminate />
```
## Reference
#### Props
| Prop | Description | Default | Type |
| --------------- | ------------------------------------------------------- | ------- | --------- |
| `indeterminate` | If set to true displays no value but spins indefinitely | `false` | `Boolean` |
| `value` | Which value to represent going from 0 to 100 | `0` | `Number` |
#### CSS Variables
| Variable | Default |
| ---------------------------------------- | -------------------------- |
| `--v-progress-circular-color` | `var(--foreground-normal)` |
| `--v-progress-circular-background-color` | `var(--border-normal)` |
| `--v-progress-circular-transition` | `400ms` |
| `--v-progress-circular-speed` | `2s` |
| `--v-progress-circular-size` | `28px` |
| `--v-progress-circular-line-size` | `3px` |
#### Events
| Event | Description | Value |
| -------------------- | ----------- | ----- |
| `animationiteration` | | |
#### Slots
| Slot | Description | Data |
| --------- | ----------- | ---- |
| _default_ | | |