通过HTML/CSS 实现各类进度条的功能。

news2024/9/22 1:33:22

需求：我们在开发中会遇到使用各式各样的进度条，因为当前插件里面进度条各式各样的，为了方便我们定制化的开发和方便修改样式，我们这里使用HTML和CSS样式来进行开发进度条功能。

通过本文学习我们会明白如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式。

  • 通过 HTML 标签 meter 创建进度条
  • 通过 HTML 标签progress创建进度条
  • HTML 实现进度条的局限性
  • 使用 CSS 百分比、渐变创建普通进度条及其动画
  • 使用 CSS 创建圆环形进度条
  • 使用 CSS 创建球形进度条

1，横向进度条效果如下

我们最为常见遇到进度条是横向进度条。这个是最多的，主要利用HTML5 原生提供了两个标签 和 来实现进度条。

meter 具体实例如下：
在这里插入图片描述

<p>
    <span>完成度：</span>
    <meter min="0" max="500" value="350">350 degrees</meter>
</p>

其中，min、max、value 分别表示最大值，最小值与当前值。

我们再来看看 标签的用法：

在这里插入图片描述

<p>
    <label for="file">完成度：</label>
    <progress max="100" value="70"> 70% </progress>
</p>

其中，max 属性描述这个 progress 元素所表示的任务一共需要完成多少工作量，value 属性用来指定该进度条已完成的工作量。

二者比较差异如下：
那么问题来了，从上述 Demo 看，两个标签的效果一模一样，那么它们的区别是什么？为什么会有两个看似一样的标签呢？
这两个元素最大的差异在于语义上的差别。
meter 表示已知范围内的标量测量值或分数值
progress 表示任务的完成进度
譬如，一个需求当前的完成度，应该使用 ，而如果要展示汽车仪表盘当前的速度值，应该使用 meter。

meter & progress 的局限性
当然，在实际的业务需求中，或者生产环境，你几乎是不会看到meter 和progress 标签。
我们无法有效的修改meter和 progress标签的样式，譬如背景色，进度前景色等。并且，最为致命的是，浏览器默认样式的表现在不同浏览器之间并不一致。这给追求稳定，UI 表现一致的业务来说，是灾难性的缺点！
我们无法给他添加一些动画效果、交互效果，因为一些实际的应用场景中，肯定不是简单的展示一个进度条仅此而已
利用 CSS 实现进度条

因此，在现阶段，更多的还是使用一些 CSS 的方式去实现进度条。

（1）使用百分比实现进度条
最为常见的一种方式是使用背景色配合百分比的方式制作带有渐变的进度条。
最简单的一个 DEMO示例如下：
在这里插入图片描述

<div class="g-container">
    <div class="g-progress"></div>
</div>

<div class="g-progress"></div>

同样的，我们可以利用 HTML style 属性填写完整的 background 值传递实际百分比，当然，这里更推荐使用 CSS 自定义属性传值
为了实现动画效果，我们可以借助 CSS @property，改造下我们的代码：

在这里插入图片描述

<div class="g-progress" style="--progress: 70%"></div>

@property --progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.g-progress {
    margin: auto;
    width: 240px;
    height: 25px;
    border-radius: 25px;
    background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
    border: 1px solid #eee;
    transition: .3s --progress;
}

2，圆形进度条效果如下：

核心就是使用角向渐变 background: conic-gradient()：
示例效果如下：
在这里插入图片描述
代码如下：

<div class="progress-circle"
	v-for="(item,index) in progressList" :key="index"
      :style="{
        background: `radial-gradient(#fff 55%, transparent 56%), conic-gradient(#3A7CFF ${item.rate}%, #f5f5f5 ${ item.rate && item.rate > 0 ? item.rate + 0.4 : 0 }%),radial-gradient(#fff 60%, #F1F3FC 0%);`
      }
    ">
      <span class="progress-value" >{{item.name}}</span>
      <div class="totalvalbox" >
        {{ item.rate }}%
      </div>
 </div>
