jQuery 进度条小插件

以百分比显示处理进度。通过改变元素宽度来实现。

jQuery，进度条

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2621
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

#container {
    text-align: center;
    margin: 20px;
}
h2 {
    color: #CCC;
}
a {
    text-decoration: none;
    color: #EC5C93;
}
.bar-main-container {
    margin: 10px auto;
    width: 300px;
    height: 50px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-family: sans-serif;
    font-weight: normal;
    font-size: 0.8em;
    color: #FFF;
}
.wrap {
    padding: 8px;
}
.bar-percentage {
    float: left;
    background: rgba(0, 0, 0, 0.13);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 9px 0px;
    width: 18%;
    height: 16px;
}
.bar-container {
    float: right;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 0.13);
    width: 78%;
    margin: 12px 0px;
    overflow: hidden;
}
.bar {
    float: left;
    background: #FFF;
    height: 100%;
    -webkit-border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    border-radius: 10px 0px 0px 10px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}
/* COLORS */

.azure {
    background: #38B1CC;
}
.emerald {
    background: #2CB299;
}
.violet {
    background: #8E5D9F;
}
.yellow {
    background: #EFC32F;
}
.red {
    background: #E44C41;
}

HTML

以百分比显示处理进度。通过改变元素宽度来实现。