最简单的用HTML+CSS实现横板和竖版进度条信息展示，附源码

最新推荐文章于 2024-06-09 09:49:42 发布
最新推荐文章于 2024-06-09 09:49:42 发布
阅读量1k 收藏 9
点赞数 1
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwqjkfge/article/details/122218663
版权

        在业务型公司中，能不能实现功能才是首要问题，例如用户报修业务、预约业务、材料审核业务等，往往离不开进度条模块。因为通过横板或竖版的进度条，用户可以直观的根据时间线看到预约或审核进度。

        在笔者最近的工作中，就碰到一个进度条的需求，只作简单的数据展示，没有复杂的交互。因为产品对进度条样式要求高度自定义，往往在网上找不到好的资源来实现，所以笔者决定花点时间，自己手写一个，后续要新加交互或设置样式，都是非常方便的。

最终实现的横板效果如下：

         实现横版进度条的代码如下，可以直接复制到本地运行：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条（横板）</title>
    <style>
        .timeline_ul {
            margin: 0px 20px;
            /* 清楚li元素自带的小圆点样式 */
            list-style: none;
        }
        /* li元素默认是自伤往下排的,所以用浮动让每个li元素横排 */
        
        .timeline_ul li {
            float: left;
            width: 20%;
        }
        
        .dot {
            display: inline-block;
            width: 5%;
            height: 10px;
            border-radius: 50%;
            background: black;
            /* 让小圆点下移和横线居中对齐 */
            margin-bottom: -5px;
        }
        
        .item {
            display: inline-block;
            width: 95%;
            margin-left: -5px;
            border-bottom: 1px solid black;
        }
        
        .tips {
            width: 100%;
            margin-left: -12px;
            margin-top: -6px;
        }
        
        .tips p {
            width: 95%;
            /* 自动换行 */
            white-space: pre-wrap;
        }
        
        .review-title {
            margin-bottom: 0px;
        }
        
        .review-time {
            margin: 4px 0px;
        }
        
        .review-content {
            margin: 6px 0px;
        }
        
        .timeline_ul li:last-child {
            color: #1890ff;
        }
        /* 隐藏最后一个进度的横线 */
        
        .timeline_ul li:last-child .item {
            display: none;
        }
    </style>
</head>

<body>
    <ul class="timeline_ul">
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题1</p>
                <p class="review-time">2017-12-01 15:00:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
    </ul>
</body>

</html>

最终实现的竖版效果如下：

          实现竖版进度条的代码如下，可以直接复制到本地运行：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条（竖版）</title>
    <style>
        .timeline_ul {
            margin: 0px 20px;
            /* 清楚li元素自带的小圆点样式 */
            list-style: none;
        }
        /* 设置li元素浮动并且每个li元素宽度为100%,那么li元素就是自上而下排列了 */
        
        .timeline_ul li {
            float: left;
            width: 100%;
            height: 105px;
        }
        
        .dot {
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: black;
            margin-bottom: -4px;
        }
        
        .item {
            float: left;
            height: 95px;
            border-left: 1px solid black;
            margin-left: -5px;
            margin-top: 10px;
        }
        
        .tips {
            float: left;
            margin-left: 10px;
            margin-top: -21px;
        }
        
        .tips p {
            /* 不换行 */
            white-space: nowrap;
        }
        
        .review-title {
            margin-bottom: 0px;
        }
        
        .review-time {
            margin: 4px 0px;
        }
        
        .review-content {
            margin: 6px 0px;
        }
        
        .timeline_ul li:last-child {
            color: #1890ff;
        }
        /* 隐藏最后一个进度的横线 */
        
        .timeline_ul li:last-child .item {
            display: none;
        }
    </style>
</head>

<body>
    <ul class="timeline_ul">
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题1</p>
                <p class="review-time">2017-12-01 15:00:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
        <li>
            <span class="dot"></span>
            <span class="item"></span>
            <div class="tips">
                <p class="review-title">标题2</p>
                <p class="review-time">2017-12-01 15:20:00</p>
                <p class="review-content">内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </li>
    </ul>
</body>

</html>

        如果需要更改进度条小圆点为其他图标，可以直接在<span class="dot"></span>种写入图标标签然后进行一些样式上的调整。如果读者发现代码有错误的地方或自己有更高明的做法，欢迎评论区留言讨论，如果觉得不错，可以点赞转发给更多的人看到哦，转载请注明出处，感谢~

        作者公众号：程序的艺术，欢迎关注一起探寻更多的程序艺术

