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. JSON和XML的对比及应用领域

    JSON和XML的对比 对比表格 对比维度 JSON XML 可读性 通常更简洁,易于阅读和编写12 结构清晰,但可能因标签和属性而显得冗长1 解析难度 解析通常比XML简单,多数现代编程语言内置解析 ...

  2. C# WinForm 托盘程序

    实现步骤 创建 NotifyIcon 控件并设置属性: 编写 NotifyIcon 响应控制事件: 在主窗体的Load事件中将 NotifyIcon 添加到系统托盘: 程序退出时,移除系统托盘的 No ...

  3. C# WebApi 全局配置模型验证和自定义错误处理。config Filters Add ModelStateValidationFilter/CustomExceptionFilter

    public static void Start() { logger.Debug("Startup WebAPI..."); SwaggerConfig.Register(); ...

  4. Quartz调度框架详解、运用场景、与集群部署实践

    以下将分别从Quartz架构简介.集群部署实践.Quartz监控.集群原理分析详解Quartz任务调度框架. Quartz简介 Quartz是Java领域最著名的开源任务调度工具,是一个任务调度框架, ...

  5. w3cschool-微信小程序开发文档-工具

    微信小程序工具 概览 2020-07-22 15:24 更新 为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能. 扫码登录 启动工具时,开 ...

  6. Html5移动应用性能优化笔记

    前景描述:最近一直在学习html5移动开发,找了很多资料,做了很多的页面.奈何作为一个程序猿,没有前端攻城狮那般专业,处处碰壁,想遍各种方法,经历各种尝试,最终的效果自己都能看醉.其中最大的问题就是 ...

  7. dart集合list方法详解

    List数组有两种声明方式: 01==>List 常用的属性==> length 计算数组的长度 reversed 数组翻转 isEmpty 是否为空 isNotEmpty 是否不为空 L ...

  8. FreeSql学习笔记——4.联表

    前言   上一章节是查询,记录了简单的查询,比较看好的是分块.Dto映射和分页,除了简单的单表查询,更多的时候要用到联表查询,毕竟设计数据库是按照范式设计,FreeSql的联表操作有导航属性.Join ...

  9. WinForm 进度条显示进度百分比

    参考: https://blog.csdn.net/zhuimengshizhe87/article/details/20640157 WinForm中显示进度条百分比有多种方式: 1. 添加 Lab ...

  10. 发那科焊接机器人M-10iA维修总结

    发那科作为工业机器人制造商,其焊接机器人产品广泛应用于各种工业领域.然而,随着时间的推移,焊接机器人可能会出现故障,因此了解发那科焊接机器人M-10iA维修知识显得尤为重要. 一.日常法那科机械手维护 ...