HTML步骤进度条

效果图

思路

  1. 分份：

有多少个步骤就可以分成多少分，每份宽度应该为100%除以步骤数，故以上效果图中的每份宽度应该为25%，每份用一个div。

  1. 每份：

每份中可以看成是三个元素，一个使用span显示序号，一个使用div显示进度线，最后一个使用span显示文字，三者皆水平居中（或者本质上显示进度线的宽度为100%不需要居中，文本使用文本居中即可，序号div让其父div使用弹性居中布局），显示序号的写在显示进度线的后面（确保图层更高，序号不被覆盖），显示序号的和显示进度线的重合在同一行（显示序号使用absolute定位，弹性居中布局），显示文字的另起新行。

  1. 两边：

以上内容完成后分别在序号1和序号4的左边和右边会有多出来的背景，可以使用渐变效果，让其中一半显示显示背景色，另一半显示透明色即可。

  1. 已完成进度效果：

更改背景色即可，但要注意两边的效果

代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>步骤进度条</title>

    <style>

        /* 使用弹性居中布局让所有分部居中水平排列 */

        .steps {

            padding: 20px;

            display: flex;

            justify-content: center;

        }

        /* 进度线宽，4份，25% */

        .step {

            width: 25%;

            height: 20px;

        }

        /* 进度线和序号，使用弹性居中布局让序号和进度线居中 */

        .step-progress {

            display: flex;

            justify-content: center;

        }

        /* 文本居中 */

        .step-text {

            width: 100%;

            margin-top: 10px;

            text-align: center;

        }

        /* 进度线 */

        .step-line {

            width: 100%;

            height: 9px;

            margin-top: 7px;

            background-color: #cccccc;

        }

        /* 数字序号 */

        .step-num {

            width: 18px;

            height: 18px;

            line-height: 17px;

            /* 圆角背景 */

            border-radius: 50%;

            color: #ffffff;

            font-size: 16px;

            /* 序号居中显示 */

            text-align: center;

            background-color: #cccccc;

            border: 2px solid #cccccc;

            /* 使用相对于父元素定位，强行回到原来的位置 */

            position: absolute;

        }

        /* 使用渐变背景处理两边 */

        .step-progress.right div{

            background: linear-gradient(to right, #cccccc 0%, #cccccc 50%, transparent 51%, transparent 100%);

        }

        .step-progress.left div{

            background: linear-gradient(to left, #cccccc 0%, #cccccc 50%, transparent 51%, transparent 100%);

        }

        /* 完成效果 */

        .step-progress.done div{

            background: #4395ff;

        }

        .step-progress.done span{

            background-color: #4395ff;

            border: 2px solid #4395ff;

        }

        /* 完成效果左右两边特制 */

        .step-progress.right.done div{

            background: linear-gradient(to right, #4395ff 0%, #4395ff 50%, transparent 51%, transparent 100%);

        }

        .step-progress.left.done div{

            background: linear-gradient(to left, #4395ff 0%, #4395ff 50%, transparent 51%, transparent 100%);

        }

    </style>

</head>

<body>

    <!-- 步骤进度条 -->

    <div class="steps">

        <!-- 第一部分 -->

        <div class="step">

            <div class="step-progress left done">

                <div class="step-line"></div>

                <span class="step-num">1</span>

            </div>

            <div class="step-text">

                <span>选场</span>

            </div>

        </div>

        <!-- 第二部分 -->

        <div class="step">

            <div class="step-progress done">

                <div class="step-line"></div>

                <span class="step-num">2</span>

            </div>

            <div class="step-text">

                <span>选座</span>

            </div>

        </div>

        <!-- 第三部分 -->

        <div class="step">

            <div class="step-progress">

                <div class="step-line"></div>

                <span class="step-num">3</span>

            </div>

            <div class="step-text">

                <span>付款</span>

            </div>

        </div>

        <!-- 第四部分 -->

        <div class="step">

            <div class="step-progress right">

                <div class="step-line"></div>

                <span class="step-num">4</span>

            </div>

            <div class="step-text">

                <span>观影</span>

            </div>

        </div>

    </div>

</body>

</html>

使用

  1. 更改分段数量：

改step中的宽占比和下面第n部分的数量即可

  1. 更改完成分段：

在step-progress中加入done即可

参考资料

  1. 【CSS3实现背景色一半红一半白】https://blog.csdn.net/qq_40951289/article/details/106928900

  2. 【Steps步骤条, Bootstrap风格步骤条】https://www.cnblogs.com/romayn/p/9036174.html

【HTML】步骤进度条组件的更多相关文章

  1. 手把手教你实现一个 Vue 进度条组件！

    最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...

  2. 步骤进度条 css

    用css写一个简单的步骤进度条 html代码: <h4>南京游玩</h4> <ul class="step-list"> <li> ...

  3. 详解Bootstrap进度条组件

    在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...

  4. 【Android 应用开发】 自定义 圆形进度条 组件

    转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://down ...

  5. 数字进度条组件NumberProgressBar

     数字进度条组件NumberProgressBar NumberProgressBar是一款数字进度条组件.它不仅可以通过进度条的变化展现进度,还可以通过跟随文字精确表示进度值.开发者可以对进度条进行 ...

  6. vue 的进度条组件

    先看效果: 要想实现如上图的,进度跳效果,有两种方式,首先介绍第一种: 1.自己用 div 写一个,代码如下 <template> <div class="mfc-slid ...

  7. progressbar进度条组件

    Progressbar 进度条组件 通过$.fn.progressbar.fn.defaults重写默认的defaults进度条(progressbar)提供了一种显示长时间操作进度的反馈.进度可被更 ...

  8. 【progress】 进度条组件说明

    progress 进度条组件 原型: <progress percent="[Float(0-100)]" show-info="[Boolean]" b ...

  9. 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件

    jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...

  10. Android学习笔记(24):进度条组件ProgressBar及其子类

    ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...

随机推荐

  1. Applitools_问题汇总

    1.  Android使用Real Device 问题1: AttributeError: 'NoneType' object has no attribute 'to_capabilities' 解 ...

  2. docker 使用centos镜像运行javaweb

    Docker 是 2014 年最为火爆的技术之一,几乎所有的程序员都听说过它.Docker 是一种"轻量级"容器技术,它几乎动摇了传统虚拟化技术的地位,现在国内外已经有越来越多的公 ...

  3. 学弟一看就会的RDKX5模型转换及部署，你确定不学？

    作者:SkyXZ CSDN:SkyXZ--CSDN博客 博客园:SkyXZ - 博客园 宿主机环境:WSL2-Ubuntu22.04+Cuda12.6.D-Robotics-OE 1.2.8.Ubun ...

  4. 深入理解Java泛型、协变逆变、泛型通配符、自限定

    禁止转载 重写了之前博客写的泛型相关内容,全部整合到这一篇文章里了,把坑都填了,后续不再纠结这些问题了.本文深度总结了函数式思想.泛型对在Java中的应用,解答了许多比较难的问题. 纯函数 协变 逆变 ...

  5. 安全、高效！天翼云HPFS助企业一臂之力！

    近年来,随着各行业数智转型逐步深入以及人工智能大模型的蓬勃发展,气象分析.大模型训练.自动驾驶.石油勘探.EDA仿真.基因分析等高性能计算(HPC)场景和智算场景(AI)不仅对算力需求激增,也产生了图 ...

  6. 调研报告-基于 Iceberg 构建湖仓一体平台调研

    一.背景 我们使用 Iceberg 构建湖仓一体平台的初衷是希望解决业务方在使用 Hive 数仓时的一些痛点.主要包括以下几大方面: (1)现有的数据同步只支持全量同步,同步大表速度慢. (2)Hiv ...

  7. 本地部署 Browser-Use WebUI + 本地部署 DeepSeek 实现浏览器AI自动化

    前一版采用的是 Deepseek 官方API,由于最近比较火,可能遇到服务器繁忙导致运行不成功,这一版选择通过 Ollama 本地部署的模型 一.安装部署(已安装 python3.11 或以上版本.p ...

  8. FreeSql学习笔记——12.执行Sql

    前言   FreeSql支持通过Sql语句配合ISelect生成最终的Sql语句,也可以执行原生自定义Sql语句,使操作更灵活:通过sql语句与Iselect配合使用更好控制sql语句: 简单查询 _ ...

  9. [POJ3237] 树的维护 题解

    一眼树链剖分或 \(LCT\),由于在学后者所以就写了. 取反操作相当于把 \(min,max\) 取反后交换,所以要维护 \(min,max,val\). 时间复杂度 \(O(m\log n)\). ...

  10. Java8 stream 提取对象 List 中的某一字段生成新的 List

    //输出List StudentInfo.printStudents(studentList); //从对象列表中提取一列(以name为例) List<String> nameList = ...