纯 css 进度条

效果图：

如图：此文主要记录，进度条进度与进度百分比文字位置相同。

视觉效果：文字跟随进度条进度。

此为纯 css ，主要利用了：进度条进度 width 百分比与文字 padding-left 百分比相同，以此产生视觉效果。

html

<div class="box-row row2">
    <div class="box-col">
      <div class="box-item">
        <div class="box">
          <div class="buttongroups-container">
            <div id="single-selection-money"></div>
          </div>
          <div class="title">已收金额</div>
          <div class="count">
            <p class="number">￥3,828.26</p>
            <div class="range-slider">
              <div class="range">
              </div>
            </div>
            <p class="range-per">72%</p>
          </div>
        </div>
      </div>
    </div>
    <div class="box-col">
      <div class="box-item">
        <div class="box">
          <div class="buttongroups-container">
            <div id="single-selection-in"></div>
          </div>
          <div class="title">进场车次</div>
          <div class="count in-train">
            <p class="number">4985</p>
            <div class="range-slider">
              <div class="range">
              </div>
            </div>
            <p class="range-per">65.8%</p>
          </div>
        </div>
      </div>
    </div>
    <div class="box-col">
      <div class="box-item">
        <div class="box">
          <div class="buttongroups-container">
            <div id="single-selection-out"></div>
          </div>
          <div class="title">出场车次</div>
          <div class="count out-train">
            <p class="number">2628</p>
            <div class="range-slider">
              <div class="range">
              </div>
            </div>
            <p class="range-per">34.2%</p>
          </div>
        </div>
      </div>
    </div>
  </div>

css

<style>
    body {
      width: 60%;
      margin: 20px auto;
      background-color: #e7e7e7;
    }

    /* 模块共用 */
    .box-row {
      display: flex;
      justify-content: space-around;
      margin-bottom: 10px;
    }

    .box-col {
      width: 33.33%;
    }

    .box-item {
      padding-right: 10px;
      box-sizing: border-box;
    }

    .box-col:last-child .box-item {
      padding: 0;
    }

    .box {
      width: 100%;
      height: 100%;
      padding: 12px;
      background-color: #fff;
      border-radius: 3px;
      box-shadow: 0 0 5px 1px rgba(0, 0, 0, 10%);
      box-sizing: border-box;
    }

  
    /* 第二行 */
    .row2 {}

    .row2 .title {
      color: #666;
      font-size: 12px;
    }

    .row2 .number {
      margin: 6px 0;
      color: #28c5bc;
      font-weight: 700;
      font-size: 16px;
    }

    .row2 .range-slider {
      height: 6px;
      width: 100%;
      font-size: 0;
      border-radius: 3px;
      background-color: rgba(64, 224, 208, 20%);
    }

    .row2 .range {
      width: 72%;
      height: 6px;
      border-radius: 3px;
      background-color: #28c5bc;
    }

    .row2 .range-per {
      padding-left: 72%;
      margin: 6px 0 0 0;
      font-size: 12px;
      color: #999;
    }

    .row2 .in-train .number {
      color: #4199fc;
    }

    .row2 .in-train .range-slider {
      background-color: rgba(65, 153, 252, 20%);
    }

    .row2 .in-train .range {
      width: 65.8%;
      background-color: #4199fc;
    }

    .row2 .in-train .range-per {
      padding-left: 65.8%;
    }

    .row2 .out-train .number {
      color: #f44d62;
    }

    .row2 .out-train .range-slider {
      background-color: rgba(244, 77, 98, 20%);
    }

    .row2 .out-train .range {
      width: 34.2%;
      /* 进度条进度 */
      background-color: #f44d62;
    }

    .row2 .out-train .range-per {
      padding-left: 34.2%;
      /* 利用百分比内边距，制造文字跟随进度条进度的视觉效果 */
    }
  </style>

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>纯css进度条</title>
  <style>
    body {
      width: 60%;
      margin: 20px auto;
      background-color: #e7e7e7;
    }

    /* 模块共用 */
    .box-row {
      display: flex;
      justify-content: space-around;
      margin-bottom: 10px;
    }

    .box-col {
      width: 33.33%;
    }

    .box-item {
      padding-right: 10px;
      box-sizing: border-box;
    }

    .box-col:last-child .box-item {
      padding: 0;
    }

    .box {
      width: 100%;
      height: 100%;
      padding: 12px;
      background-color: #fff;
      border-radius: 3px;
      box-shadow: 0 0 5px 1px rgba(0, 0, 0, 10%);
      box-sizing: border-box;
    }

    /* 覆盖 dev 样式 */

    .dx-button-has-text .dx-button-content {
      padding: 2px 13px 3px;
      font-size: 12px;
    }

    .buttongroups-container {
      display: flex;
      justify-content: right;
      font-size: 16px;
    }

    /* 第一行 */
    .row1 .box {
      display: flex;
      align-items: center;
    }

    .row1 .park-img {
      width: 48px;
      height: 48px;
      background-color: #db1b29;
      border-radius: 6px;
    }

    .row1 .park-img img {
      width: 100%;
      height: 100%;
    }

    .row1 .sum {
      padding-left: 10px;
    }

    .row1 .sum p {
      color: #777;
      font-size: 12px;
      margin: 0;
    }

    .row1 .sum span {
      color: #363636;
      font-size: 18px;
      font-weight: 700;
    }

    /* 第二行 */
    .row2 {}

    .row2 .title {
      color: #666;
      font-size: 12px;
    }

    .row2 .number {
      margin: 6px 0;
      color: #28c5bc;
      font-weight: 700;
      font-size: 16px;
    }

    .row2 .range-slider {
      height: 6px;
      width: 100%;
      font-size: 0;
      border-radius: 3px;
      background-color: rgba(64, 224, 208, 20%);
    }

    .row2 .range {
      width: 72%;
      height: 6px;
      border-radius: 3px;
      background-color: #28c5bc;
    }

    .row2 .range-per {
      padding-left: 72%;
      margin: 6px 0 0 0;
      font-size: 12px;
      color: #999;
    }

    .row2 .in-train .number {
      color: #4199fc;
    }

    .row2 .in-train .range-slider {
      background-color: rgba(65, 153, 252, 20%);
    }

    .row2 .in-train .range {
      width: 65.8%;
      background-color: #4199fc;
    }

    .row2 .in-train .range-per {
      padding-left: 65.8%;
    }

    .row2 .out-train .number {
      color: #f44d62;
    }

    .row2 .out-train .range-slider {
      background-color: rgba(244, 77, 98, 20%);
    }

    .row2 .out-train .range {
      width: 34.2%;
      /* 进度条进度 */
      background-color: #f44d62;
    }

    .row2 .out-train .range-per {
      padding-left: 34.2%;
      /* 利用百分比内边距，制造文字跟随进度条进度的视觉效果 */
    }
  </style>
</head>

<body>
  <div class="box-row row2">
    <div class="box-col">
      <div class="box-item">
        <div class="box">
          <div class="buttongroups-container">
            <div id="single-selection-money"></div>
          </div>
          <div class="title">已收金额</div>
          <div class="count">
            <p class="number">￥3,828.26</p>
            <div class="range-slider">
              <div class="range">
              </div>
            </div>
            <p class="range-per">72%</p>
          </div>
        </div>
      </div>
    </div>
    <div class="box-col">
      <div class="box-item">
        <div class="box">
          <div class="buttongroups-container">
            <div id="single-selection-in"></div>
          </div>
          <div class="title">进场次数</div>
          <div class="count in-train">
            <p class="number">4985</p>
            <div class="range-slider">
              <div class="range">
              </div>
            </div>
            <p class="range-per">65.8%</p>
          </div>
        </div>
      </div>
    </div>
    <div class="box-col">
      <div class="box-item">
        <div class="box">
          <div class="buttongroups-container">
            <div id="single-selection-out"></div>
          </div>
          <div class="title">出场次数</div>
          <div class="count out-train">
            <p class="number">2628</p>
            <div class="range-slider">
              <div class="range">
              </div>
            </div>
            <p class="range-per">34.2%</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>
  <br>
  <div class="ps">

    <div>---------------------------------------------- 我是华丽的分隔线 ----------------------------------------------</div>
    <h3>下面的为重点：</h3>
    <pre>
      <code>
        .row2 .out-train .range {
          width: 34.2%;
          /* 宽度百分比，制造进度条进度视觉效果 */
          background-color: #f44d62;
        }
    
        .row2 .out-train .range-per {
          padding-left: 34.2%;
          /* 利用百分比内边距，制造文字跟随进度条进度的视觉效果 */
        }
      </code>
    </pre>
  </div>
</body>

</html>

View Code

posted @ 2021-10-08 18:31 前端开发小姐姐阅读(747) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

小白历险记~

学无止境

纯 css 进度条

公告