ajax bootstrap 进度条,bootstrap进度条美化

.progress {

height: 20px;

background-color: #f5f5f5;

-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);

box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);

overflow: visible;

border-radius: 20px;

margin: 80px 20px;

}

.progress .progress-bar {

position: relative;

float: left;

width: 0;

height: 100%;

font-size: 12px;

line-height: 20px;

color: #fff;

text-align: center;

-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);

box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);

-webkit-transition: width .6s ease;

-o-transition: width .6s ease;

transition: width .6s ease;

border-radius: 20px;

background-color: #001ff8;

}

.progress .progress-value {

box-sizing: border-box;

background-clip: content-box;

display: block;

height: 42px;

line-height: 38px;

width: 42px;

text-align: center;

border-radius: 50%;

font-size: 13px;

color: #fff;

padding: 2px;

background-color: #214eff;

border: 1px solid #214eff;

position: absolute;

top: -60px;

right: -15px;

}

.progress .progress-value:after {

content: "";

border-top: 10px solid #214eff;

border-left: 8px solid transparent;

border-right: 8px solid transparent;

position: absolute;

bottom: -12px;

left: 12px;

}

/*动画效果*/

@-webkit-keyframes progress-bar-stripes {

from {

background-position: 35px 0;

}

to {

background-position: 0 0;

}

}

@keyframes progress-bar-stripes {

from {

background-position: 35px 0;

}

to {

background-position: 0 0;

}

}

/*背景效果*/

.progress-bar-striped, .progress-striped .progress-bar {

background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

-webkit-background-size: 35px 35px;

background-size: 35px 35px;

}

.progress-bar.active, .progress.active .progress-bar {

-webkit-animation: progress-bar-stripes 2s linear infinite;

-o-animation: progress-bar-stripes 2s linear infinite;

animation: progress-bar-stripes 2s linear infinite;

animation-duration: 2s;

animation-timing-function: linear;

animation-delay: 0s;

animation-iteration-count: infinite;

animation-direction: normal;

animation-fill-mode: none;

animation-play-state: running;

animation-name: progress-bar-stripes;

}

var a = 0,

timer = setInterval(function () {

a++ //10-11秒 a+=10=>1-2秒

$(".progress-value").html(a + "%");

$(".progress-bar").width(a + "%");

if (a == 80) {

clearInterval(timer);//清除定时器

$(".progress-bar").removeClass("active");

location.href = "#";//跳转链接

}

}, 100);

0%

效果:

image.png