CSS实现不规则自定义进度条效果

html-css023

CSS实现不规则自定义进度条效果,第1张

进度条效果做为网站常用模块无论是投资理财类、还是众筹类、加载提示类网站已经比较常见。另外,HTML5新增了 progress 标签,其重要程度可见一斑。

由于HTML的 progress 存在兼容性问题,本文主要讲解如何通过CSS实现一个简单的自定义进度条效果!

前端开发常用的进度条效果如下:

(环形进度条下次再讲!)

这两个算是比较有代表性的,一个的均匀的一个的不均匀的,实现起来略有不用。

以第一个为例:

这种比较简单,只需要两个 div 标签就可以了(一个标签也可以实现,后文会讲到)

原理介绍:

外层 div 用来显示进度条总长度以及背景色;内层div用来显示当前进度条进度,和当前进度条颜色。

结构如下:

样式如下:

此时效果如下:

只需要利用 js 动态控制上层 div 的宽度就可以实现最简单的自定义进度条了.

** 第二种带原点的进度条 **

此时实现原理跟第一种类似,只是背景色替换成了背景图片,图片如下:

这两个图片除了颜色不一样以外其他是一样大小的!

如果上面的能理解我想这个就不难理解了吧,不过为了显得文章完整还是简单做一个demo如下:

效果如下:

这样写吧:

<div class="meter">

<span style="width: 25%"></span>

</div>

.meter {

height: 20px /* Can be anything */

position: relative

background: #555

-moz-border-radius: 25px

-webkit-border-radius: 25px

border-radius: 25px

padding: 10px

box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3)

}

.meter >span {

display: block

height: 100%

border-top-right-radius: 8px

border-bottom-right-radius: 8px

border-top-left-radius: 20px

border-bottom-left-radius: 20px

background-color: rgb(43,194,83)

background-image: linear-gradient(

center bottom,

rgb(43,194,83) 37%,

rgb(84,240,84) 69%

)

box-shadow:

inset 0 2px 9px rgba(255,255,255,0.3),

inset 0 -2px 6px rgba(0,0,0,0.4)

position: relative

overflow: hidden

}

.orange >span {

background-color: #f1a165

background-image: linear-gradient(to bottom, #f1a165, #f36d0a)

}

.red >span {

background-color: #f0a3a3

background-image: linear-gradient(to bottom, #f0a3a3, #f42323)

}

.meter >span:after {

content: ""

position: absolute

top: 0left: 0bottom: 0right: 0

background-image: linear-gradient(

-45deg,

rgba(255, 255, 255, .2) 25%,

transparent 25%,

transparent 50%,

rgba(255, 255, 255, .2) 50%,

rgba(255, 255, 255, .2) 75%,

transparent 75%,

transparent

)

z-index: 1

background-size: 50px 50px

animation: move 2s linear infinite

border-top-right-radius: 8px

border-bottom-right-radius: 8px

border-top-left-radius: 20px

border-bottom-left-radius: 20px

overflow: hidden

}