jquery进度条特效核心代码

发布时间:2020-09-03编辑:脚本学堂
jquery进度条的核心代码分享,jquery进度条代码的例子,使用jquery实现页面加载进度条效果,比较简单,可以参考下这里提供的实例代码。

jquery/jindutiao/ target=_blank class=infotextkey>jquery进度条特效代码
jquery进度条

jquery进度条核心代码:
 

复制代码 代码示例:

// Copyright (c) 2010 Ivan Vanderbyl
// Originally found at http://ivan.ly/ui
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
(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('Done');
setTimeout(function() {
labelEl.fadeOut();
},
1000);
} else {
valueEl.text(Math.ceil(progress) + '%');
}
},
complete: function(scope, i, elem) {
if (callback) {
callback.call(this, i, elem);
};
}
});
});
};
})(jQuery);

$(function() {
// Hide the label at start
$('#progress_bar .ui-progress .ui-label').hide();
// Set initial value
$('#progress_bar .ui-progress').css('width', '7%');

// Simulate some progress
$('#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);
});
});
});