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. java基础知识回顾之java Thread类学习（二）--java多线程安全问题（锁）

    上一节售票系统中我们发现,打印出了错票,0,-1,出现了多线程安全问题.我们分析为什么会发生多线程安全问题? 看下面线程的主要代码: @Override public void run() { // ...

  2. leetcode-Linux 简介

    https://leetcode-cn.com/leetbook/read/awesome-linux-handbook/eg4ecm/ Linux 系统是一种金字塔模型的系统,如下所示 应用程序发起 ...

  3. Linux系统中的lsmod、lsof、lspci、lsscsi命令及实例

    作为运维同学怎能不知道Linux系统中的lsmod.lsof.lspci.lsscsi命令呢,今天就来盘一盘她及实例. 1.lsmod命令 Linux lsmod命令用于显示已经加载到内核中的模块的状 ...

  4. 云辅助隐私集合求交（Server-Aided PSI）协议介绍：学习

    原文来自:云辅助隐私集合求交(Server-Aided PSI)协议介绍,下面学习一波,并记录一些笔记. 背景 总结: 1.PSI-CA和PSI相比,前者在乎的是交集的大小,后者在乎的是交集本身.另外 ...

  5. Python 与 PostgreSQL 集成：深入 psycopg2 的应用与实践

    title: Python 与 PostgreSQL 集成:深入 psycopg2 的应用与实践 date: 2025/2/4 updated: 2025/2/4 author: cmdragon e ...

  6. java中的文件流File

    数据 + 流(转)操作 IO I表示的是:输入Input O表示的是:Output Stream表示流转 java中的管道不止一个.并且管道有可能不是一样的. 有的管道粗有的管道细 File的常用方法 ...

  7. Protobuf生成文件报错

    Mac下protobuf生成文件报错问题解决办法,windows下就不会这么麻烦了,如果linux下出现类似报错信息按照下面的解决逻辑依然适用. 1.由--go_out引发的报错 1.报错信息: us ...

  8. Iceberg metrics导致的问题

    一.问题描述 在iceberg rewrite时报错:org.apache.iceberg.exceptions.ValidationException: Cannot commit, found n ...

  9. Luogu P4933 大师 题解 [ 绿 ] [ 线性 dp ] [ dp 细节处理 ] [ 限制转移条件优化 ]

    依据值域的 \(O(n^2)\) 做法 这种做法只适用于这种值域小的题,下一种做法才是求等差数列的通解. 我们定义 \(f[i][j]\) 表示以 \(h_i\) 为最后一个数,公差为 \(j\) 的 ...

  10. 用户信息授权报错“无效的AppID参数”问题排查解决过程

    今天记一个支付宝报错"无效的AppID参数"的问题排查解决过程,希望可以帮到大家. 报错产生 今天在测试支付宝用户信息授权 换取授权访问令牌 的时候,遇到了一个报错:"无 ...