不在、不再
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html进度条实现原理,HTML5 progress进度条详解
weixin_31826689的博客
05-30 3404
HTML5 progress 元素简介progress是HTML5的一个新元素，表示定义一个进度条，用途很广泛，可以用在文件上传的进度显示，文件下载的进度显示，也可以作为一种loading的加载状态条使用。html5 progress进度条语法html5 progress 属性progress maxmax属性表示进度条的进度最大值，如果有此值，必须是大于0的有效浮点数。max的默认值是1.pro...
竖直进度条的实现方法
wujiang_android的博客
12-14 1103
VerticalProgressBar.java: import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import android.u...
HTML实现进度条
alpha105的博客
01-06 3187
HTML实现进度条
HTML实现进度条/加载框模版
joe_g12345的博客
06-09 957
【代码】HTML实现进度条/加载框模版。
html 进度条
竹毛言己
04-19 2349
【代码】html 进度条。
HTML CSS 进度条
无心使然云中漫步
12-17 2918
进度百分比不是类似于 0°、90°、180°、270°、360° 这类数字时，使用圆锥渐变时，不同颜色间的衔接处会有明显的锯齿。描述 progress 元素所表示的任务一共需要完成多少工作量，如果不需要进度条渐变，只需要指定渐变颜色为同一颜色即可。，而如果要展示汽车仪表盘当前的速度值，应该使用。）不支持过渡变换的，因此.progress增加。比如，一个需求当前的完成度，应该使用。解决方案：使用CSS@property。存在问题：CSS中，渐变（比如。思路：使用背景色配合百分比。，不会有过渡动画效果。
python实例文本进度条
weixin_52766015的博客
12-08 728
1，刚开始（可能会很low） import time scale=10 print("----执行开始----") for i in range(scale+1): a='*'*i b='.'*(scale-i) c=(i/scale)*100 print("{:^3.0f}%[{}->{}]".format(c,a,b)) time.sleep(0.1) print("----执行结束----") ''' 2.单行消失 必须在cmd命令行中实
用 Unity 实现的3D横板格斗游戏（BeatEmUp）源码+可执行文件
12-26
用 Unity 实现的3D横板格斗游戏 软件版本 Unity 2019.4.28f1c1 (64-bit) Visual Studio 2019 游戏角色 提供了两个游戏角色供玩家进行选择 两个角色在攻击、速度以及弹跳属性数值上存在差异 游戏控制 方向键：...
基于unity的横板闯关小游戏源码+exe可执行程序+项目文档.zip
12-28
基于unity的横板闯关小游戏源码+exe可执行程序+项目文档.zip 游戏简介 玩家将通过简单轻松的操作控制主角来避开关卡中的陷阱，利用关卡机关，努力到达终点。为了贴合生生不息的主题并增加游戏趣味性，本游戏在关卡...
基于Qt的横板闯关酷跑游戏源码+项目说明（火柴人画风）.zip
03-18
2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。 基于Qt的...
高分项目，基于Unity3D开发实现的横板跑酷游戏-奔跑星球，内含完整源码+资源
最新发布
06-13
高分项目，基于Unity3D开发实现的横板跑酷游戏-奔跑星球，内含完整源码+资源 《星球奔跑》是一款刺激有趣的跑酷类手游游戏。玩家将扮演一个勇敢的太空旅行者,在未知的星球上奔跑,避开各种障碍物,收集能量球和道具,...
CSS实现进度条和订单进度条---竖向
zyf_smile的博客
06-28 1915
之前做了一个横向订单进度条，手机访问显示很难兼容样式，下面做一个竖向的，再结合情况微调一下，方便去兼容手机。
HTML5 progress进度条详解
m0_63853518的博客
02-14 1275
记录一些基础用法
HTML+CSS实现静态进度条
猿小白的博客
05-14 501
本章教程，介绍如何使用html+css实现静态进度条。
可滑动的横向时间轴
时年的博客
04-07 5544
一.概述 为了项目的需求,自定义了一个seekbar可当做时间轴,且是可以支持滑动的.效果图如下: 二.重写onMessure 这里只是简单的处理了以下AT_MOST的情况. @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
制作html css 步骤进度条（完整代码）
WordPress主题大全
03-20 2909
在这个例子中，步骤进度条由一个进度条和一系列用文本表示的步骤组成。进度条将根据当前活动的步骤改变宽度，步骤的外观将根据它们是否处于活动状态而改变。您可以根据需要调整宽度、颜色和字体大小值，以自定义步骤进度条的外观。这将创建一个带有进度条和圆圈元素的基本步骤条来表示每个步骤。上一个和下一个按钮可用于在步骤之间导航，步骤栏的外观将根据当前活动步骤动态更新。
HTML5 CSS3 诱人的实例 ： 网页加载进度条的实现，下载进度条等
weixin_30559481的博客
06-26 1136
今天给大家带来一个比较炫的进度条，进度条在一耗时操作上给用户一个比较好的体验，不会让用户觉得在盲目等待，对于没有进度条的长时间等待，用户会任务死机了，毫不犹豫的关掉应用；一般用于下载任务，删除大量任务，网页加载等；如果有使用html5为手机布局的，也可以用于手机中~ 效果图： 1、html结构： <div id="loadBar01" class="loadBar"&...
html实现竖直步骤条
weixin_42032770的博客
11-09 582
。。。。。。
css 半圆形 进度条
12-06
以下是一个简单的CSS半圆形进度条的实现方法： 1. HTML代码 ```html <div class="progress" data-progress="50"></div> ``` 2. CSS代码 ```css .progress { position: relative; width: 100px; height: 50px; border-radius: 50px 50px 0 0; overflow: hidden; } .progress:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ccc; } .progress:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f00; transform-origin: bottom center; transform: rotate(180deg); } .progress[data-progress]:after { transform: rotate(calc(180deg * var(--progress) / 100)); } ``` 3. 解释 首先，我们创建一个具有指定半径和高度的div元素，并将其设置为圆形。然后，我们使用CSS的伪元素:before和:after来创建进度条的底部和顶部部分。我们使用transform-origin属性将旋转点设置为底部中心，并使用transform: rotate(180deg)将进度条旋转180度，使其成为半圆形。最后，我们使用CSS变量和calc()函数来动态设置进度条的进度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值