-
进度条
相关样式
layui-progress 代表一个进度条
|-- layui-progress-bar 代表进度条里面的进度
layui-progress-big 变粗了
相关属性
lay-percent 代表进度值
lay-showpercent="true" 是否显示进度值
代码如下图:
<%--
Created by IntelliJ IDEA.
User: Lenovo
Date: 2019/10/2
Time: 12:46
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>进度条</title>
<link rel="stylesheet" href="./libs/layui/css/layui.css">
<link rel="stylesheet" href="./libs/css/global.css">
<script type="text/javascript" src="./libs/layui/layui.js"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>默认风格的进度条</legend>
</fieldset>
<div class="layui-progress" lay-showpercent="true">
<div class="layui-progress-bar" lay-percent="40%"></div>
</div>
<div style="margin-top: 15px; width:300px">
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="70%"></div>
</div>
</div>
<script>
layui.use('element', function(){
});
</script>
</body>
</html>