<style lang="scss" scoped>
    .progress-circle {
      position: relative;
      width: 149rpx;
      height: 149rpx;
      font-family: PingFang SC;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
	.progress-value {
	    position: absolute;
	    text-align: center;
	    line-height: 50rpx;
	    width: 100%;
	    font-weight: 400;
    	font-size: 26rpx;
     }
	.totalvalbox {
      min-width: 217rpx;
      text-align: center;
      position: absolute;
      bottom: -50rpx;
      font-weight: 400;
      font-size: 30rpx;
    }
</style>

优化问题如下：

  • 这里容易出现的问题如下：
    角向渐变实现圆弧进度条的局限性
    当然，这个方法有两个弊端。
    当然进度百分比不是类似于 0°、90°、180°、270°、360° 这类数字时，使用角向渐变时，不同颜色间的衔接处会有明显的锯齿。
    看个例子 conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)：
    在这里插入图片描述
    遇到此类问题的解决方案是，在衔接处，适当留出一些渐变空间，我们简单的改造一下上述角向渐变代码：
{
  - background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)`
  + background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)`
}

仔细看上面的代码，将从 27% 到 27% 的一个变化，改为了 从 27% 到 27.2%，这多出来的 0.2% 就是为了消除锯齿的，实际改变后的效果：

在这里插入图片描述

  • 我们在有些情况会遇到进度条收尾用圆角的进度条，这种情况当然进度条颜色是纯色也是可以解决的，我们通过在在首尾处叠加两个小圆圈即可实现这种效果。
    如果进度条是渐变色的话，这种进度条则需要借助 SVG/Canvas 实现了

实例如下：
在这里插入图片描述

html

<div class="g-progress"></div>
<div class="g-container">
    <div class="g-progress"></div>
    <div class="g-circle"></div>
</div>

css

body, html {
    width: 100%;
    height: 100%;
    display: flex;
}

.g-container {
    position: relative;
    margin: auto;
    width: 200px;
    height: 200px;
}

.g-progress {
    position: relative;
    margin: auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
    mask: radial-gradient(transparent, transparent 80px, #000 80.5px, #000 0);
}

.g-circle {
    position: absolute;
    top: 0;
    left: 0;
    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 90px;
        left: 90px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #FFCDB2;
        z-index: 1;
    }
    
    &::before {
        transform: translate(0, -90px);
    }
    
    &::after {
        transform: rotate(90deg) translate(0, -90px) ;
    }
}
  • 基于此拓展，还可以实现多色的圆弧型进度条：（这个可能不像进度条，更类似于饼图）
    在这里插入图片描述
.g-progress {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    mask: radial-gradient(transparent, transparent 50%, #000 51%, #000 0);
    background: 
        conic-gradient(
            #FFCDB2 0, #FFCDB2 25%, 
            #B5838D 25%, #B5838D 50%, 
            #673ab7 50%, #673ab7 90%,
            #ff5722 90.2%, #ff5722 100%
        );
}

3，球形进度条效果如下

球形进度条也是比较常见的，类似于下面这种：

在这里插入图片描述
核心代码如下：
控制一下球形容器表示进度 0% - 100% 时的波浪的高度即可。我们就能得到从 0% - 100% 的动画效果

<div class="container">
    <div class="wave-change"></div>
    <div class="wave"></div>
</div>
.container {
    width: 200px;
    height: 200px;
    border: 5px solid rgb(118, 218, 255);
    border-radius: 50%;
    overflow: hidden;
}
.wave-change {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0;
    top: 0;
    animation: change 12s infinite linear;
    
    &::before,
    &::after{
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        top: 0;
        left: 50%;
        background-color: rgba(255, 255, 255, .6);
        border-radius: 45% 47% 43% 46%;
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 7s linear infinite;
        z-index: 1;
    }
    
    &::after {
        border-radius: 47% 42% 46% 44%;
        background-color: rgba(255, 255, 255, .8);
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 9s linear -4s infinite;
        z-index: 2;
    }
}
.wave {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: rgb(118, 218, 255);
    border-radius: 50%;
}

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    color: #000;
    z-index: 10;
}

@keyframes rotate {
   to {
        transform: translate(-50%, -70%) rotate(360deg);
    }
}
@keyframes change {
    from {
        top: 80px;
    }
    to {
        top: -120px;
    }
}

