2. 程式人生 > 其它 >純 css 進度條

純 css 進度條

阿新 • • 發佈：2021-10-08

效果圖：

如圖：此文主要記錄，進度條進度與進度百分比文字位置相同。

視覺效果：文字跟隨進度條進度。

此為純 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

相關推薦

純 css 進度條

效果圖： 如圖：此文主要記錄，進度條進度與進度百分比文字位置相同。 視覺效果：文字跟隨進度條進度。

每日CSS_純CSS製作進度條

每日CSS_純CSS製作進度條 2020_12_26 原始碼 1. 程式碼解析 1.1 html 程式碼解析 設定整個容器

javascript+css實現進度條效果

本文例項為大家分享了Android九宮格圖片展示的具體程式碼，供大家參考，具體內容如下

jquery css實現流程進度條

本文例項為大家分享了jquery css實現流程進度條的具體程式碼，供大家參考，具體內容如下

CSS+JS 實現動態曲線進度條

由於系統UI風格升級，產品童鞋和UI童鞋總是想要搞點兒事情出來，專案頁面上的進度條從直線變成了曲線，哈哈，好吧，那就迎難而上

css+js實現水波狀進度條動畫

技術標籤：JS、jQuerycss水波紋動畫css進度條動畫css水波進度 進度條在前端很常見，效果也多種多樣，慢慢積累。

純前端 - 各種實現進度條

技術標籤：cssjshtml前端 純前端 - 各種實現進度條 基礎版 - div進階版 - input高階版 - progress終極版 - meter

純css美化滾動條樣式

https://www.emperinter.info/2020/09/20/scrollbar-in-browser/ 自己完善自己部落格再Ipad等移動端的選單時選用了左右滑動的選單模式！當然就會使用到滾動條了，而預設的滾動條有多醜大家清楚吧！就搜到了純CSS美

前端 圓形進度圖_web前端入門到實戰：CSS實現圓形進度條

技術標籤：前端 圓形進度圖 示例圖 結構 首先一個父級div設定相對定位，內部含有四個半圓div和一個用於遮罩的小圓div

vue+css實現的步驟條（專案時間進度條）效果

技術標籤：htmlcss 進行作業時，因為element提供的步驟條樣式太少了，就自己寫了個，整體效果如圖所示 功能： 可以根據所傳的陣列，去分佈步驟條的總需步驟 根據數組裡物件的state屬性，可以顯示步驟條的進度

CSS樣式（一）實現頁面載入進度條

技術標籤：CSScsshtml 一、動畫樣式 #global_loading{ background: linear-gradient(to right,rgb(73, 149, 221),#fff,rgb(173, 203, 231));

Css 偽元素控制進度條_Css控制滾動條_Css ::-webkit-scrollbar整理

一、webkt瀏覽器進度條設定 主要有下面7個屬性 ::-webkit-scrollbar滾動條整體部分，可以設定寬度啥的

純css實現 移動端 左右滑動（隱藏滾動條）【轉載 https://www.cnblogs.com/fanqiuzhuji/p/12626919.html】

/*方法一*/.nav_mine {padding: 15px 20px;border-bottom: 1px solid #aca9a7;height: 75px;display: flex;align-items: center;overflow-y: hidden;flex-wrap: nowrap;/*overflow-x: hidden*/}.nav_mine .nav_ite

css實現炫酷進度條

實現效果： 程式碼內容： <div className={styles.progressBox}> <div className={styles.progress}></div>

Qt自定義控制元件實現圓盤進度條

本文例項為大家分享了Qt圓盤進度條的具體程式碼，供大家參考，具體內容如下

Qt自定義控制元件實現圓圈載入進度條

本文例項為大家分享了Qt實現圓圈載入進度條的具體程式碼，供大家參考，具體內容如下

Java Swing JProgressBar進度條的實現示例

1. 概述 官方JavaDocsApi: javax.swing.JProgressBar JProgressBar，進度條。 以視覺化形式顯示某些任務進度的元件。

Android WebView實現頂部進度條

專案中用到WebView加上進度條放在頂部，讓使用者知道載入進度情況，可以提高使用者體驗：

Android實現帶進度條的WebView

在載入H5頁面的時候，可能由於網路、頁面內容複雜度等原因，導致載入過程出現空白，加上進度條可以有效提高使用者體驗

Android Shape屬性建立環形進度條

1，實現效果 2，實現程式碼： 【1】 shape_drawable.xml檔案 <?xml version=\"1.0\" encoding=\"utf-8\"?>