html流程进度效果,jQuery流程进度显示效果

HtmlCssJs

* {

margin:0;

padding:0;

list-style:none;

}

.eStep-warp {

width:600px;

position:relative;

margin:0 auto;

margin-top:100px;

}

.eStep {

display:flex;

width:100%;

}

.eStep-item {

flex:1;

height:10px;

background:#e4e4e4;

position:relative;

}

i {

text-decoration:none;

font-style:normal;

font-size:13px;

}

.eStep-progress {

width:0;

height:8px;

position:absolute;

left:0;

top:0;

background:#BD1D18;

}

/*进度条结束*/

.eStep--point-warp {

position:absolute;

left:0;

top:0;

width:100%;

height:50px;

}

.eStep--point-item {

position:absolute;

top:-10px;

display:block;

height:50px;

}

.eStep--point {

display:block;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

width:26px;

height:26px;

line-height:26px;

color:#fff;

text-align:center;

position:absolute;

top:0px;

left:-2px;

background:#e4e4e4;

border:3px solid #e4e4e4;

-webkit-border-radius:50%;

-moz-border-radius:50%;

border-radius:50%;

}

.eStep--point.done {

width:30px;

height:30px;

background:#BD1D18;

-webkit-transition:0.3s all ease;

-moz-transition:0.3s all ease;

-ms-transition:0.3s all ease;

-o-transition:0.3s all ease;

transition:0.3s all ease;

}

.eStep--point.done:hover {

-webkit-transform:scale(1.2);

-moz-transform:scale(1.2);

-ms-transform:scale(1.2);

-o-transform:scale(1.2);

transform:scale(1.2);

}

.eStep--text {

display:inline-block;

width:100%;

position:absolute;

bottom:0;

left:0;

text-align:left;

}

(function($) {

$.fn.extend({

loadStep: function(params) {

var stepArr = params.steps;

var $this = $(this);

var createStep = function(len) {

var step = '';

var $step = $(step);

for (var i = 0; i < len; i++) {

var stepItem = '

';

$step.append(stepItem);

}

$this.append($step);

}

var createPoint = function(stepArr) {

var pointWarp = '

';

$this.append(pointWarp);

var length = stepArr.length;

var everyStepLength = $this.width() / (length - 1);

var everyWidth = $this.width() / length;

$(stepArr).each(function(index, item) {

var itemHtml = ' ' +

'' + (index + 1) + '' +

'' + item.text + '' +

'';

var $itemHtml = $(itemHtml);

$itemHtml.css({

'left': index * everyStepLength + 'px',

width: everyWidth + 'px'

});

$('.eStep--point-warp').append($itemHtml);

})

}

var createProgress = function() {

var sProgress = '

';

$this.append(sProgress);

}

createStep(stepArr.length - 1);

createProgress();

createPoint(stepArr);

},

setStep: function(step) {

var setPoint = function() {

var $stepPointItem = $('.eStep--point-item');

for (var j = 0; j < $stepPointItem.length; j++) {

var $point = $stepPointItem.eq(j).find('.eStep--point');

if (j <= step) {

$point.addClass('done');

}

}

}

setPoint();

var $this = $(this);

var setProgress = function() {

var $progress = $this.find('.eStep-progress');

var totalWidth = $this.width();

var allLength = $this.find('.eStep-item').length;

var everyProgressLength = totalWidth / allLength;

if (step > allLength) {

step = allLength;

}

$progress.animate({

width: everyProgressLength * step

});

//$progress.width(everyProgressLength*step);

}

setProgress();

}

})

})(jQuery)

$(function() {

$('#step1').loadStep({

steps: [{

text: '申请'

}, {

text: '审计'

}, {

text: '线下审批'

}, {

text: '授权'

}, {

text: '完成'

}]

});

$('#step1').setStep(3);

})

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.8.3