程序博客网 > 年薪百万知乎

一款基于jquery带百分比的响应式进度加载条

来源：互联网 发布：年薪百万知乎 编辑：程序博客网 时间：2024/04/30 09:59
今天要给大家带来一款基于jquery带百分比的响应式进度加载条。这款加载条非常漂亮，而且带有进度的百度比，且在不同的百分比用的是不同的颜色。而且这款加载条采用了响应式设计，在不同的分辨率的显示器下完美支持。一起看下效果图吧。


201410012338006084.jpg




在线预览   源码下载


实现的代码。




html代码：


  1. <h1>Battle.net <b>style progress bar</b></h1><div class="progress"><b class="progress__bar"><span class="progress__text">Progress: <em>0%</em> </span></b></div>
复制代码




css代码：




  1. .progress {
  2.   font-size: 1.2em;
  3.   height: 20px;
  4.   background: rgba(255, 255, 255, 0.05);
  5.   border-radius: 2px;
  6.   border: 1px solid rgba(255, 255, 255, 0.2);
  7. }
  8. .progress--active .progress__bar {
  9.   opacity: 1;
  10. }
  11. .progress__text {
  12.   width: 20em;
  13.   padding: 0 0.9em;
  14.   position: absolute;
  15. }
  16. .progress__text em {
  17.   font-style: normal;
  18. }
  19. .progress__bar {
  20.   color: white;
  21.   font-size: 12px;
  22.   font-weight: normal;
  23.   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  24.   line-height: 19px;
  25.   display: block;
  26.   position: relative;
  27.   top: -1px;
  28.   left: -1px;
  29.   width: 0%;
  30.   height: 100%;
  31.   opacity: 0;
  32.   border: 1px solid;
  33.   border-radius: 2px 0 0 2px;
  34.   background-size: 100px 30px, 130px 30px, 130px 30px;
  35.   background-position: -20% center, right center, left center;
  36.   background-repeat: no-repeat, no-repeat, no-repeat;
  37.   -webkit-transition: opacity 0.2s ease, width 0.8s ease-out, background-color 1s ease, border-color 0.3s ease, box-shadow 1s ease;
  38.           transition: opacity 0.2s ease, width 0.8s ease-out, background-color 1s ease, border-color 0.3s ease, box-shadow 1s ease;
  39.   -webkit-animation: pulse 2s ease-out infinite;
  40.           animation: pulse 2s ease-out infinite;
  41.   background-color: rgba(201, 4, 20, 0.95);
  42.   background-image: -webkit-linear-gradient(0deg, rgba(226, 4, 22, 0) 10%, rgba(250, 6, 26, 0.8) 30%, #fb1f31 70%, rgba(250, 6, 26, 0.8) 80%, rgba(226, 4, 22, 0) 90%), -webkit-linear-gradient(left, rgba(251, 31, 49, 0) 0%, #fb1f31 100%), -webkit-linear-gradient(right, rgba(251, 31, 49, 0) 0%, #fb1f31 100%);
  43.   background-image: linear-gradient(90deg, rgba(226, 4, 22, 0) 10%, rgba(250, 6, 26, 0.8) 30%, #fb1f31 70%, rgba(250, 6, 26, 0.8) 80%, rgba(226, 4, 22, 0) 90%), linear-gradient(to right, rgba(251, 31, 49, 0) 0%, #fb1f31 100%), linear-gradient(to left, rgba(251, 31, 49, 0) 0%, #fb1f31 100%);
  44.   border-color: #fb3848;
  45.   box-shadow: 0 0 0.6em #fa061a inset, 0 0 0.4em #e20416 inset, 0 0 0.5em rgba(201, 4, 20, 0.5), 0 0 0.1em rgba(254, 206, 210, 0.5);
  46. }
  47. .progress__bar--orange {
  48.   background-color: rgba(201, 47, 0, 0.95);
  49.   background-image: -webkit-linear-gradient(0deg, rgba(227, 53, 0, 0) 10%, rgba(252, 59, 0, 0.8) 30%, #ff4d17 70%, rgba(252, 59, 0, 0.8) 80%, rgba(227, 53, 0, 0) 90%), -webkit-linear-gradient(left, rgba(255, 77, 23, 0) 0%, #ff4d17 100%), -webkit-linear-gradient(right, rgba(255, 77, 23, 0) 0%, #ff4d17 100%);
  50.   background-image: linear-gradient(90deg, rgba(227, 53, 0, 0) 10%, rgba(252, 59, 0, 0.8) 30%, #ff4d17 70%, rgba(252, 59, 0, 0.8) 80%, rgba(227, 53, 0, 0) 90%), linear-gradient(to right, rgba(255, 77, 23, 0) 0%, #ff4d17 100%), linear-gradient(to left, rgba(255, 77, 23, 0) 0%, #ff4d17 100%);
  51.   border-color: #ff6030;
  52.   box-shadow: 0 0 0.6em #fc3b00 inset, 0 0 0.4em #e33500 inset, 0 0 0.5em rgba(201, 47, 0, 0.5), 0 0 0.1em rgba(255, 214, 201, 0.5);
  53. }
  54. .progress__bar--yellow {
  55.   background-color: rgba(232, 5074, 0, 0.95);
  56.   background-image: -webkit-linear-gradient(0deg, rgba(255, 174, 2, 0) 10%, rgba(255, 183, 28, 0.8) 30%, #ffbf36 70%, rgba(255, 183, 28, 0.8) 80%, rgba(255, 174, 2, 0) 90%), -webkit-linear-gradient(left, rgba(255, 191, 54, 0) 0%, #ffbf36 100%), -webkit-linear-gradient(right, rgba(255, 191, 54, 0) 0%, #ffbf36 100%);
  57.   background-image: linear-gradient(90deg, rgba(255, 174, 2, 0) 10%, rgba(255, 183, 28, 0.8) 30%, #ffbf36 70%, rgba(255, 183, 28, 0.8) 80%, rgba(255, 174, 2, 0) 90%), linear-gradient(to right, rgba(255, 191, 54, 0) 0%, #ffbf36 100%), linear-gradient(to left, rgba(255, 191, 54, 0) 0%, #ffbf36 100%);
  58.   border-color: #ffc74f;
  59.   box-shadow: 0 0 0.6em #ffb71c inset, 0 0 0.4em #ffae02 inset, 0 0 0.5em rgba(232, 5074, 0, 0.5), 0 0 0.1em rgba(255, 248, 232, 0.5);
  60. }
  61. .progress__bar--green {
  62.   background-color: rgba(0, 178, 23, 0.95);
  63.   background-image: -webkit-linear-gradient(0deg, rgba(0, 203, 26, 0) 10%, rgba(0, 229, 30, 0.8) 30%, #00fe21 70%, rgba(0, 229, 30, 0.8) 80%, rgba(0, 203, 26, 0) 90%), -webkit-linear-gradient(left, rgba(0, 254, 33, 0) 0%, #00fe21 100%), -webkit-linear-gradient(right, rgba(0, 254, 33, 0) 0%, #00fe21 100%);
  64.   background-image: linear-gradient(90deg, rgba(0, 203, 26, 0) 10%, rgba(0, 229, 30, 0.8) 30%, #00fe21 70%, rgba(0, 229, 30, 0.8) 80%, rgba(0, 203, 26, 0) 90%), linear-gradient(to right, rgba(0, 254, 33, 0) 0%, #00fe21 100%), linear-gradient(to left, rgba(0, 254, 33, 0) 0%, #00fe21 100%);
  65.   border-color: #19ff37;
  66.   box-shadow: 0 0 0.6em #00e51e inset, 0 0 0.4em #00cb1a inset, 0 0 0.5em rgba(0, 178, 23, 0.5), 0 0 0.1em rgba(178, 255, 188, 0.5);
  67. }
  68. .progress__bar--blue {
  69.   background-color: rgba(18, 135, 204, 0.95);
  70.   background-image: -webkit-linear-gradient(0deg, rgba(20, 151, 227, 0) 10%, rgba(37, 162, 236, 0.8) 30%, #3dacee 70%, rgba(37, 162, 236, 0.8) 80%, rgba(20, 151, 227, 0) 90%), -webkit-linear-gradient(left, rgba(61, 172, 238, 0) 0%, #3dacee 100%), -webkit-linear-gradient(right, rgba(61, 172, 238, 0) 0%, #3dacee 100%);
  71.   background-image: linear-gradient(90deg, rgba(20, 151, 227, 0) 10%, rgba(37, 162, 236, 0.8) 30%, #3dacee 70%, rgba(37, 162, 236, 0.8) 80%, rgba(20, 151, 227, 0) 90%), linear-gradient(to right, rgba(61, 172, 238, 0) 0%, #3dacee 100%), linear-gradient(to left, rgba(61, 172, 238, 0) 0%, #3dacee 100%);
  72.   border-color: #54b6f0;
  73.   box-shadow: 0 0 0.6em #25a2ec inset, 0 0 0.4em #1497e3 inset, 0 0 0.5em rgba(18, 135, 204, 0.5), 0 0 0.1em rgba(225, 242, 252, 0.5);
  74. }
  75. .progress__bar:before, .progress__bar:after {
  76.   content: "";
  77.   position: absolute;
  78.   right: -1px;
  79.   top: -10px;
  80.   width: 1px;
  81.   height: 40px;
  82. }
  83. .progress__bar:before {
  84.   width: 7px;
  85.   right: -4px;
  86.   background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 75%);
  87.   background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 75%);
  88. }
  89. .progress__bar:after {
  90.   background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 100%);
  91.   background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 100%);
  92. }
  93. .progress--complete .progress__bar {
  94.   -webkit-animation: none;
  95.           animation: none;
  96.   border-radius: 2px;
  97. }
  98. .progress--complete .progress__bar:after, .progress--complete .progress__bar:before {
  99.   opacity: 0;
  100. }

  102. @-webkit-keyframes pulse {
  103.   0% {
  104.     background-position: -50% center, right center, left center;
  105.   }
  106.   100% {
  107.     background-position: 150% center, right center, left center;
  108.   }
  109. }

  111. @keyframes pulse {
  112.   0% {
  113.     background-position: -50% center, right center, left center;
  114.   }
  115.   100% {
  116.     background-position: 150% center, right center, left center;
  117.   }
  118. }
  119. body, html {
  120.   color: white;
  121.   padding: 20px 50px;
  122.   background: #131c23;
  123.   font-family: Roboto;
  124. }

  126. h1 {
  127.   font-weight: 900;
  128.   line-height: 1em;
  129.   margin: 0.5em 0;
  130. }

  132. h1 b {
  133.   font-weight: 100;
  134. }
复制代码


js代码：




  1. var $progress = $(".progress"),
  2.     $bar = $(".progress__bar"),
  3.     $text = $(".progress__text"),
  4.     percent = 0,
  5.     update,
  6.     resetColors,
  7.     speed = 200,
  8.     orange = 30,
  9.     yellow = 55,
  10.     green = 85,
  11.     timer;

  13.         resetColors = function () {

  15.             $bar
  16.     .removeClass("progress__bar--green")
  17.     .removeClass("progress__bar--yellow")
  18.     .removeClass("progress__bar--orange")
  19.     .removeClass("progress__bar--blue");

  21.             $progress
  22.     .removeClass("progress--complete");

  24.         };

  26.         update = function () {

  28.             timer = setTimeout(function () {

  30.                 percent += Math.random() * 1.8;
  31.                 percent = parseFloat(percent.toFixed(1));

  33.                 $text.find("em").text(percent + "%");

  35.                 if (percent >= 100) {

  37.                     percent = 100;
  38.                     $progress.addClass("progress--complete");
  39.                     $bar.addClass("progress__bar--blue");
  40.                     $text.find("em").text("Complete");

  42.                 } else {

  44.                     if (percent >= green) {
  45.                         $bar.addClass("progress__bar--green");
  46.                     }

  48.                     else if (percent >= yellow) {
  49.                         $bar.addClass("progress__bar--yellow");
  50.                     }

  52.                     else if (percent >= orange) {
  53.                         $bar.addClass("progress__bar--orange");
  54.                     }

  56.                     speed = Math.floor(Math.random() * 900);
  57.                     update();

  59.                 }

  61.                 $bar.css({ width: percent + "%" });

  63.             }, speed);

  65.         };

  67.         setTimeout(function () {

  69.             $progress.addClass("progress--active");
  70.             update();

  72.         }, 1000);


  75.         $(document).on("click", function (e) {

  77.             percent = 0;
  78.             clearTimeout(timer);
  79.             resetColors();
  80.             update();

  82.         }); //@ sourceURL=pen.js
复制代码


原文地址：http://www.w2bc.com/Article/**1

0 0
年薪百万知乎 年薪百万知乎
原创粉丝点击
热门IT博客
3d打印机建模软件3d打印机建模软件
linux 端口转发工具linux 端口转发工具
成都新经济知乎
手机打谱软件简谱
足球竞猜哪个软件
mysql输入中文报错
身边有关大数据的例子
淘宝运动壹号高仿
合肥软件项目经理
prototype js 闭包
阿里云 广州机房
软件杯全国软件大赛
linux如何查看用户
java物联网框架
暗夜情缘 知乎
搞事情 知乎
中华软件股份公司
网络体育关注
gps照相机软件下载
同程网络2017校园招聘
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 王朝霸域新手攻略 风弄 金玉王朝3 王朝霸域宝石价格 王朝霸域怎么轮回 王朝霸域遭遇死士 王朝霸域主公升级 王朝干红多少钱一瓶 王朝霸域免费管家 王朝霸域快速升级 王朝霸域升级攻略 王朝霸域轮回规则 王朝霸域 金刚砂 王朝霸域招募武将 王朝霸域武将阅历 王朝赤霞珠2000价格 金玉王朝番外钥匙 星程锦龙王朝酒店 王朝霸域武将装备 剑皇朝 剑王超 都市少帅之楚氏王朝 魔法门英雄无敌王朝 王权 王权少女综 王权攻略 王权少女 王权的陨落 王权之剑 王权怎么玩 王权2攻略 王权富贵图片 失落的王权 西贝猫 王权reigns全结局流程攻略 王权2幻想王国 王权女王陛下攻略 永恒王权 天下青空 王村镇 王村 东王村 上王村 王村瀑布旅游

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里