MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
样式
与框架集成
组件
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 布局
工具函数
独立包

CircularProgress 圆形进度指示器

圆形进度指示器是一个用于显示任务进度的圆形组件,例如数据加载或表单提交等。

使用方法

按需导入组件:

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

按需导入组件的 TypeScript 类型:

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

使用示例:

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

示例

固定进度

圆形进度指示器默认为不确定的进度,可以通过 value 属性设置当前进度,默认进度最大值为 1

可以通过 max 属性设置进度的最大值。

API

属性

HTML 属性JavaScript 属性Reflect类型默认值
maxmaxnumber1

进度指示器的最大值。默认为 1

valuevaluenumber-

进度指示器的当前值。如果未指定该值,则显示为不确定状态

本页目录