实现CSS3动态进度条及jQuery百分比数字显示

分类栏目:用户体验 - 前端开发

330779

发布于 24 条评论

在网页设计中,想必一个精彩的进度条将会为你的网站增添不少的精彩,一个好的网页设计往往体现在一些小的细节上面,细节决定了成功与否。在此之前也为大家分享了一些关于进度条的设计 《 让人不得不爱的22个UI进度条设计》。有了设计理念和作品,那我们怎么用最精彩的方法运用到我们的网页制作当中呢﹖今天就为大家分享一个利用css3制作动态进度条以及附加jQuery百分比数字显示。其效果对比flash来说却毫不逊色,有一个精致的动画进度条,上面还有当前进度的百分比数字显示,而且还会跟着进度条而移动。相信追求新颖的朋友来说一定会非常的喜欢。

loading

查看预览下载附件

HTML代码

HTML的代码非常简单,只要为进度条提供一个容器就可以了。基本的HTML代码如下:

<div class="wrapper">
  <div class="load-bar">
    <div class="load-bar-inner" data-loading="0"> <span id="counter"></span> </div>
  </div>
  <h1>Loading</h1>
  <p>Please wait...(By:<a href="http://www.jiawin.com">www.jiawin.com</a>)</p>
</div>

CSS样式表

接下来是为我们的进度条定义样式,这里主要运用了CSS3的linear-gradient的渐变属性、border-radius的圆角属性、box-shadow的阴影属性等等,来制作出进度条的初步模型。完成进度条的模型后我们利用animation属性,让进度条开始动起来,就其中的进度条动画设置代码如下:

.load-bar-inner {
	height: 99%;
	width: 0%;
	border-radius: inherit;
	position: relative;
	background: #c2d7ac;
	background: linear-gradient(#e0f6c8, #98ad84);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),  0 1px 5px rgba(0, 0, 0, 0.3),  0 4px 5px rgba(0, 0, 0, 0.3);
	animation: loader 10s linear infinite;
}

如果接触了CSS3的朋友,相信大多数人对这个属性都比较熟悉了,在这里大概的说明一下animation设置的参数:

  • 设置对象所应用的动画名称:loader
  • 设置对象动画的持续时间:10s
  • 设置对象动画的过渡类型:linear (线性过渡,等同于贝塞尔曲线)
  • 设置对象动画的循环次数:infinite (无限循环)

@keyframes loader这个标签属性是用来被animation使用的,定义动画时,简单的动画可以直接使用关键字fromto,即从一种状态过渡到另一种状态:

@keyframes loader {
 from {
width: 0%;
}
to {
	width: 100%;
}
}

下面是完整的CSS代码,大家可以多研究下,也可以自己修改其中的代码,看看是否制作出更加有趣的东西来:

* {
	box-sizing: border-box;
}
html {
	height: 100%;
}
body {
	background: #efeeea;
	background: linear-gradient(#f9f9f9, #cecbc4);
	background: -moz-linear-gradient(#f9f9f9, #cecbc4);
	background: -webkit-linear-gradient(#f9f9f9, #cecbc4);
	background: -o-linear-gradient(#f9f9f9, #cecbc4);
	color: #757575;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	text-align: center;
}
h1, p {
	padding:0; margin:0;
}
.wrapper {
	width: 350px;
	margin: 200px auto;
}
.wrapper p a {color:#757575; text-decoration:none;}
.wrapper .load-bar {
	width: 100%;
	height: 25px;
	border-radius: 30px;
	background: #dcdbd7;
	position: relative;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8),  inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.wrapper .load-bar:hover .load-bar-inner, .wrapper .load-bar:hover #counter {
	animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	-webkit-animation-play-state: paused;
}
.wrapper .load-bar-inner {
	height: 99%;
	width: 0%;
	border-radius: inherit;
	position: relative;
	background: #c2d7ac;
	background: linear-gradient(#e0f6c8, #98ad84);
	background: -moz-linear-gradient(#e0f6c8, #98ad84);
	background: -webkit-linear-gradient(#e0f6c8, #98ad84);
	background: -o-linear-gradient(#e0f6c8, #98ad84);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),  0 1px 5px rgba(0, 0, 0, 0.3),  0 4px 5px rgba(0, 0, 0, 0.3);
	animation: loader 10s linear infinite;
	-moz-animation: loader 10s linear infinite;
	-webkit-animation: loader 10s linear infinite;
	-o-animation: loader 10s linear infinite;
}
.wrapper #counter {
	position: absolute;
	background: #eeeff3;
	background: linear-gradient(#eeeff3, #cbcbd3);
	background: -moz-linear-gradient(#eeeff3, #cbcbd3);
	background: -webkit-linear-gradient(#eeeff3, #cbcbd3);
	background: -o-linear-gradient(#eeeff3, #cbcbd3);
	padding: 5px 10px;
	border-radius: 0.4em;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),  0 2px 4px 1px rgba(0, 0, 0, 0.2),  0 1px 3px 1px rgba(0, 0, 0, 0.1);
	left: -25px;
	top: -50px;
	font-size: 12px;
	font-weight: bold;
	width: 44px;
	animation: counter 10s linear infinite;
	-moz-animation: counter 10s linear infinite;
	-webkit-animation: counter 10s linear infinite;
	-o-animation: counter 10s linear infinite;
}
.wrapper #counter:after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	background: #cbcbd3;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	left: 50%;
	margin-left: -4px;
	bottom: -4px;
	box-shadow:  3px 3px 4px rgba(0, 0, 0, 0.2),  1px 1px 1px 1px rgba(0, 0, 0, 0.1);
	border-radius: 0 0 3px 0;
}
.wrapper h1 {
	font-size: 28px;
	padding: 20px 0 8px 0;
}
.wrapper p {
	font-size: 13px;
}
 @keyframes loader {
 from {
width: 0%;
}
to {
	width: 100%;
}
}
 @-moz-keyframes loader {
 from {
width: 0%;
}
to {
	width: 100%;
}
}
 @-webkit-keyframes loader {
 from {
width: 0%;
}
to {
	width: 100%;
}
}
 @-o-keyframes loader {
 from {
width: 0%;
}
to {
	width: 100%;
}
}

 @keyframes counter {
 from {
left: -25px;
}
to {
	left: 323px;
}
}
 @-moz-keyframes counter {
 from {
left: -25px;
}
to {
	left: 323px;
}
}
 @-webkit-keyframes counter {
 from {
left: -25px;
}
to {
	left: 323px;
}
}
 @-o-keyframes counter {
 from {
left: -25px;
}
to {
	left: 323px;
}
}

在这里其实有很多个CSS3的知识点,例如进度条上面的进度提示的小图标的下方有个小三角形,这个小三角主要是通过制作一个小的正方形,然后利用position来定位,调整好位置后,再通过transform来转换角度,使之最终成为一个三角形。大家可以多多看看里面的一些小细节,对于学习CSS3来说是很有帮助的。

Javascript

完成了进度条的模型,而且进度条也通过CSS3的定义开始动起来了,那我们就接下来用jQuery来完善我们的进度条,让他成为一个不管外表还是内心都很强大的进度条。嘿嘿…在这里主要做的是让进度条上面的数字随着进度而发生变化,从而客观的知道当前进度条的进度百分比,看下面的代码:

$(function(){

  var interval = setInterval(increment,100);
  var current = 0;

  function increment(){
    current++;
    $('#counter').html(current+'%'); 
    if(current == 100) { current = 0; }
  }

  $('.load-bar').mouseover(function(){
    	clearInterval(interval);
  }).mouseout(function(){
      interval = setInterval(increment,100);
 	});

});

这一步需要注意的是别忘了加入jQuery库,不然就看不到效果了。

查看预览下载附件

好了,这就是今天为大家分享的进度条,希望大家喜欢,CSS3真是个好东西……哇哈哈!

素材资源:Piotr Kwiatkowski

全部评论 / 24

  1. 半月弦

    博主,怎么实现前段进度条和后台数据实时的动态显示呢

    半月弦 2012-11-30
    14
  2. Freckles

    :mrgreen: :lol: :cool: :cool: 挺好的

    Freckles 2012-11-30
    13
  3. 到达100%的时候,怎么让他跳转到另外的页面或网站去?

    at15cm 2012-11-30
    12
  4. 博主,我下载了你的代码怎么还是不能达到你说的效果啊,求助qq:714691246

    彭平 2012-11-30
    11
  5. 按页面整体效果的话,可以给最上面的搜索框添加一个伸缩的效果。

    柏越 2012-11-30
    10
    1. Javin

      感谢建议。个人感觉没必要,伸缩效果可以用在位置不多(空间不足)时,用来解决视觉平衡问题。有些效果可以不要的就尽量不好,除非是可以讨好用户或者为设计加分的。

      1号 Javin 2012-11-30
  6. 如果想实现您博客最上面这种加载效果的话,HTML代码是放在页面模板这个php里吗?

    9
    1. Javin

      看你的需求吧,如果是整站都要添加,就加到header文件中,如果不是就加到相对应的文件中就行。

      1号 Javin 2012-11-30
  7. 第一次来贵博客,很好,很受教,拜读了,以后会常来。

    8
  8. 这个效果非常好看,正好公司准备做个问卷调查,感觉可以用到~ :razz:

    7
  9. 网站很好看。js的进度条我也用了,不过我的做法比较简单,代码量少,当然没有你的好看~原理应该都一样。
    如何使用js给你的网站加入一个加载进度条

    6
    1. Javin

      感谢分享。关于进度条的实现,网上是很多的,这个示例主要是通过css3来制作的,没有调用js。

      1号 Javin 2012-11-30
  10. 求问,你的网站顶部的动态进度加载是怎么获取网站加载的百分比的呢?

    木公 2012-11-30
    5
  11. 求回访。,

    4
  12. 漂亮、收藏了~

    3
  13. 不行啊,没看到进度条移动啊

    aa 2012-11-30
    2
    1. Javin

      浏览器需要支持CSS3

      1号 Javin 2012-11-30
      1. 用的是chrome,必须支持啊。

        aa 2012-11-30
      2. 怪事,opera可以,chrome咋不可以呢

        aa 2012-11-30
      3. firefox还是不行

        aa 2012-11-30
        1. Javin

          火狐也是支持的,刚刚说的问题已经更新上去了,如果还有什么问题可以留言联系

          1号 Javin 2012-11-30
    2. Javin

      @aa :

      用的是chrome,必须支持啊。

      @aa :

      怪事,opera可以,chrome咋不可以呢

      是我写法没写完整,谷歌的需要加前缀-webkit-
      我等会会把完整的更新上去。

      1号 Javin 2012-11-30
  14. 效果不错,,

    大发 2012-11-30
    1