进度条
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
默认效果
圆角效果(追加radius类名)
其他颜色
HTML
SCSS
CSS
<div class="hui-progress"> <div class="hui-progress-bar"> <span class="sr-only" style="width:25%"></span> </div> </div>
@mixin transition($v) { transition: $v; } @mixin transform($v) { transform: $v; } .hui-progress { overflow: hidden; width: 400px; height: 10px; font-size: 0; line-height: 0; .hui-progress-bar { width: 100%; background-color: #efefef; height: 10px; font-size: 0; line-height: 0; .sr-only { height: 10px; font-size: 0; line-height: 0; display: inline-block; background-color: #337ab7; @include boxShadow(inset 0 -1px 0 rgba(0, 0, 0, .15)); @include transition(width .6s ease); } &.hui-progress-bar-success .sr-only { background-color: #5cb85c; } &.hui-progress-bar-warning .sr-only { background-color: #f0ad4e; } &.hui-progress-bar-danger .sr-only { background-color: #d9534f; } } }
.hui-progress { overflow: hidden; width: 400px; height: 10px; font-size: 0; line-height: 0; } .hui-progress .hui-progress-bar { width: 100%; background-color: #efefef; height: 10px; font-size: 0; line-height: 0; } .hui-progress .hui-progress-bar .sr-only { height: 10px; font-size: 0; line-height: 0; display: inline-block; background-color: #337ab7; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); transition: width 0.6s ease; } .hui-progress .hui-progress-bar.hui-progress-bar-success .sr-only { background-color: #5cb85c; } .hui-progress .hui-progress-bar.hui-progress-bar-warning .sr-only { background-color: #f0ad4e; } .hui-progress .hui-progress-bar.hui-progress-bar-danger .sr-only { background-color: #d9534f; }