CircularProgress

Circular progress indicators are used to show the progress of ongoing tasks.

Usage

Import the component:

import 'mdui/components/circular-progress.js';

Import the TypeScript type:

import type { CircularProgress } from 'mdui/components/circular-progress.js';

Example:

<mdui-circular-progress></mdui-circular-progress>

Examples

Determinate Progress

By default, the circular progress indicator is in an indeterminate state. To set the current progress, use the value attribute. The default maximum progress value is 1.

To set the maximum progress value, use the max attribute.

API

Properties

AttributePropertyReflectTypeDefault
maxmaxnumber1

Sets the maximum value for the progress indicator. The default value is 1.

valuevaluenumber-

Sets the current value of the progress indicator. If not specified, the progress indicator is in an indeterminate state.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons