进度条 - 在线演示

文档
示例
扩展
社区
周边

扩展组件

社区交流

即时聊天

后台模板

社区模板

轻博客模板

独立组件

Axure组件
后台模板

开发工具

调试预览
布局

栅格

后台布局
基本元素

按钮

表单

导航/面包屑

选项卡

进度条

面板

徽章

时间线

静态表格

动画

辅助元素
组件示例

弹出层

日期与时间选择

即时通讯

数据表格

分页

文件上传

颜色选择器

滑块

评分

轮播

模板引擎

流加载

工具集

代码修饰器

预览
查看代码
帮助

默认风格的进度条

温馨提示：进度条的宽度是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>