服务器之家

服务器之家 > 正文

仅仅使用 HTML/CSS 实现进度条的 N 种方式

时间:2021-11-02 23:28     来源/作者:iCSS前端趣闻

仅仅使用 HTML/CSS 实现进度条的 N 种方式

Hello 大家好,我是 Coco,今天给大家带来有关 HTML/CSS 实现进度条的各种~

本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式,通过本文,你可能可以学会:

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

进度条,是我们日常界面中使用的非常多的一种,下面我们来看看。到今天,我们可以如何实现进度条。

HTML 标签 -- meter & progress

这个可能是一些同学还不太清楚的,HTML5 原生提供了两个标签 来实现进度条。

  • :用来显示已知范围的标量值或者分数值
  • :用来显示一项任务的完成进度,通常情况下,该元素都显示为一个进度条

我们分别来看看,首先是标签:

  1. 完成度:
  2. min="0"max="500"value="350">350degrees

  1. meter{
  2. width:200px;
  3. }

样式如下:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

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

无独有偶,我们再来看看 标签的用法:

  1. for="file">完成度:
  2. max="100"value="70">70%

  1. progress{
  2. width:200px;
  3. }

样式如下:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

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

meter & progress 之间的差异

那么问题来了,从上述 Demo 看,两个标签的效果一模一样,那么它们的区别是什么?为什么会有两个看似一样的标签呢?

这两个元素最大的差异在于语义上的差别。

  • :表示已知范围内的标量测量值或分数值
  • :表示任务的完成进度

譬如,一个需求当前的完成度,应该使用 ,而如果要展示汽车仪表盘当前的速度值,应该使用 meter。

meter & progress 的局限性

当然,在实际的业务需求中,或者生产环境,你几乎是不会看到 标签。

和我们在这篇文章中 -- 《利用 datalist 实现可过滤下拉选框》[1] 讲到的原因类似,在于:

1.我们无法有效的修改 标签的样式,譬如背景色,进度前景色等。并且,最为致命的是,浏览器默认样式的表现在不同浏览器之间并不一致。这给追求稳定,UI 表现一致的业务来说,是灾难性的缺点!

2.我们无法给他添加一些动画效果、交互效果,因为一些实际的应用场景中,肯定不是简单的展示一个进度条仅此而已

利用 CSS 实现进度条

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

使用百分比实现进度条

最为常见的一种方式是使用背景色配合百分比的方式制作进度条。

最简单的一个 DEMO:

  1. "g-container">
  2. "g-progress">
  1. .g-container{
  2. width:240px;
  3. height:25px;
  4. border-radius:25px;
  5. background:#eee;
  6. }
  7. .g-progress{
  8. width:50%;
  9. height:inherit;
  10. border-radius:25px0025px;
  11. background:#0f0;
  12. }

效果如下:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

这种方式优势在于使用简单,实际进度可以非常方便的传递进 CSS 中

1.利用 HTML style 属性填写完整的 width 值,譬如


2. 或者利用 CSS 自定义属性
配合实际 CSS 中的 width: var(--progress)

3.完全的自定义样式,以及可以轻松的添加辅助丰富的动画和交互效果

譬如给 g-progress 添加一个过渡效果:

  1. .g-progress{
  2. //...
  3. transition:width.2slinear;
  4. }

这样,每次进度变化,都是一个动态的过渡过程:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

或者,渐变前景色,修改 background: #0f0 为 background: linear-gradient(90deg, #0f0, #0ff):

仅仅使用 HTML/CSS 实现进度条的 N 种方式

单标签使用渐变实现

当然,可以看到,我们上面使用的是两个标签的结构:

  1. "g-container">
  2. "g-progress">

