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

需求：我们在开发中会遇到使用各式各样的进度条，因为当前插件里面进度条各式各样的，为了方便我们定制化的开发和方便修改样式，我们这里使用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.mfbz.cn/a/843580.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【YOLOv10[基础]】热力图可视化实践② | 支持图像热力图 | 论文必备

【YOLOv10[基础]】热力图可视化实践② | 支持图像热力图 | 论文必备

本文将进行添加YOLOv10版本的热力图可视化功能的实践，支持图像热力图可视化。 目录 一 热力图可视化实践① 1 代码 2 效果图 二 报错处理 在论文中经常可以见到提取的物体特征以热力图的形式展示出来，将特征图以热力图的方式进行可视化在深度学习中有以下的原因： ①强调…
阅读更多...
0711springNews新闻系统管理 实现多级评论

0711springNews新闻系统管理 实现多级评论

0611springmvc新闻系统管理-CSDN博客 0711springNews新闻系统管理项目包 实现多级评论-CSDN博客 数据库字段 需要添加父节点id&#xff0c;通过该字段实现父评论和子评论的关联关系。 对象属性 实现链表&#xff0c;通过一个父评论可以找到它对应的所有子孙评论。 业务层 实现…
阅读更多...
像乌鸦一样思考01_玻璃杯罩住的高低蜡烛谁先灭？

像乌鸦一样思考01_玻璃杯罩住的高低蜡烛谁先灭？

大致场景 大致原理 蜡烛燃烧需要氧气&#xff0c;同时会释放二氧化碳但蜡烛燃烧特定场景下&#xff0c;释放的二氧化碳温度很高&#xff0c;密度比空气底所以就会有上传的趋势(水高温变成水蒸气也是会往上升的)持续的燃烧&#xff0c;二氧化碳不停的往上聚集&#xff0c;最终高…
阅读更多...
全国区块链职业技能大赛国赛考题前端功能开发

全国区块链职业技能大赛国赛考题前端功能开发

任务3-1：区块链应用前端功能开发 1．请基于前端系统的开发模板，在登录组件login.js、组件管理文件components.js中添加对应的逻辑代码，实现对前端的角色选择功能，并测试功能完整性，示例页面如下： 具体要求如下： （1）有明确的提示，提示用户选择角色； （2）用户可看…
阅读更多...
excel系列(三) - 利用 easyexcel 快速实现 excel 文件导入导出

excel系列(三) - 利用 easyexcel 快速实现 excel 文件导入导出

一、介绍 在上篇文章中&#xff0c;我们介绍了 easypoi 工具实现 excel 文件的导入导出。 本篇我们继续深入介绍另一款更优秀的 excel 工具库&#xff1a;easyexcel 。 二、easyexcel easyexcel 是阿里巴巴开源的一款 excel 解析工具&#xff0c;底层逻辑也是基于 apache p…
阅读更多...
自动化产线 搭配数据采集监控平台 创新与突破

自动化产线 搭配数据采集监控平台 创新与突破

自动化产线在现在的各行各业中应用广泛&#xff0c;已经是现在的生产趋势&#xff0c;不同的自动化生产设备充斥在各行各业中&#xff0c;自动化的设备会产生很多的数据&#xff0c;这些数据如何更科学化的管理&#xff0c;更优质的利用&#xff0c;就需要数据采集监控平台来完…
阅读更多...
【Vue】深入了解 Vue 的 DOM 操作：从基本渲染到高级操作的全面指南

【Vue】深入了解 Vue 的 DOM 操作：从基本渲染到高级操作的全面指南

文章目录 一、Vue 中的基本 DOM 渲染1. 响应式数据2. 虚拟 DOM 二、数据绑定与指令1. v-bind2. v-model3. v-show 与 v-if4. v-for 三、与 DOM 相关的生命周期钩子1. mounted 钩子2. updated 钩子 四、动态样式与类1. 动态样式2. 动态类 五、Vue 3 中的新的 DOM 操作 API1. ref…
阅读更多...
某4G区域终端有时驻留弱信号小区分析

某4G区域终端有时驻留弱信号小区分析

这些区域其实是长时间处于连接态的电信卡4G终端更容易出现。 出现问题时都是band1 100频点下发了针对弱信号的1650频点的连接态A4测量事件配置&#xff08;其阈值为-106&#xff09;。而这个条件很容易满足&#xff0c;一旦下发就会切到band3 1650频点。 而1650频点虽然下发ban…
阅读更多...
文献解读-液体活检-第二十期|《连续循环肿瘤DNA检测可预测肝癌患者早期复发：一项前瞻性研究》

文献解读-液体活检-第二十期|《连续循环肿瘤DNA检测可预测肝癌患者早期复发：一项前瞻性研究》

关键词&#xff1a;液体活检&#xff1b;基因测序&#xff1b;变异检测&#xff1b; 文献简介 标题&#xff08;英文&#xff09;&#xff1a;Serial circulating tumor DNA to predict early recurrence in patients with hepatocellular carcinoma: a prospective study标题…
阅读更多...
uniapp判断h5/微信小程序/app端+实战展示

uniapp判断h5/微信小程序/app端+实战展示

