进度条 - 在线演示

文档
示例
社区
周边

扩展组件

模板市场

社区交流

后台模板

即时聊天

独立组件

Axure 组件

layui cdn

阿里云特惠
后台模板

开发工具

调试预览
布局

栅格

后台布局
基本元素

按钮

表单

导航/面包屑

选项卡

进度条

面板

徽章

时间线

静态表格

动画

辅助元素
组件示例

弹出层

日期与时间选择

即时通讯

数据表格

分页

文件上传

穿梭框

树形组件

颜色选择器

滑块

评分

轮播

模板引擎

流加载

工具集

代码修饰器

预览
查看代码
帮助

默认风格的进度条

温馨提示：进度条的宽度是100%适配于它的父级元素，如上面的进度条是在一个300px的父容器中。

更多颜色选取

大尺寸进度条

显示进度比文本

正如你上述看到的，除了百分数，还支持分数（layui 2.1.7 新增）

动态改变进度

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>