现在位置首页 / 项目实战 /正文

Jquery 漂亮进度条插件--processbar

作者: IT小兵 | 2014年2月25日| 热度:℃ | 评论: |参与:

今天分享一个jquery的进度条插件。

代码比较简单。

示例图:

1、css:

/* Webkit animation keyframes */
@-webkit-keyframes animate-stripes {
  from {
    background-position: 0 0;
  }
  
  to {
   background-position: 44px 0;
  }
}
/* Bar which is placed behind the progress */
.ui-progress-bar {
  /* Usual setup stuff */
  position: relative;
  height: 35px;
  
  /* Pad right so we don't cover the borders when fully progressed */
  padding-right: 2px;
  
  /* For browser that don't support gradients, we'll set a blanket background colour */
  background-color: #abb2bc;
  
  /* Rounds the ends, we specify an excessive amount to make sure they are completely rounded */
  /* Adjust to your liking, and don't forget to adjust to the same amount in .ui-progress */
  border-radius: 35px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  
  /* Webkit background gradient */
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));
  /* Mozilla background gradient */
  background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);
  
  /* Give it the inset look by adding some shadows and highlights */
  -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
}
/* Progress part of the progress bar */
.ui-progress {
  /* Usual setup stuff */
  position: relative;
  display: block;
  overflow: hidden;
  
  /* Height should be 2px less than .ui-progress-bar so as to not cover borders and give it a look of being inset */
  height: 33px;
  
  /* Rounds the ends, we specify an excessive amount to make sure they are completely rounded */
  /* Adjust to your liking, and don't forget to adjust to the same amount in .ui-progress-bar */
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  
  /* Set the background size so the stripes work correctly */
  -webkit-background-size: 44px 44px; /* Webkit */
  
  /* For browser that don't support gradients, we'll set a blanket background colour */
  background-color: #74d04c;
  
  /* Webkit background stripes and gradient */
  background: -webkit-gradient(linear, 0 0, 44 44,
    color-stop(0.00, rgba(255,255,255,0.17)),
    color-stop(0.25, rgba(255,255,255,0.17)),
    color-stop(0.26, rgba(255,255,255,0)),
    color-stop(0.50, rgba(255,255,255,0)),
    color-stop(0.51, rgba(255,255,255,0.17)),
    color-stop(0.75, rgba(255,255,255,0.17)),
    color-stop(0.76, rgba(255,255,255,0)),
    color-stop(1.00, rgba(255,255,255,0))
  ), -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));
  
  /* Mozilla (Firefox etc) background stripes */
  /* Note: Mozilla's support for gradients is more true to the original design, allowing gradients at 30 degrees, as apposed to 45 degress in webkit. */
  background: -moz-repeating-linear-gradient(top left -30deg, 
    rgba(255,255,255,0.17), 
    rgba(255,255,255,0.17) 15px, 
    rgba(255,255,255,0) 15px, 
    rgba(255,255,255,0) 30px
  ), -moz-linear-gradient(#9bdd62 0%, #74d04c 100%);
  
  /* Webkit embossing */
  -webkit-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  /* Mozilla embossing */
  -moz-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  /* IE9 and Opera embossing */
  box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  
  /* Give it a higher contrast outline */
  border: 1px solid #4c8932;
  
  /* Webkit magic */
  -webkit-animation: animate-stripes 2s linear infinite;
  
  /* TODO: Wait for Mozilla to support animation, then implement */
}
/* Progress indicator text */
.ui-progress span.ui-label {
  font-size: 1.2em;
  position: absolute;
  right: 0;
  line-height: 33px;
  padding-right: 12px;
  color: rgba(0,0,0,0.6);
  text-shadow: rgba(255,255,255, 0.45) 0 1px 0px;
  white-space: nowrap;
}

2、jquery插件代码:

(function( $ ){
    // Simple wrapper around jQuery animate to simplify animating progress from your app
    // Inputs: Progress as a percent, Callback
    // TODO: Add options and jQuery UI support.
    $.fn.animateProgress = function(progress, callback) {    
        return this.each(function() {
            $(this).animate({
                width: progress+'%'
            }, {
                duration: 2000, 
        
                // swing or linear
                easing: 'swing',
                // this gets called every step of the animation, and updates the label
                step: function( progress ){
                    var labelEl = $('.ui-label', this),
                        valueEl = $('.value', labelEl);
          
                    if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) {
                        labelEl.hide();
                    }else{
                        if (labelEl.is(":hidden")) {
                            labelEl.fadeIn();
                        };
                    }
          
                    if (Math.ceil(progress) == 100) {
                        labelEl.text('完成');
                        setTimeout(function() {
                            labelEl.fadeOut();
                        }, 1000);
                    }else{
                        valueEl.text(Math.ceil(progress) + '%');
                    }
                },
                complete: function(scope, i, elem) {
                    if (callback) {
                        callback.call(this, i, elem );
                    };
                }
            });
        });
    };
})( jQuery );

3、使用方法:

function ShowProcess(process,id) {
    // Hide the label at start
    $("#progress_bar").show();
    $('#progress_bar .ui-progress .ui-label').hide();
    // Set initial value
    $('#progress_bar .ui-progress').css('width', process+'%'); 
    // Simulate some progress
    $('#progress_bar .ui-progress').animateProgress(process, function () {
     
        setInterval(function () { CheckTask(id); }, 1000);
    });
    if (process == 100) {
        alert("已完成");
    }
}

设置定时任务获取和刷新进度:

  $('#progress_bar .ui-progress').animateProgress(43, function() {
    $(this).animateProgress(79, function() {
      setTimeout(function() {
        $('#progress_bar .ui-progress').animateProgress(100, function() {
          $('#main_content').slideDown();
          $('#fork_me').fadeIn();
        });
      }, 2000);
    });
  });


如果希望多次调用就用setInterval。

百度网盘代码下载:http://pan.baidu.com/s/1jGFRwFG


转发注明:IT分享

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询