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. 自主开发的OFD编辑器简介 -- 开ofd可编辑之先河

    前言  OFD是板式文档格式,板式文档只管显示:怎么对板式文档编辑,那不是OFD标准考虑的事.有时使用者是"不讲道理的",我就是想要编辑ofd文件!需求就是开发软件的动力,毕竟开发 ...

  2. ABP 系列总结

    2019年第一次接触 ABP 框架,那时候还是比较笨重的旧版本的,后来升级到 vNext 版本,我也基于 ABP 模块化的设计方式开发了一些模块用于日常工作.这个系列主要为了系统地记录一下日常工作与学 ...

  3. CSP-2024 初赛游记

    啊. \(\texttt{day}\) \(-4000\) 到重庆( \(\texttt{day}\) $ -3999$ ~ \(-7\) 文化课.文化课.OI.OI.自习.自习.模拟.模拟.挂分.挂 ...

  4. 【java提高】---细则（3）

    HashSet 与TreeSet和LinkedHashSet的区别 今天项目开发,需要通过两个条件去查询数据库数据,同时只要满足一个条件就可以取出这个对象.所以通过取出的数据肯定会有重复,所以要去掉重 ...

  5. Java版的对象关系映射实现

    在前面的几篇文章中,实现了获得基本类型的默认值,基本数据类型的转换等,主要的目标就是实现一个Java版的对象关系映射程序. 思路如下: 1: 对象必须是一个Java Bean. 2: 遍历对象的所有以 ...

  6. 轮播图，swiper使用

    背景: 最近接到一个需求,重写首页,需要用到轮播图. 但是轮播图只用两张图,此为前提. 本想直接用ElementUI的走马灯,但是只用两张图的情况下,走马灯不能循环播放,只能来回播放,公司的UI小姐姐 ...

  7. docker中创建容器时文件挂载和端口映射命令与首次登录官方mysql的参数

    docker run -itd --name nginx-08 -v /local_data2:/data/nginx/html -p 12000:80  nginx:1.18.0 docker ru ...

  8. ESP32 VScode环境问题

    vsdcode esp-idf插件安装 报错: Espressif\tools\idf-python\3.11.2\python.exe -m pip" is not valid. (ERR ...

  9. 认识soui4js(第4篇)：定义一个窗口类,响应控件的事件

    soui4js基于soui4设计实现. 首先我们看一下soui4中如何定义一个窗口类. soui4最基本的窗口类是SHostWnd和SHostDialog,它需要一个布局xml. 假定布局xml在资源 ...

  10. presto集成iceberg

    一.Presto服务下新建catelog cd /usr/local/service/presto/etc/catalog vim iceberg.properties connector.name= ...