CSS3动态进度条及jQ百分比数字显示


在网页设计中,想必一个精彩的进度条将会为你的网站增添不少的精彩,一个好的网页设计往往体现在一些小的细节上面,细节决定了成功与否。在此之前也为大家分享了一些关于进度条的设计 ― 让人不得不爱的22个UI进度条设计。有了设计理念和作品,那我们怎么用最精彩的方法运用到我们的网页制作当中呢﹖


今天就为大家分享一个利用css3制作动态进度条以及附加jQuery百分比数字显示。其效果对比flash来说却毫不逊色,有一个精致的动画进度条,上面还有当前进度的百分比数字显示,而且还会跟着进度条而移动。相信追求新颖的朋友来说一定会非常的喜欢。



查看预览


HTML代码


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


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

CSS样式表


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


  1. .load-bar-inner {  
  2.     height99%;  
  3.     width0%;  
  4.     border-radius: inherit;  
  5.     positionrelative;  
  6.     background#c2d7ac;  
  7.     background: linear-gradient(#e0f6c8#98ad84);  
  8.     box-shadow: inset 0 1px 0 rgba(2552552551),  0 1px 5px rgba(0000.3),  0 4px 5px rgba(0000.3);  
  9.     animation: loader 10s linear infinite;  

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


设置对象所应用的动画名称:loader


设置对象动画的持续时间:10s


设置对象动画的过渡类型:linear (线性过渡,等同于贝塞尔曲线)


设置对象动画的循环次数:infinite (无限循环)


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


  1. @keyframes loader {  
  2.  from {  
  3. width: 0%;  
  4. }  
  5. to {  
  6.     width: 100%;  
  7. }  

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


  1. * {  
  2.     box-sizing: border-box;  
  3. }  
  4. html {  
  5.     height: 100%;  
  6. }  
  7. body {  
  8.     background: #efeeea;  
  9.     background: linear-gradient(#f9f9f9, #cecbc4);  
  10.     background: -moz-linear-gradient(#f9f9f9, #cecbc4);  
  11.     background: -webkit-linear-gradient(#f9f9f9, #cecbc4);  
  12.     background: -o-linear-gradient(#f9f9f9, #cecbc4);  
  13.     color: #757575;  
  14.     font-family: "HelveticaNeue-Light""Helvetica Neue Light""Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;  
  15.     text-align: center;  
  16. }  
  17. h1, p {  
  18.     padding:0; margin:0;  
  19. }  
  20. .wrapper {  
  21.     width: 350px;  
  22.     margin: 200px auto;  
  23. }  
  24. .wrapper p a {color:#757575; text-decoration:none;}  
  25. .wrapper .load-bar {  
  26.     width: 100%;  
  27.     height: 25px;  
  28.     border-radius: 30px;  
  29.     background: #dcdbd7;  
  30.     position: relative;  
  31.     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8),  inset 0 2px 3px rgba(0, 0, 0, 0.2);  
  32. }  
  33. .wrapper .load-bar:hover .load-bar-inner, .wrapper .load-bar:hover #counter {  
  34.     animation-play-state: paused;  
  35.     -moz-animation-play-state: paused;  
  36.     -o-animation-play-state: paused;  
  37.     -webkit-animation-play-state: paused;  
  38. }  
  39. .wrapper .load-bar-inner {  
  40.     height: 99%;  
  41.     width: 0%;  
  42.     border-radius: inherit;  
  43.     position: relative;  
  44.     background: #c2d7ac;  
  45.     background: linear-gradient(#e0f6c8, #98ad84);  
  46.     background: -moz-linear-gradient(#e0f6c8, #98ad84);  
  47.     background: -webkit-linear-gradient(#e0f6c8, #98ad84);  
  48.     background: -o-linear-gradient(#e0f6c8, #98ad84);  
  49.     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);  
  50.     animation: loader 10s linear infinite;  
  51.     -moz-animation: loader 10s linear infinite;  
  52.     -webkit-animation: loader 10s linear infinite;  
  53.     -o-animation: loader 10s linear infinite;  
  54. }  
  55. .wrapper #counter {  
  56.     position: absolute;  
  57.     background: #eeeff3;  
  58.     background: linear-gradient(#eeeff3, #cbcbd3);  
  59.     background: -moz-linear-gradient(#eeeff3, #cbcbd3);  
  60.     background: -webkit-linear-gradient(#eeeff3, #cbcbd3);  
  61.     background: -o-linear-gradient(#eeeff3, #cbcbd3);  
  62.     padding: 5px 10px;  
  63.     border-radius: 0.4em;  
  64.     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);  
  65.     left: -25px;  
  66.     top: -50px;  
  67.     font-size: 12px;  
  68.     font-weight: bold;  
  69.     width: 44px;  
  70.     animation: counter 10s linear infinite;  
  71.     -moz-animation: counter 10s linear infinite;  
  72.     -webkit-animation: counter 10s linear infinite;  
  73.     -o-animation: counter 10s linear infinite;  
  74. }  
  75. .wrapper #counter:after {  
  76.     content: "";  
  77.     position: absolute;  
  78.     width: 8px;  
  79.     height: 8px;  
  80.     background: #cbcbd3;  
  81.     transform: rotate(45deg);  
  82.     -moz-transform: rotate(45deg);  
  83.     -webkit-transform: rotate(45deg);  
  84.     -o-transform: rotate(45deg);  
  85.     left: 50%;  
  86.     margin-left: -4px;  
  87.     bottom: -4px;  
  88.     box-shadow:  3px 3px 4px rgba(0, 0, 0, 0.2),  1px 1px 1px 1px rgba(0, 0, 0, 0.1);  
  89.     border-radius: 0 0 3px 0;  
  90. }  
  91. .wrapper h1 {  
  92.     font-size: 28px;  
  93.     padding: 20px 0 8px 0;  
  94. }  
  95. .wrapper p {  
  96.     font-size: 13px;  
  97. }  
  98.  @keyframes loader {  
  99.  from {  
  100. width: 0%;  
  101. }  
  102. to {  
  103.     width: 100%;  
  104. }  
  105. }  
  106.  @-moz-keyframes loader {  
  107.  from {  
  108. width: 0%;  
  109. }  
  110. to {  
  111.     width: 100%;  
  112. }  
  113. }  
  114.  @-webkit-keyframes loader {  
  115.  from {  
  116. width: 0%;  
  117. }  
  118. to {  
  119.     width: 100%;  
  120. }  
  121. }  
  122.  @-o-keyframes loader {  
  123.  from {  
  124. width: 0%;  
  125. }  
  126. to {  
  127.     width: 100%;  
  128. }  
  129. }  
  130.  
  131.  @keyframes counter {  
  132.  from {  
  133. left: -25px;  
  134. }  
  135. to {  
  136.     left: 323px;  
  137. }  
  138. }  
  139.  @-moz-keyframes counter {  
  140.  from {  
  141. left: -25px;  
  142. }  
  143. to {  
  144.     left: 323px;  
  145. }  
  146. }  
  147.  @-webkit-keyframes counter {  
  148.  from {  
  149. left: -25px;  
  150. }  
  151. to {  
  152.     left: 323px;  
  153. }  
  154. }  
  155.  @-o-keyframes counter {  
  156.  from {  
  157. left: -25px;  
  158. }  
  159. to {  
  160.     left: 323px;  
  161. }  

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


Javascript


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


  1. $(function(){  
  2.   var interval = setInterval(increment,100);  
  3.   var current = 0;  
  4.   function increment(){  
  5.     current++;  
  6.     $('#counter').html(current+'%');   
  7.     if(current == 100) { current = 0; }  
  8.   }  
  9.   $('.load-bar').mouseover(function(){  
  10.         clearInterval(interval);  
  11.   }).mouseout(function(){  
  12.       interval = setInterval(increment,100);  
  13.     });  
  14. }); 

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




标签:

友情链接
轻松育儿世界奇观
苏ICP备16066217号-2