UDN-企业互联网技术人气社区

板块导航

浏览  : 3053
回复  : 2

[资源] HTML5/CSS3超酷进度条 不同进度多种颜色

[复制链接]
圆圆的头像 楼主
发表于 2015-7-15 09:06:36 | 显示全部楼层 |阅读模式
    这是一款线条状的CSS3进度条,这款进度条有两个特点:一是随着进度条的进度更新,都会有数字百分比实时显示,让数据更加直观;二是在不同的进度阶段,进度条的颜色会有所变化,这样能更好的反应当前的进度状态。加上黑色的背景,让这款CSS3进度条更加鲜亮起来。

css3-progress-bar-line.jpg




    下面我们来看看实现这款进度条的过程和源码,代码主要由HTML、CSS以及jQuery组成,实现过程也相对比较简单。



    HTML代码:

  1. <div id="wrapper">
  2. <div class="loader-container">
  3.   <div class="meter">0</div>
  4.   <span class="runner"></span>
  5. </div>
  6. </div>
复制代码



    这里定义了进度条的容器,以及进度百分比。



    CSS代码:

  1. .loader-container {
  2.   height: 6px;
  3.   width: 600px;
  4.   position: absolute;
  5.   top: 50%;
  6.   left: 50%;
  7.   margin-top: -3px;
  8.   margin-left: -300px;
  9.   background-color: transparent;
  10.   background-image: -webkit-linear-gradient(left, #5bd8ff, #ff0000);
  11.   background-image: -moz-linear-gradient(left, #5bd8ff, #ff0000);
  12.   background-image: -o-linear-gradient(left, #5bd8ff, #ff0000);
  13.   background-image: -ms-linear-gradient(left, #5bd8ff, #ff0000);
  14.   background-image: linear-gradient(left, #5bd8ff, #ff0000);
  15.   box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.4);
  16.   border-radius: 3px 0 0 3px;
  17. }
  18. .loader-container:after {
  19.   content: "";
  20.   display: block;
  21.   position: absolute;
  22.   right: 0;
  23.   top: 50%;
  24.   width: 1em;
  25.   height: 1em;
  26.   border-radius: 50%;
  27.   margin-top: -0.5em;
  28.   margin-right: -1em;
  29.   background-image: -webkit-linear-gradient(top, #000000, #212121);
  30.   background-image: -moz-linear-gradient(top, #000000, #212121);
  31.   background-image: -o-linear-gradient(top, #000000, #212121);
  32.   background-image: -ms-linear-gradient(top, #000000, #212121);
  33.   background-image: linear-gradient(top, #000000, #212121);
  34. }
  35. .loader-container.done:after {
  36.   background: Red;
  37. }
  38. .run .runner {
  39.   content: "";
  40.   position: absolute;
  41.   right: 0;
  42.   height: 100%;
  43.   width: 0%;
  44.   background-color: transparent;
  45.   background-image: -webkit-linear-gradient(top, #000000, #212121);
  46.   background-image: -moz-linear-gradient(top, #000000, #212121);
  47.   background-image: -o-linear-gradient(top, #000000, #212121);
  48.   background-image: -ms-linear-gradient(top, #000000, #212121);
  49.   background-image: linear-gradient(top, #000000, #212121);
  50.   animation: loader 10s linear;
  51. }
  52. .meter {
  53.   position: absolute;
  54.   top: 0;
  55.   right: 0;
  56.   font-size: 2em;
  57.   margin-top: .3em;
  58.   color: #ff0000;
  59.   animation: meter 10s linear;
  60.   text-shadow: 0 -1px 0 #333333;
  61. }
  62. .meter:after {
  63.   content: "%";
  64. }
  65. @keyframes loader {
  66.   0% {
  67.     width: 100%;
  68.   }
  69.   100% {
  70.     width: 0%;
  71.   }
  72. }
  73. @keyframes meter {
  74.   0% {
  75.     color: #5bd8ff;
  76.   }
  77.   100% {
  78.     color: #ff0000;
  79.   }
  80. }
复制代码


    这里利用了CSS3的动画属性,定义了从0%到100%的动画效果。



    jQuery代码:

  1. var Loader = function () {   
  2.   var loader = document.querySelector('.loader-container'),
  3.       meter = document.querySelector('.meter'),
  4.       k, i = 1,
  5.       counter = function () {
  6.         if (i <= 100) {   
  7.           meter.innerHTML = i.toString();
  8.           i++;
  9.         } else {
  10.           window.clearInterval(k);
  11.         }
  12.       };

  13.         return {
  14.           init: function (options) {
  15.       options = options || {};
  16.       var time = options.time ? options.time : 0,
  17.                 interval = time/100;

  18.             loader.classList.add('run');
  19.       k = window.setInterval(counter, interval);
  20.       setTimeout(function () {        
  21.               loader.classList.add('done');
  22.       }, time);
  23.     },
  24.   }
  25. }();

  26. Loader.init({
  27.           // If you have changed the [url=home.php?mod=space&uid=15978]@time[/url] in LESS, update this number to the corresponding value. Measured in miliseconds.
  28.           time: 10000
  29. });
复制代码



    用jQuery代码实现了进度条的实时更新,并且百分比数字也实时更新。



css3-progress-bar-line.rar (58.17 KB, 下载次数: 6)

相关帖子

发表于 2015-8-10 19:14:38 | 显示全部楼层
鄙视楼下的顶帖没我快,哈哈
使用道具 举报

回复

发表于 2015-8-14 09:04:38 | 显示全部楼层
个人认为html5作为下一代的标准语言,有很大的意义
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部