HTML——div进度条css
<div class="zz-gf-online">
<div class="zz-gf-process-box rel-cell">
<div class="zz-gf-process-online rel-cell float-left" style="width:{{onlineWidth}}">
<div class="zz-gf-process-flag abs-cell"></div>
</div>
<div class="zz-gf-process-sum abs-cell"></div>
<div class="zz-gf-process-value txt-c float-right " ng-bind-html="onlineRate | trustHtml"></div>
</div>
</div>
/* 在线率-start */
.zz-gf-online {
width: 100%;
height: 6rem;
background-color: #fff;
border-bottom: 1px solid #e7e7e7;
padding-top: 2rem;
}
.zz-gf-process-box {
width: 100%;
height: 2rem;
}
.zz-gf-process-online {
width: 65%;
height: 35%;
margin-left: 4rem;
margin-top: .65rem;
z-index: 30;
}
.zz-gf-process-online:before {
content: '';
width: 80%;
height: 100%;
position: absolute;
left: 0;
background: #1485ff;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-ms-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);
}
.zz-gf-process-online:after {
content: '';
width: 80%;
height: 100%;
position: absolute;
right: 0;
background: #1485ff;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-ms-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
border-right: 4px solid #fff;
}
.zz-gf-process-flag {
top: -4px;
right: 2.5px;
width: 0;
height: 0;
border-right: 1rem solid transparent;
border-bottom: 1rem solid #1485ff;
border-left: 1rem solid transparent;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-ms-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);
}
.zz-gf-process-sum {
top: .65rem;
left: 1rem;
width: 58%;
height: 35%;
/*z-index: -20;*/
margin-left: 2rem;
/* margin-top: .5rem; */
background-color: #51536c;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-ms-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
}
.zz-gf-process-value {
width: 28%;
height: 100%;
line-height: 2rem;
font-size: 2.3rem;
color: #1485ff;
margin-right: 0.5rem;
}
.zz-gf-process-value:after {
content: ' %';
color: var(--unit-font-color);
font-size: var(--unit-font-size);
}
/* 文本对齐 */
.txt-l {
text-align: left;
}
.txt-c {
text-align: center;
}
.txt-r {
text-align: right;
}
/* 盒子浮动 */
.float-left {
float: left;
}
.float-center {
float: center;
}
.float-right {
float: right;
}
/* 盒子定位*/
.abs-cell {
position: absolute;
}
.rel-cell {
position: relative;
}
.fix-cell {
position: fixed;
}
$scope.onlineWidth = 0.7 * $scope.onlineRate + '%';
这里只是一个小demo,一个用CSS3写的进度条。
如图所示:
具体代码如下: