当前位置： 首页 > 科技观察

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

时间：2023-03-13 07:45:47 科技观察

仅使用HTML/CSS实现进度条的N种方法通过本文，您或许可以了解到：基本进度条和花式进度条及其动画方法：通过HTML标签创建进度条通过HTML标签HTML实现进度条的局限性使用CSSpercentages,Gradient创建普通进度条及其动画使用CSS创建圆形进度条使用CSS创建球形进度条使用CSS创建3D进度条bar进度条是我们日常界面中很常见的一种，一起来看看吧。截至今天，我们如何实现进度条。HTML标签--meter&progress这个可能有的同学不清楚。HTML5原生提供了和两个标签来实现进度条。：用于显示已知范围内的标量值或分数值。：用于显示任务的进度。通常，此元素显示为进度条。我们分别来看一下。首先是标签：

Completion:350degrees

meter{width:200px;}样式如下：其中min、max、value分别代表最大值、最小值和当前值。巧合的是，我们来看看标签的用法：

Completion:70%

progress{width:200px;}的样式如下：其中max属性描述progress元素所代表的任务需要完成多少工作，value属性用于指定完成工作的进度条。meter&progress的区别那么问题来了。从上面的Demo来看，这两个标签的效果是完全一样的，那么它们有什么区别呢？为什么会有两个标签看起来是一样的？这两个元素最大的不同在于语义上的不同。：表示一个已知范围内的标量测量值或分数值：表示任务的完成进度。比如当前完成一个需求应该使用，如果要显示汽车仪表盘值当前的速度，应该使用meter。meter&progress的局限性当然，在实际业务需求或者生产环境中，你几乎不会看到和标签。类似于我们在这篇文章中提到的原因——《利用 datalist 实现可过滤下拉选框》[1]，它们是：1、我们无法有效修改和标签的样式，比如背景色、进度前景色等。而且，最致命的是浏览器默认样式的表现在不同的浏览器之间是不一致的。这对于追求稳定和一致的UI性能的企业来说是灾难性的短板！2.我们不能给它加上一些动画效果和交互效果，因为在一些实际的应用场景中，它肯定不是简单的一个进度条的展示，仅此而已。使用CSS实现进度条。因此，在这个阶段，更多的是使用一些CSS的方式来实现进度条。使用百分比来实现进度条的一种最常见的方法是使用背景颜色来匹配百分??比来制作进度条。最简单的DEMO：
.g-container{width:240px;height:25px;border-radius:25px;background:#eee;}.g-progress{width:50%;height:inherit;border-radius:25px0025px;background:#0f0;}效果如下：这种方式的好处是简单易用，而实际的进度可以很方便的传入css1.使用html的style属性填写完整的width值，比如
2。或者使用CSS自定义属性
配合实际CSS中的宽度：var(--progress)3.完全自定义样式，并且可以很方便的添加辅助丰富的Animation和交互效果，比如给g-progress添加一个过渡效果：.g-progress{//...transition:width.2slinear;}这样，每次progress变化时，是一个动态的过渡过程：或者说，在渐变Scenery之前，将background:#0f0改为background:linear-gradient(90deg,#0f0,#0ff):singlelabelusesgradientimplementation当然可以看到我们使用了上面两个label的结构：比较吝啬，我们也可以只用一个label来实现，主要是借助help梯度：.g-progress{width:240px;height:25px;border-radius:25px;background:linear-gradient(90deg,#0f0,#0ff70%,transparent0);border:1pxsolid#eee;}结果如下：同样的，我们可以使用HTML样式属性填写完整的背景值来传实际的百分比，当然推荐使用CSS自定义属性传值：.g-progress{background:linear-gradient(90deg,#0f0,#0ffvar(--progress),transparent0);}熟悉的同学withCSS会发现当前方法的一个缺点，原因是在修改--progress的值时，即使在.g-progress中加入了transition，也不会出现transition动画效果。原因是在CSS中,gradients（比如linear-gradinet,radial-gradient,conic-gradient）都是不支持的Transition变换。所以，这里，为了实现动画效果，我们可以借助CSS@property改造我们的代码：@property--progress{syntax:'';inherits:false;initial-value:0%;}.g-progress{margin:auto;width:240px;height:25px;border-radius:25px;background:linear-gradient(90deg,#0f0,#0ffvar(--progress),transparent0);border:1pxsolid#eee;transition:.3s--progress;}借助css@property，我们也可以实现单个下的动画效果label:CodePenDemo--单标签进度条效果[2]如果你还不知道CSS@property，可以看我的文章--CSS@property，把不可能变为可能[3]弧形进度条的当然，进度条不能只有线性的。还有很多其他类型，我们先来看看弧形进度条。今天，我们可以使用CSS快速创建一个圆弧形式的进度条，类似这样：核心是使用角度渐变背景：conic-gradient():.g-progress{width:160px;height:160px;border-radius:50%;background:conic-gradient(#FFCDB20,#FFCDB225%,#B5838D25%,#B5838D);}使用角度渐变背景：圆锥-gradient()，我们可以轻松实现这样的饼图：下一步就是把中间部分挖空。传统的想法是在中间叠加一个圆圈。但是这样做的一个很大的缺点就是如果我们的背景不是纯色而是渐变色的话就不适用了。比如：中间怎么挖空，让中间部分透明呢？这里我们可以巧妙的通过mask属性达到目的，挖空中间：transparent,transparent50%,#00050%,#0000);}这样我们就可以轻松的把中间挖空，即使背景不是纯色。CodePenDemo-AngularGradient实现圆形进度条[4]基于这个扩展，也可以实现多色圆形进度条：.g-progress{width:160px;height:160px;border-radius:50%;mask:径向渐变（透明、透明50%、#00051%、#0000）；背景：圆锥渐变（#FFCDB20、#FFCDB225%、#B5838D25%、#B5838D50%、#673ab750%、#673ab790%、#ff572290.2%,#ff5722100%);}当然这个可能不像进度条，更像饼图？角度渐变实现圆弧进度条的局限性当然，这种方法有两个缺点。当然，当进度百分比不是0°、90°、180°、270°、360°等数字时，使用角度渐变时，不同颜色之间会出现明显的锯齿状边缘。看一个例子conic-gradient(#FFCDB20,#FFCDB227%,#B5838D27%,#B5838D):这种问题的解决方法是在连接处留一些梯度空间，我们简单的变换一下看看上面的角度梯度代码：{-background:conic-gradient(#FFCDB20,#FFCDB227%,#B5838D27%,#B5838D)`+background:conic-gradient(#FFCDB20,#FFCDB227%,#B5838D27.2%,#B5838D)`}仔细看上面的代码，把变化从27%到27%改成27%到27.2%。额外的0.2%用于抗锯齿。更改后的实际效果：具体使用的话，可以调试选择一个既看不到模糊，又能尽可能消除走样的范围。首尾需要圆弧的弧形进度条实现起来比较麻烦。实际使用中，需要首尾带圆圈的弧形进度条，例如下图：是纯色。我们可以通过在首尾叠加两个小圆圈来实现这种效果。如果进度条是渐变色，这种进度条需要借助SVG/Canvas来实现。上面提到的圆角完整弧形进度条，可以点这里查看完整源码--CodePenDemo--圆弧形进度条起点和终点[5]SphericalprogressbarSphericalprogressbar也是相对的常见的，类似下面的：对于球形进度条，核心是用CSS实现中间的波浪效果。这个技巧今天大家应该都很熟悉了，就不赘述了。一张图片胜过千言万语。可以使用滚动一个大圆圈的方法，类似这样：将overflow:hidden应用到容器上，就可以得到这样的效果。懂了，可以猛戳这篇文章：纯CSS实现波浪效果！[6]要应用这个技术，你只需要一个简单的封装来控制球形容器指示进度0%-100%时波浪的高度。我们可以获得从0%-100%的动画效果。完整的代码大纲如下：.container{width:200px;height:200px;border:5pxsolidrgb(118,218,255);border-radius:50%;overflow:hidden;}.wave-change{position:absolute;width:200px;height:200px;left:0;top:0;animation:change12sinfinitelinear;&::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:rotate7slinearinfinite;z-index:1;}&::after{border-radius:47%42%46%44%；背景色：rgba(255,255,255,.8)；变换：平移(-50%,-70%)旋转(0)；动画：旋转9slinear-4sinfinite；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:翻译（-50%，-50%）；字体-s大小：36px；颜色：#000；z-index：10；}@keyframesrotate{to{transform:translate(-50%,-70%)rotate(360deg);}}@keyframeschange{from{top:80px;}to{top:-120px;}}完整代码示例，可以点这里：CodePenDemo--PureCssWaveProgressbar[7]CodePenDemo--PureCssWaveProgressbarAnimation[8]3DprogressbarWell，下面的3D进度条需要对CSS3D有基本的掌握。可以先看看这篇文章——神奇的CSS3D动画|仅使用CSS可以制作出多么惊人的动画？[9]主要是借助于一个3D立方体。下面我们来实现一个立方体进度条~首先实现一个立方体，结构如下：我们可以把这个立方体想象成一个三维的进度条容器。通过控制6个边的颜色，我们可以巧妙的得到一个3D的进度条效果。当然，其实我们不需要那么多面，就4个面，去掉左右，然后用渐变修改立方体每个面的颜色，去掉边框，核心CSS代码是如下：.demo-cube{position:relative;.cube{position:absolute;top:50%;left:50%;width:300px;height:100px;transform-style:preserve-3d;transform:translate(-50%,-50%)rotateX(-33.5deg);li{position:absolute;width:300px;height:100px;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));}.top{transform:rotateX(90deg)translateZ(50px);}.bottom{transform:rotateX(-90deg)translateZ(50px);}.front{transform:translateZ(50px);}.back{transform:rotateX(-180deg)translateZ(50px);}}}我们可以得到一个很酷的3D进度条效果：使用CSS属性给3D进度条添加动画当然，进度嘛，需要一个填充动画。由于我们使用的是渐变实现的进度条的进度，所以我们需要控制颜色的百分比变化。通常情况下，CSS是不支持渐变动画的，但这对我们来说并不难，因为我们可以使用CSS@Property。简单修改代码：@property--per{syntax:'';inherits:false;initial-value:0%;}.demo-cube.cube{.top,.front,.bottom,.back{背景：线性渐变（90度，rgba（255,217,34,.6），rgba（255,34,109,.8）var（--per），rgba（255,34,109,.1）var（--per），rgba(255,34,109,.1));animation:perChange6sinfinite;}}@keyframesperChange{0%{--per:0%;}90%,to{--per:80%;}}这样，我们可以实现创建移动的3D进度条，只需要控制--perCSS自定义属性，效果如下：对于CSS@Property不是很熟悉，可以看一下作者的文章——CSS@property，让不可能成为可能[10]，它的出现大大提高了CSS制作各种动画的能力。上面的完整代码可以点击这里：CSS灵感——3D立方体进度条[11]扩展本文介绍了使用HTML/CSS搭建进度条的方法由简单到复杂一步一步的介绍，难度逐步加深.当然，随着难度的增加，你会得到更炫酷的进度条。基于上面的方法介绍，我们基本上可以进化出我们需要的各种进度条。例如，基于上述方法，可以实现一个简单的电池充电动画：当然，CSS千变万化，进度条的种类肯定不限于上述几种。比如我们可以使用滤镜来实现模仿华为手机的充电动画，这也是进度条的一种呈现方式，也可以使用纯CSS实现：以上效果的完整实现可以戳——使用CSS实现酷炫的充电动画[12]或者，我们可以在进度条的贴图上做文章：效果来自CodePen——BarsByLucagaz[13]。总而言之，CSS的精彩世界值得探索。最后，本文到此结束，希望本文对你有所帮助：）参考文献[1]《利用 datalist 实现可过滤下拉选框》：https://github.com/chokcoco/cnblogsArticle/issues/30[2]CodePenDemo——单标签的进度条效果：https://codepen.io/pen/[3]CSS@property，让不可能成为可能：https://github.com/chokcoco/iCSS/issues/109[4]CodePenDemo-角度渐变实现弧形进度条：https://codepen.io/Chokcoco/pen/oNewMLy[5]CodePenDemo-圆弧形进度条开始和结束：https://codepen.io/Chokcoco/pen/VwzzVEV[6]用纯CSS实现波浪效果！：https://github.com/chokcoco/iCSS/issues/22[7]CodePenDemo--PureCssWave进度条：https://codepen.io/Chokcoco/pen/EXJrdB[8]CodePenDemo--纯CssWave进度条动画：https://codepen.io/Chokcoco/pen/rNzGbWY[9]精彩的CSS3D动画|仅使用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——Lucagaz的酒吧：https://codepen.io/lucagez/pen/ReMLVV

仅仅使用 HTML-CSS 实现进度条的 N 种方式相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。