抠门点,我们还可以仅仅利用一个标签去完成这个事情,主要借助了渐变去完成这个事情:

  1. "g-progress">
  1. .g-progress{
  2. width:240px;
  3. height:25px;
  4. border-radius:25px;
  5. background:linear-gradient(90deg,#0f0,#0ff70%,transparent0);
  6. border:1pxsolid#eee;
  7. }

结果如下:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

同样的,我们可以利用 HTML style 属性填写完整的 background 值传递实际百分比,当然,这里更推荐使用 CSS 自定义属性传值:

  1. "g-progress"style="--progress:50%">
  1. .g-progress{
  2. background:linear-gradient(90deg,#0f0,#0ffvar(--progress),transparent0);
  3. }

熟悉 CSS 的同学会发现一个目前这种方式的弊端,在于当修改 --progress 的值的时候,即便给 .g-progress 添加了 transition,也不会有过渡动画效果。

原因在于,CSS 中,渐变(诸如 linear-gradinet、radial-gradient、conic-gradient)都是不支持过渡变换的。

所以,在这里,为了实现动画效果,我们可以借助 CSS @property,改造下我们的代码:

  1. "g-progress"style="--progress:70%">


  1. @property--progress{
  2. syntax:'';
  3. inherits:false;
  4. initial-value:0%;
  5. }
  6. .g-progress{
  7. margin:auto;
  8. width:240px;
  9. height:25px;
  10. border-radius:25px;
  11. background:linear-gradient(90deg,#0f0,#0ffvar(--progress),transparent0);
  12. border:1pxsolid#eee;
  13. transition:.3s--progress;
  14. }

借助 CSS @property 的特性,我们在单标签下也是可以实现动画效果的:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

CodePen Demo -- 单标签的进度条效果[2]

对 CSS @property 还不了解的,可以看看我的这篇文章 -- CSS @property,让不可能变可能[3]

圆弧形进度条

当然,进度条不可能只有直线型的。还有非常多其他类型的,下面我们首先来看看圆弧型的进度条。

在今天,我们可以使用 CSS 快速的创建圆弧形式的进度条,类似于这样:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

核心就是使用角向渐变 background: conic-gradient():

  1. "g-progress">
  1. .g-progress{
  2. width:160px;
  3. height:160px;
  4. border-radius:50%;
  5. background:conic-gradient(#FFCDB20,#FFCDB225%,#B5838D25%,#B5838D);
  6. }

利用角向渐变 background: conic-gradient(),我们可以轻松实现这样一个饼图:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

接下来就是镂空中间部分。

传统的想法是,在中间叠加一个圆,然而,这样做的一个极大的弊端在于,如果我们的背景不是纯色而是渐变色,就不适用了,譬如这样:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

那么如何镂空中间,使得中间部分透明呢?这里我们可以巧妙的通过 mask 属性达到目的,镂空中间:

  1. .g-progress{
  2. background:conic-gradient(#FFCDB20,#FFCDB225%,#B5838D25%,#B5838D);
  3. +mask:radial-gradient(transparent,transparent50%,#00050%,#0000);
  4. }

这样,我们就轻松的镂空了中间,即便背景不是纯色也无妨。

仅仅使用 HTML/CSS 实现进度条的 N 种方式

CodePen Demo - 角向渐变实现圆弧形进度条[4]

基于此拓展,还可以实现多色的圆弧型进度条:

  1. .g-progress{
  2. width:160px;
  3. height:160px;
  4. border-radius:50%;
  5. mask:radial-gradient(transparent,transparent50%,#00051%,#0000);
  6. background:
  7. conic-gradient(
  8. #FFCDB20,#FFCDB225%,
  9. #B5838D25%,#B5838D50%,
  10. #673ab750%,#673ab790%,
  11. #ff572290.2%,#ff5722100%
  12. );
  13. }

当然,这个可能不像进度条,更类似于饼图?

仅仅使用 HTML/CSS 实现进度条的 N 种方式

角向渐变实现圆弧进度条的局限性

当然,这个方法有两个弊端。

当然进度百分比不是类似于 0°、90°、180°、270°、360° 这类数字时,使用角向渐变时,不同颜色间的衔接处会有明显的锯齿。

看个例子 conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D):

仅仅使用 HTML/CSS 实现进度条的 N 种方式

遇到此类问题的解决方案是,在衔接处,适当留出一些渐变空间,我们简单的改造一下上述角向渐变代码:

  1. {
  2. -background:conic-gradient(#FFCDB20,#FFCDB227%,#B5838D27%,#B5838D)`
  3. +background:conic-gradient(#FFCDB20,#FFCDB227%,#B5838D27.2%,#B5838D)`
  4. }

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

仅仅使用 HTML/CSS 实现进度条的 N 种方式

具体使用的使用,可以多调试选取既不会看出模糊,又能尽可能消除锯齿的一个范围幅度。

对于开头和结尾需要圆形的圆弧进度条实现起来较为麻烦

还有一种情况,实际使用中,要求的是首尾带圆形的圆弧进度条,例如下图所示:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

当然,这种情况当然进度条颜色是纯色也是可以解决的,我们通过在在首尾处叠加两个小圆圈即可实现这种效果。

如果进度条是渐变色的话,这种进度条则需要借助 SVG/Canvas 实现了。

上述完整的带圆角的圆弧进度条,你可以戳这里看完整源码 -- CodePen Demo -- 首尾为圆形的圆弧进度条[5]

球形进度条

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

仅仅使用 HTML/CSS 实现进度条的 N 种方式

对于球形进度条,其实核心在于使用 CSS 实现中间部分的波浪效果。

这个技巧到今天应该已经被大伙熟知了,就不过多赘述,一图胜千言,可以使用滚动大圆的方式,类似于这样:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

容器应用 overflow: hidden,就能得到这样的效果:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

对这个技巧还不理解,可以猛击这篇文章:纯 CSS 实现波浪效果![6]

应用这个技巧,只需要简单的封装,控制一下球形容器表示进度 0% - 100% 时的波浪的高度即可。我们就能得到从 0% - 100% 的动画效果。

完整的代码大概如下:

  1. "container">
  2. "wave-change">
  3. "wave">
  1. .container{
  2. width:200px;
  3. height:200px;
  4. border:5pxsolidrgb(118,218,255);
  5. border-radius:50%;
  6. overflow:hidden;
  7. }
  8. .wave-change{
  9. position:absolute;
  10. width:200px;
  11. height:200px;
  12. left:0;
  13. top:0;
  14. animation:change12sinfinitelinear;
  15. &::before,
  16. &::after{
  17. content:"";
  18. position:absolute;
  19. width:400px;
  20. height:400px;
  21. top:0;
  22. left:50%;
  23. background-color:rgba(255,255,255,.6);
  24. border-radius:45%47%43%46%;
  25. transform:translate(-50%,-70%)rotate(0);
  26. animation:rotate7slinearinfinite;
  27. z-index:1;
  28. }
  29. &::after{
  30. border-radius:47%42%46%44%;
  31. background-color:rgba(255,255,255,.8);
  32. transform:translate(-50%,-70%)rotate(0);
  33. animation:rotate9slinear-4sinfinite;
  34. z-index:2;
  35. }
  36. }
  37. .wave{
  38. position:relative;
  39. width:200px;
  40. height:200px;
  41. background-color:rgb(118,218,255);
  42. border-radius:50%;
  43. }
  44. p{
  45. position:absolute;
  46. top:50%;
  47. left:50%;
  48. transform:translate(-50%,-50%);
  49. font-size:36px;
  50. color:#000;
  51. z-index:10;
  52. }
  53. @keyframesrotate{
  54. to{
  55. transform:translate(-50%,-70%)rotate(360deg);
  56. }
  57. }
  58. @keyframeschange{
  59. from{
  60. top:80px;
  61. }
  62. to{
  63. top:-120px;
  64. }
  65. }

仅仅使用 HTML/CSS 实现进度条的 N 种方式

完整的代码示例,你可以戳这里:

  • CodePen Demo -- Pure Css Wave Progress bar[7]
  • CodePen Demo -- Pure Css Wave Progress bar Animation[8]

3D 进度条

嗯,下面这个 3D 进度条需要对 CSS 3D 有基本的掌握。

你可以先看看这篇文章 -- 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画?[9]

它主要是借助了一个 3D 立方体。接下来我们来实现一个立方体进度条~

首先,实现一个立方体,结构如下:

  1. "demo-cubeperspective">
  2. "cube">
  3. "top">
  4. "bottom">
  5. "front">
  6. "back">
  7. "right">
  8. "left">

仅仅使用 HTML/CSS 实现进度条的 N 种方式

我们可以把这个立方体想象成一个立体的进度条容器,通过控制 6 面的颜色,我们可以巧妙的得到一种 3D 进度条效果。

当然,其实我们不需要那么多面,4 个面即可,去掉左右,然后利用渐变修改一下立方体各个面的颜色,去掉 border,核心的 CSS 代码如下:

  1. .demo-cube{
  2. position:relative;
  3. .cube{
  4. position:absolute;
  5. top:50%;
  6. left:50%;
  7. width:300px;
  8. height:100px;
  9. transform-style:preserve-3d;
  10. transform:translate(-50%,-50%)rotateX(-33.5deg);
  11. li{
  12. position:absolute;
  13. width:300px;
  14. height:100px;
  15. background:linear-gradient(90deg,rgba(156,39,176,.3),rgba(255,34,109,.8)70%,rgba(255,255,255,.6)70%,rgba(255,255,255,.6));
  16. }
  17. .top{
  18. transform:rotateX(90deg)translateZ(50px);
  19. }
  20. .bottom{
  21. transform:rotateX(-90deg)translateZ(50px);
  22. }
  23. .front{
  24. transform:translateZ(50px);
  25. }
  26. .back{
  27. transform:rotateX(-180deg)translateZ(50px);
  28. }
  29. }
  30. }

我们就可以得到一个非常酷炫的 3D 进度条效果:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

利用 CSS Property 给 3D 进度条加上动画

当然,进度条嘛,它需要一个填充动画。由于我们使用的是渐变实现的进度条的进度,需要去控制其中的颜色百分比变化。

而正常而言,CSS 是不支持渐变的动画的,不过这也难不倒我们,因为我们可以使用 CSS @Property 。

简单改造一下代码:


  1. @property--per{
  2. syntax:'';
  3. inherits:false;
  4. initial-value:0%;
  5. }
  6. .demo-cube.cube{
  7. .top,
  8. .front,
  9. .bottom,
  10. .back{
  11. background:linear-gradient(90deg,rgba(255,217,34,.6),rgba(255,34,109,.8)var(--per),rgba(255,34,109,.1)var(--per),rgba(255,34,109,.1));
  12. animation:perChange6sinfinite;
  13. }
  14. }
  15. @keyframesperChange{
  16. 0%{
  17. --per:0%;
  18. }
  19. 90%,
  20. to{
  21. --per:80%;
  22. }
  23. }

这样,我们就实现了一个会动的 3D 进度条,只需要控制 --per CSS 自定义属性即可,效果如下:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

对于 CSS @Property 不算很了解的,可以看看作者的这篇文章 -- CSS @property,让不可能变可能[10],它的出现,让 CSS 极大的提升了制作各种动画的能力。

上述的完整代码,你可以猛击这里:CSS 灵感 -- 3D 立方体进度条[11]

扩展延伸

本文从简到繁介绍了使用 HTML/CSS 逐步构建进度条的方式,并且逐渐加深了难度。

当然,随着难度的提升,得到的是更为酷炫的进度条。

基于上述的方法介绍,基本可以演化出各种我们需要的进度条。譬如基于上述的方法,可以实现一个简单的电池充电动画:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

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

仅仅使用 HTML/CSS 实现进度条的 N 种方式

上述效果的完整实现可以戳 -- 巧用 CSS 实现酷炫的充电动画[12]

又或者,我们可以在进度条的纹理上做文章:

仅仅使用 HTML/CSS 实现进度条的 N 种方式

效果来源于 CodePen -- Bars By Lucagaz[13]。

总而言之,CSS 美好世界值得我们去探索。

最后

好了,本文到此结束,希望本文对你有所帮助 :)

参考资料

[1]《利用 datalist 实现可过滤下拉选框》:

https://github.com/chokcoco/cnblogsArticle/issues/30

[2]CodePen Demo -- 单标签的进度条效果:

https://codepen.io/pen/

[3]CSS @property,让不可能变可能:

https://github.com/chokcoco/iCSS/issues/109

[4]CodePen Demo - 角向渐变实现圆弧形进度条:

https://codepen.io/Chokcoco/pen/oNewMLy

[5]CodePen Demo -- 首尾为圆形的圆弧进度条:

https://codepen.io/Chokcoco/pen/VwzzVEV

[6]纯 CSS 实现波浪效果!:

https://github.com/chokcoco/iCSS/issues/22

[7]CodePen Demo -- Pure Css Wave Progress bar:

https://codepen.io/Chokcoco/pen/EXJrdB

[8]CodePen Demo -- Pure Css Wave Progress bar Animation:

https://codepen.io/Chokcoco/pen/rNzGbWY

[9]奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画?:

https://github.com/chokcoco/iCSS/issues/132

[10]CSS @property,让不可能变可能:

https://github.com/chokcoco/iCSS/issues/109

[11]CSS 灵感 -- 3D 立方体进度条:

https://csscoco.com/inspiration/#/./3d/3d-cuber-progress-bar

[12]巧用 CSS 实现酷炫的充电动画:

https://github.com/chokcoco/iCSS/issues/75

[13]CodePen -- Bars By Lucagaz:

https://codepen.io/lucagez/pen/ReMLVV

原文链接:https://mp.weixin.qq.com/s/jkGbnaWJd8iJVCouUNbG9Q

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部