使用方式

<link rel="stylesheet" href="/components/style/progress.css" type="text/css" />
<script defer src="/components/js/progress.js" type="text/javascript"></script>

基本用法

<div class="st_progress st_progress_line" percentage="percent">
  <div class="st_progress_bar">
    <div class="st_progress_bar_outer">
      <div class="st_progress_bar_inner"></div>
    </div>
  </div>
  <div class="st_progress_text"></div>
</div>
<div class="st_progress st_progress_line is_success" percentage="percent">
  <div class="st_progress_bar">
    <div class="st_progress_bar_outer">
      <div class="st_progress_bar_inner"></div>
    </div>
  </div>
  <div class="st_progress_text"></div>
</div>
<div class="st_progress st_progress_line is_warning" percentage="percent">
  <div class="st_progress_bar">
    <div class="st_progress_bar_outer">
      <div class="st_progress_bar_inner"></div>
    </div>
  </div>
  <div class="st_progress_text"></div>
</div>
<div class="st_progress st_progress_line is_exception" percentage="percent">
  <div class="st_progress_bar">
    <div class="st_progress_bar_outer">
      <div class="st_progress_bar_inner"></div>
    </div>
  </div>
  <div class="st_progress_text"></div>
</div>

百分比内显

<div class="st_progress st_progress_line" percentage="percent">
  <div class="st_progress_bar">
    <div class="st_progress_bar_outer" style="height:26px">
      <div class="st_progress_bar_inner">
        <div class="st_progress_bar_innerText"></div>
      </div>
    </div>
  </div>
</div>
<div class="st_progress st_progress_line is_success" percentage="percent">
  <div class="st_progress_bar">
    <div class="st_progress_bar_outer" style="height:24px">
      <div class="st_progress_bar_inner">
        <div class="st_progress_bar_innerText"></div>
      </div>
    </div>
  </div>
</div>
<div class="st_progress st_progress_line is_warning" percentage="percent">
  <div class="st_progress_bar">
    <div class="st_progress_bar_outer" style="height:22px">
      <div class="st_progress_bar_inner">
        <div class="st_progress_bar_innerText"></div>
      </div>
    </div>
  </div>
</div>
<div class="st_progress st_progress_line is_exception" percentage="percent">
  <div class="st_progress_bar">
    <div class="st_progress_bar_outer" style="height:20px">
      <div class="st_progress_bar_inner">
        <div class="st_progress_bar_innerText"></div>
      </div>
    </div>
  </div>
</div>

属性

属性	说明	类型	可选值	默认值
percentage	进度条比例	string	-	-