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写的进度条。
如图所示:
具体代码如下: