LayUI中的基本元素之进度条

最新推荐文章于 2023-03-17 12:00:42 发布

daimeijin

最新推荐文章于 2023-03-17 12:00:42 发布

阅读量2.2k

点赞数

分类专栏： LayUI 文章标签： vue js css

本文链接：https://blog.youkuaiyun.com/daimeijin/article/details/119684355

版权

本文介绍了LayUI中的进度条组件，包括常规用法和大号进度条layui-progress-big的展示。进度条在多种业务场景中有广泛应用，如任务完成度和loading效果。通过lay-percent属性设置初始百分比，并可以通过lay-showPercent开启或关闭百分比文本显示。大号进度条的文本显示在内部，提供了一种更直观的展示方式。动态改变进度条的操作需要参考element模块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。

进度条

进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。
依赖加载组件：element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <!-- 引入LayUId的核心CSS-->
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>

    <div style="height: 200px"></div>
    <div class="layui-progress">
        <div class="layui-progress-bar layui-bg-cyan"

最低0.47元/天解锁文章