4，炫酷的充电进度条如下

当然，CSS 千变万化，进度条的种类肯定也不仅仅局限于上述的几类。譬如我们可以利用滤镜实现的仿华为手机的充电动画，也是一种进度条的呈现方式，也是能够使用纯 CSS 实现的：

在这里插入图片描述
核心代码如下

<div class="g-container">
    <div class="g-number">98.7%</div>
    <div class="g-contrast">
        <div class="g-circle"></div>
        <ul class="g-bubbles">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>



html,
body {
    width: 100%;
    height: 100%;
    display: flex;
    background: #000;
    overflow: hidden;
}

.g-number {
    position: absolute;
    width: 300px;
    top: 27%;
    text-align: center;
    font-size: 32px;
    z-index: 10;
    color: #fff;
}

.g-container {
    position: relative;
    width: 300px;
    height: 400px;
    margin: auto;
}

.g-contrast {
    filter: contrast(10) hue-rotate(0);
    width: 300px;
    height: 400px;
    background-color: #000;
    overflow: hidden;
    animation: hueRotate 10s infinite linear;
}

.g-circle {
    position: relative;
    width: 300px;
    height: 300px;
    box-sizing: border-box;
    filter: blur(8px);
    
    &::after {
        content: "";
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0);
        width: 200px;
        height: 200px;
        background-color: #00ff6f;
        border-radius: 42% 38% 62% 49% / 45%;
        animation: rotate 10s infinite linear;
    }
    
    &::before {
        content: "";
        position: absolute;
        width: 176px;
        height: 176px;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background-color: #000;
        z-index: 10;
    }
}

.g-bubbles {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100px;
    height: 40px;
    transform: translate(-50%, 0);
    border-radius: 100px 100px 0 0;
    background-color: #00ff6f;
    filter: blur(5px);
}

li {
    position: absolute;
    border-radius: 50%;
    background: #00ff6f;
}

@for $i from 0 through 15 { 
    li:nth-child(#{$i}) {
        $width: 15 + random(15) + px;
        left: 15 + random(70) + px;
        top: 50%;
        transform: translate(-50%, -50%);
        width: $width;
        height: $width;
        animation: moveToTop #{random(6) + 3}s ease-in-out -#{random(5000)/1000}s infinite;
    }
}

@keyframes rotate {
    50% {
        border-radius: 45% / 42% 38% 58% 49%;
    }
    100% {
        transform: translate(-50%, -50%) rotate(720deg);
    }
}

@keyframes moveToTop {
    90% {
        opacity: 1;
    }
    100% {
        opacity: .1;
        transform: translate(-50%, -180px);
    }
}

@keyframes hueRotate {
    100% {
        filter: contrast(15) hue-rotate(360deg);
    }
}

5，拖拽与延伸

最后推荐几款好高质量更为酷炫的进度条

在这里插入图片描述
上述效果的完整实现可以戳 – 巧用 CSS 实现酷炫的充电动画
在这里插入图片描述
效果来源于 CodePen – Bars By Lucagaz。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1940889.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Docker_一刀流_好用、好玩还方便_（持续更新）

Docker_一刀流_好用、好玩还方便_（持续更新）

Docker 简介一、镜像和容器的概念镜像&#xff08;Image&#xff09;容器&#xff08;Container&#xff09;镜像和容器的关系 宿主机二、Dockerfile2.1 什么是Dockerfile2.2 Dockerfile中的常见指令2.3Dockerfile实例2.4 详细扩展 三、镜像3.1 镜像的创建3.2对于镜像的一些常用…
阅读更多...
开放原子校源行 | 湖南大学师生一行赴麒麟信安开展专业见习活动

开放原子校源行 | 湖南大学师生一行赴麒麟信安开展专业见习活动

“开放原子校源行”是开放原子开源基金会作为国家级开源公益平台发起的长期性开源教育推广公益项目。项目拟通过资助高校设立开源社团、推广开源课程、设置开源助学金、引导开源实践等方式培育开源人才&#xff0c;加快将开源文化、理念和技术融入校园&#xff0c;引导广大师生…
阅读更多...
TCP/IP四层模型、OSI七层模型

TCP/IP四层模型、OSI七层模型

OSI定义了网络互连的七层框架&#xff08;物理层、数据链路层、网络层、传输层、会话层、表示层、应用层&#xff09;TCP/IP 四层模型是目前被广泛采用的一种模型&#xff0c;由以下 4 层组成&#xff1a;应用层、传输层、网络层、网络接口层 FTP&#xff08;File Transfer Pro…
阅读更多...
Thinkphp开发文档二次整理版

Thinkphp开发文档二次整理版

基础部分 安装 环境要求 ​ *php>7.1.0 命令下载 通过Composer进行下载&#xff0c;操作步骤下载软件 phpstudy --->点击软件管理 --->安装Composer --->再点击网站 --->点击管理 --->点击Composer --->复制如下命令代码&#xff1a; ​ 稳定版&…
阅读更多...
数据采集卡替代传统仪表的输出功能优势分析

数据采集卡替代传统仪表的输出功能优势分析

在现代工业控制和科学研究中&#xff0c;数据采集卡和传统仪表在信号输出功能上各有其独特的优势。本期视频将对它们在这一方面的特点进行详细对比分析。 1. 多通道和多种信号输出支持 传统仪表&#xff1a;信号输出较为有限&#xff0c;通常只能提供固定的单一类型信号输出接…
阅读更多...
解决 go 引用私有包，安装失败

解决 go 引用私有包，安装失败

问题描述 go mod tidy 或者 go run main.go 时&#xff0c;提示失败&#xff0c;例如 no such host&#xff08;设置GOPRIVATE&#xff09;或者 x509: certificate signed by unknown authority 之类的报错&#xff08;设置GOINSECURE&#xff09; 解决 在各种 insteadof 方…
阅读更多...
Android 消息发布订阅框架：EventBus

Android 消息发布订阅框架：EventBus

目录 1.是什么 2.如何使用 3.五种线程模型 4.Eventbus2和Eventbus3的区别 一、是什么 EventBus是一款发布/订阅事件总线的框架&#xff0c;使用它可以进行模块间通信、解耦。它可以使用很少的代码&#xff0c;来实现多组件之间的通信&#xff0c;非常的方便。 为什么使用它…
阅读更多...
安装caffe-CPU版本并进行训练

安装caffe-CPU版本并进行训练

目录 前言 0、安装Ubuntu 18.04 版本 输入ls没有反应 ubuntu换源 换源出现的问题 1、安装caffe出现E:Unable to locate package caffe-cpu问题 2、把 code 文件夹下载到 ubuntu 3、在本地使用caffe-CPU&#xff0c;并部署数据标注工具 ATool 问题1 问题2 问题3 命令行…
阅读更多...
C语言迷宫

C语言迷宫

目录 开头程序程序的流程图程序输入与输出的效果结尾 开头 大家好&#xff0c;我叫这是我58。今天&#xff0c;我要来看我用C语言编译出来的迷宫游戏。 程序 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <Windows.h> void printmaze(char s…
阅读更多...
计算机网络基础：局域网、广域网及OSI七层模型解析

计算机网络基础：局域网、广域网及OSI七层模型解析

文章目录 一、局域网和广域网1、局域网&#xff08;LAN - Local Area Network&#xff09;2、广域网&#xff08;WAN - Wide Area Network&#xff09;3、对比局域网和广域网 二、OSI七层模型1、OSI的七层网络结构2、OSI的数据传输方式3、网络与操作系统的关系 一、局域网和广域…
阅读更多...
“论系统安全架构设计及其应用”，写作框架，软考高级论文，系统架构设计师论文

“论系统安全架构设计及其应用”，写作框架，软考高级论文，系统架构设计师论文

论文真题 随着社会信息化进程的加快&#xff0c;计算机及网络已经被各行各业广泛应用&#xff0c;信息安全问题也变得愈来愈重要。它具有机密性、完整性、可用性、可控性和不可抵赖性等特征。信息系统的安全保障是以风险和策略为基础&#xff0c;在信息系统的整个生命周期中提…
阅读更多...
【BUG】已解决：error: legacy - install - failure

【BUG】已解决：error: legacy - install - failure

error: legacy - install - failure 目录 error: legacy - install - failure 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身&#xff0c;就职于医疗科技公司&…
阅读更多...
spring-boot 整合 redisson 实现延时队列（文末有彩蛋）

spring-boot 整合 redisson 实现延时队列（文末有彩蛋）

应用场景 通常在一些需要经历一段时间或者到达某个指定时间节点才会执行的功能&#xff0c;比如以下这些场景&#xff1a; 订单超时提醒收货自动确认会议提醒代办事项提醒 为什么使用延时队列 对于数据量小且实时性要求不高的需求来说&#xff0c;最简单的方法就是定时扫描数据…
阅读更多...
sql常见50道查询练习题

sql常见50道查询练习题

sql常见50道查询练习题 1. 表创建1.1 表创建1.2 数据插入 2. 简单查询例题(3题&#xff09;2.1 查询"李"姓老师的数量2.2 查询男生、女生人数2.3 查询名字中含有"风"字的学生信息 3. 日期相关例题(6题&#xff09;3.1 查询各学生的年龄3.2 查询本周过生日的…
阅读更多...
73、Flink 的 DataStream API 生产实践总结

73、Flink 的 DataStream API 生产实践总结

0、汇总 1.可以使用 Maven 命令、CURL 命令、IDEA 手动创建 Flink 项目&#xff1b;2.可以使用 Maven Shade 插件将必需的依赖项打包进应用程序 jar 中&#xff1b;3.应该在 Flink 集群的 lib 文件夹内配置需要的&#xff08;核心&#xff09;依赖项&#xff1b;4.应该将程序中…
阅读更多...
探索球形气膜的独特魅力：移动性与经济性的结合—轻空间

探索球形气膜的独特魅力：移动性与经济性的结合—轻空间

球形气膜结构因其独特的设计和多功能性而备受青睐。它不仅在空间利用方面有着显著优势&#xff0c;还展现出出色的移动性和经济性。以下是球形气膜的关键特点&#xff1a; 灵活的移动性 球形气膜以其轻便且易于移动的特性而闻名。这种结构设计使得气膜可以在不同场地之间快速组…
阅读更多...
测试管理工具、自动化测试工具、跨浏览器测试工具 推荐

测试管理工具、自动化测试工具、跨浏览器测试工具 推荐

测试管理工具 1&#xff09;Xray Xray 是排名第一的手动与自动化测试管理应用&#xff0c;专为质量保证而设计。它是一个功能齐全的工具&#xff0c;能够无缝集成于 Jira 中。其目的是通过有效和高效的测试帮助公司提高产品质量。 功能特点&#xff1a; 需求、测试、缺陷和执…
阅读更多...
Docker核心技术：容器技术要解决哪些问题

Docker核心技术：容器技术要解决哪些问题

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 Docker核心技术 系列文章&#xff1a;容器技术要解决哪些问题&#xff0c;其他文章快捷链接如下&#xff1a; 应用架构演进容器技术要解决哪些问题&#xff08;本文&#xff09;Docker的基本使用Docker是如何实…
阅读更多...
MySQL学习记录 —— 이십삼 MySQL服务器文件系统（3）

MySQL学习记录 —— 이십삼 MySQL服务器文件系统（3）

文章目录 1、数据字典2、系统表各种系统表 Mysql Schema是⼀个系统库&#xff0c;表中存储了MySQL服务器运行时所需的信息。广义上&#xff0c;mysql schema包含存储MySQL程序基本数据的数据字典和用于其他操作目的的系统表。数据字典表和系统表位于数据目录下一个名为mysql.ib…
阅读更多...
Spring-Aop源码解析(二)

Spring-Aop源码解析(二)

书接上文&#xff0c;上文说到&#xff0c;specificInterceptors 不为空则执行createProxy方法创建代理对象&#xff0c;即下图的createProxy方法开始执行&#xff0c;生成代理对象&#xff0c;生成代理对象有两种方式&#xff0c;JDK和CGLIB。 createAopProxy就是决定使用哪…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023