进度条

文章转载，请注明出处 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;
}