文章目录 导文使用条件编译的基本语法常见的平台标识符示例实战展示使用场景举例注意事项 导文 这里是导文 当你在开发Uni-app时&#xff0c;需要根据不同的平台&#xff08;比如App端、H5端、微信小程序等&#xff09;来执行不同的代码逻辑&#xff0c;可以使用条件编译来实现…
阅读更多...
[PM]数据分析

[PM]数据分析

概览 数据的定义 运营数据 分析的目的 数据分析流程 1.明确目标 2.数据来源 3.采集数据 4.数据整理 5.数据分析 趋势分析 当数据出现异常&#xff0c;一般从3个角度去查找问题&#xff1a; 1.技术层面&#xff0c;是不统计出错&#xff0c;或者产品出现bug 工 2.产品层面&am…
阅读更多...
SCI一区级 | Matlab实现SSA-CNN-GRU-Multihead-Attention多变量时间序列预测

SCI一区级 | Matlab实现SSA-CNN-GRU-Multihead-Attention多变量时间序列预测

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.【SCI一区级】Matlab实现SSA-CNN-GRU-Multihead-Attention麻雀算法优化卷积门控循环单元融合多头注意力机制多变量时间序列预测&#xff0c;要求Matlab2023版以上&#xff1b; 2.输入多个特征&#xff0c;输出单个…
阅读更多...
Navicat 17 for Mac 数据库管理软件

Navicat 17 for Mac 数据库管理软件

Mac分享吧 文章目录 效果一、准备工作二、开始安装1. 双击运行软件&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕。2. 应用程序/启动台显示Navicat图标&#xff0c;表示安装成功。 二、运行测试运行后提示&#xff1a;“Navicat Premium.pp”已损坏&#x…
阅读更多...
实战打靶集锦-31-monitoring

实战打靶集锦-31-monitoring

文章目录 1. 主机发现2. 端口扫描3. 服务枚举4. 服务探查4.1 ssh服务4.2 smtp服务4.3 http/https服务 5. 系统提权5.1 枚举系统信息5.2 枚举passwd文件5.3 枚举定时任务5.4 linpeas提权 6. 获取flag 靶机地址&#xff1a;https://download.vulnhub.com/monitoring/Monitoring.o…
阅读更多...
网络安全常用易混术语定义与解读（Top 20）

网络安全常用易混术语定义与解读（Top 20）

没有网络安全就没有国家安全&#xff0c;网络安全已成为每个人都重视的话题。随着技术的飞速发展&#xff0c;各种网络攻击手段层出不穷&#xff0c;保护个人和企业的信息安全显得尤为重要。然而&#xff0c;在这个复杂的领域中&#xff0c;许多专业术语往往让人感到困惑。为了…
阅读更多...
嵌入式人工智能（10-基于树莓派4B的DS1302实时时钟RTC）

嵌入式人工智能（10-基于树莓派4B的DS1302实时时钟RTC）

1、实时时钟&#xff08;Real Time Clock&#xff09; RTC&#xff0c;全称为实时时钟&#xff08;Real Time Clock&#xff09;&#xff0c;是一种能够提供实时时间信息的电子设备。RTC通常包括一个计时器和一个能够记录日期和时间的电池。它可以独立于主控芯片工作&#xff…
阅读更多...
飞睿智能毫米波雷达静止目标识别，酒店智能灯控人体感应传感器，呼吸探测感应器

飞睿智能毫米波雷达静止目标识别，酒店智能灯控人体感应传感器，呼吸探测感应器

在这个日新月异的智能时代&#xff0c;科技的每一次跃进都在悄然改变着我们的生活。今天&#xff0c;让我们一同探索一项前沿技术——飞睿智能毫米波雷达在酒店智能灯控领域的创新应用&#xff0c;它如何以“呼吸探测”这一微妙而精准的方式&#xff0c;重新定义酒店住宿的舒适…
阅读更多...
给定一整数数组，其中有p种数出现了奇数次，其他数都出现了偶数次，怎么找到这p个数？

给定一整数数组，其中有p种数出现了奇数次，其他数都出现了偶数次，怎么找到这p个数？

给定一长度为m的整数数组 &#xff0c;其中有p种不为0的数出现了奇数次&#xff0c;其他数都出现了偶数次&#xff0c;找到这p个数。 要求&#xff1a;时间复杂度不大于O(n)&#xff0c;空间复杂度不大于O(1)。 由于时间复杂度不大于O(n)&#xff0c;则不能在遍历数组中嵌套遍…
阅读更多...
level 6 day2-3 网络基础2---TCP编程

level 6 day2-3 网络基础2---TCP编程

1.socket&#xff08;三种套接字&#xff1a;认真看&#xff09; 套接字就是在这个应用空间和内核空间的一个接口&#xff0c;如下图 原始套接字可以从应用层直接访问到网络层&#xff0c;跳过了传输层&#xff0c;比如在ubtan里面直接ping 一个ip地址,他没有经过TCP或者UDP的数…
阅读更多...
vscode 文件颜色变绿色

vscode 文件颜色变绿色

解决&#xff1a;关闭git功能 在设置中搜索Git:Enabled&#xff0c;取消Decorations: Enabled的勾选
阅读更多...
最新文章

Copyright @ 2022~2023