html5音頻控制進度條

tml5中實現音頻的話可以用新增的屬性video，但是都會發現其自帶的控制進度條非常不好看，所有很多人都會自定義它們的控制進度條，今天就來做一下音頻控制進度條！

點擊播放后即可看到進度條的圓點在相對于的動起來

代碼

html結構：

css樣式：

javascript：

載說明：原創不易，未經授權，謝絕任何形式的轉載

開發背景

在當今快節奏的數字世界中，用戶體驗是網站開發的關鍵方面之一。提升用戶體驗的一種有效方式是在您的網站或應用程序中加入進度條。

考慮到您正在為一個云存儲應用構建在線文件上傳功能。當用戶上傳文件時，他們通常希望了解上傳進度，以估計剩余時間或確保上傳過程成功完成。

通過將進度條集成到文件上傳功能中，您可以向用戶提供實時反饋，讓他們了解文件上傳的進度。這樣可以減少不確定性，提供對上傳過程的控制感，從而提升用戶體驗。

在這篇博客文章中，我們將探討進度條的威力以及如何使用流行的實用型CSS框架Tailwind CSS輕松創建它們。讓我們開始吧！

為什么進度條很重要？

進度條是在提供視覺反饋和管理用戶期望方面非常寶貴的工具。它們傳達了一種完成感，減少了焦慮，并增加了用戶的參與度。無論是文件上傳、表單提交還是需要時間的操作，一個設計良好的進度條可以讓用戶了解并參與其中，從而獲得更加令人滿意的用戶體驗。

創建 Tailwind CSS 入門環境

如果已經知道怎么安裝 TailwindCSS ，可以忽略這一小節。

原文并沒有提及安裝方式，我也嘗試了官網的建議，也沒有達到理想的效果，只能自己在那折騰，現在把安裝過程分享給大家。

1、首先建立項目文件夾，初始化項目

mkdir demo
cd demo
npm init -y

2、接下來在項目的文件夾里安裝相關依賴

npm install tailwindcss postcss autoprefixer postcss-cli

3、接下來在項目文件夾里新建如下文件夾和文件

mkdir dist
cd dist
mkdir css
cd css
touch styles.css
cd ../
touch index.html

4、在此文件夾中創建一個新的Tailwind CSS配置文件：

npx tailwindcss init

這將在項目根目錄創建一個名為“tailwind.config.js”的文件，其中包含一些默認配置，我們需要修改content的內容，如下所示：

module.exports = {
  content: ['./dist/**/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

5、接下來我們在項目的根目里新建個 tailwind.css 文件，文件名你可以隨意

touch tailwind.css

然后在空白的文件里，添加如下代碼：

@tailwind base;
@tailwind components;
@tailwind utilities;

6、最后回到 index.html 文件，編寫如下代碼，注意CSS的引用。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Project</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-red-500 flex items-center justify-center min-h-screen">
<h1 class="text-3xl text-white ">歡迎來到前端達人</h1>
</body>
</html>

7、最后配置 package.json 文件，主要是這部分的修改

 "scripts": {
    "build": "postcss tailwind.css -o dist/css/styles.css",
    "watch": "postcss tailwind.css -o dist/css/styles.css --watch"
  }

8、最后運行 npm run build ，打開index.html ，一切正常的話就會看到如下效果。

1. 帶有圓角的基本進度條

這是帶有圓角的基本進度條，易于集成。

<div class="mb-5 h-2 rounded-full bg-gray-200">
  <div class="h-2 rounded-full bg-orange-500" style="width: 50%"></div>
</div>

上面給出的代碼片段將生成一個帶有灰色背景和橙色填充的進度條，表示進度為50%。

2. 帶有銳利邊緣的瘦型進度條

如果您喜歡帶有銳利邊緣的較窄進度條，您可以相應地修改類。

<div class="mb-5 h-1 bg-gray-200">
  <div class="h-1 bg-purple-500" style="width: 75%"></div>
</div>

上述代碼片段將創建一個更窄的進度條，具有灰色背景和紫色填充，表示75％的進度。

3. 帶有標簽的進度條

在進度條上添加一個標簽可以提供額外的上下文。我們可以通過在進度條內部包含一個文本元素來實現這一點。

<div class="relative mb-5 h-2 rounded-full bg-gray-200">
  <div class="h-2 rounded-full bg-red-500" style="width: 25%"></div>
  <span class="absolute inset-0 flex items-center justify-center text-sm font-medium text-gray-900">25%</span>
</div>

在這段代碼片段中，一個百分比標簽被放置在進度條的中心，提供了進度的清晰可視化表示。

4. 動畫進度條

如果你想給進度條添加條紋動畫效果，我們可以通過一些額外的CSS類來實現。

<div class="mb-5 h-2 overflow-hidden rounded-full bg-gray-200">
  <div class="h-2 animate-pulse rounded-full bg-gray-800" style="width: 50%">
    <div class="h-full w-full translate-x-full transform bg-white"></div>
  </div>
</div>

這段代碼片段創建了一個帶有條紋動畫效果的進度條。進度條填充容器的50％，而條紋動畫從左向右移動，給出了進度的視覺指示。

5. 底部文字的直線進度條

此進度條允許添加外部底部文本（進度百分比），同時顯示進度。

<div class="relative mb-5 pt-1">
  <div class="mb-4 flex h-2 overflow-hidden rounded bg-gray-100 text-xs">
    <div style="width: 80%" class="bg-green-500"></div>
  </div>
  <div class="mb-2 flex items-center justify-between text-xs">
    <div class="text-gray-600">Progress</div>
    <div class="text-gray-600">100%</div>
  </div>
</div>

在這段代碼片段中，一個百分比標簽和文本被放置在進度條下方，提供了進度的清晰可視化表示。

6. 垂直進度條

這個進度條是垂直方向的。使用 flex-col 類來將元素對齊為列方向。

<div class="flex">
  <div class="mb-5 ml-5 flex flex-col items-center">
    <div class="h-24 w-5 overflow-hidden rounded-md bg-gray-300">
      <div class="h-full bg-yellow-800" style="height: 50%"></div>
    </div>
    <span class="mt-2 text-xs text-gray-600">50%</span>
  </div>
  <div class="mb-5 ml-5 flex flex-col items-center">
    <div class="h-24 w-10 overflow-hidden rounded-full bg-gray-300">
      <div class="h-full bg-yellow-500" style="height: 75%"></div>
    </div>
    <span class="mt-2 text-xs text-gray-600">75%</span>
  </div>
  <div class="mb-5 ml-5 flex flex-col items-center">
    <div class="h-24 w-10 overflow-hidden rounded-full bg-gray-200">
      <div class="h-full bg-gradient-to-t from-gray-200 via-blue-400 to-blue-600" style="height: 60%"></div>
    </div>
    <span class="mt-2 text-xs text-gray-600">60%</span>
  </div>
</div>

進度條的高度是使用 h-24 類設置的，填充量是通過調整內部 div 的高度來表示的，該高度使用 h-full 類進行調整。

7. 溫度計進度條

這個進度條是圓角形狀的。

<div class="relative mb-5">
  <div class="rounded-full border border-red-500 p-1">
    <div class="flex h-6 items-center justify-center rounded-full bg-red-300 text-xs leading-none" style="width: 85%; height: 85%;">
      <span class="p-1 text-white">85%</span>
    </div>
  </div>
</div>

這是一種完全不同的進度條，我們通過在上面的代碼片段中應用填充來制作它。

外部的 div 與 rounded-full 和 border 類創建了圓形容器。根據指定的百分比填充進度，并通過設置 height 和 width 的百分比值來實現圓形形狀。

我們還可以在50%或任何其他位置添加一個圓圈。它將代表一些終點或目標點，以便在任務中輕松獲得進展。

<div class="relative my-20 mx-5">
  <div class="rounded-full border border-red-500 p-1">
    <div class="flex h-6 items-center justify-center rounded-full bg-red-300 text-xs leading-none" style="width: 85%; height: 85%;">
      <span class="p-1 text-white">85%</span>
    </div>
  </div>
  <div class="absolute inset-0 flex items-center justify-center">
    <div class="h-8 w-8 rounded-full bg-red-500"></div>
  </div>
</div>

內部的 div 代表進度，使用 absolute 類在外部容器中定位。

8. 多彩進度條

這個進度條被分成了多個不同顏色的部分，每個部分代表著進度的特定百分比。

<div class="relative my-20 mx-5 pt-1">
  <div class="mb-4 flex h-2 overflow-hidden rounded bg-gray-100 text-xs">
    <div style="width: 10%" class="bg-green-500 transition-all duration-500 ease-out"></div>
    <div style="width: 25%" class="bg-yellow-500 transition-all duration-500 ease-out"></div>
    <div style="width: 20%" class="bg-red-500 transition-all duration-500 ease-out"></div>
  </div>
  <div class="mb-2 flex items-center justify-between text-xs">
    <div class="text-gray-600">Progress</div>
    <div class="text-gray-600">100%</div>
  </div>
</div>

在這個片段中，我們有三種不同的顏色，每種顏色都有不同的百分比。這些顏色代表了使用不同顏色來表示總體進展和子任務進展的進度。

每個部分由一個單獨的 div 標簽定義，使用 bg-green-500 類設置寬度的百分比值。不同的部分可以有不同的顏色，我們可以根據需求調整部分的數量和寬度。

9. 漸變進度條

這個進度條利用漸變效果來創建顏色的平滑過渡。

<div class="mb-5 h-4 overflow-hidden rounded-full bg-gray-200">
  <div class="h-4 animate-pulse rounded-full bg-gradient-to-r from-green-500 to-blue-500" style="width: 75%"></div>
</div>

bg-gradient-to-r 類應用從左到右的漸變，從 from-green-500 指定的顏色開始，到 to-blue-500 指定的顏色結束。 w-1/2 類將每個漸變部分的寬度設置為50％，創建兩個相等的段。

我們還可以使用它來修改任何樣式，使其更具互動性，以展示任務的進展情況，就像這樣

<div class="relative mb-5 h-5 rounded-full bg-gray-200">
  <div class="h-full animate-pulse rounded-full bg-blue-500" style="width: 75%">
    <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white">75%</span>
  </div>
</div>

10. 多彩多段的進度條

這個進度條被分成了多個不同顏色的部分，每個部分代表著進度的特定百分比。

<div class="relative">
  <div class="mb-4 flex h-5 overflow-hidden rounded bg-gray-100 text-xs">
    <div class="flex flex-col justify-center bg-red-500 text-white" style="width: 25%;">
      <span class="text-center">25%</span>
    </div>
    <div class="flex flex-col justify-center bg-red-400 text-white" style="width: 25%;">
      <span class="text-center">25%</span>
    </div>
    <div class="flex flex-col justify-center bg-red-300 text-white" style="width: 25%;">
      <span class="text-center">25%</span>
    </div>
    <div class="flex flex-col justify-center bg-red-200 text-white" style="width: 25%;">
      <span class="text-center">25%</span>
    </div>
  </div>
  <div class="mb-2 flex items-center justify-between text-xs">
    <div class="text-gray-600">Progress</div>
    <div class="text-gray-600">100%</div>
  </div>
</div>

在這個片段中，我們設計了具有不同顏色和進度百分比的進度步驟。此外，底部欄的文本表示整體進度，而內部文本表示步驟的進度。

每個部分由一個單獨的 div 標簽定義，使用 bg-red-500 類設置寬度的百分比值。不同的部分可以有不同的顏色，我們可以根據需要調整部分的數量和寬度。

這些只是使用Tailwind CSS可以創建的進度條的幾個示例。通過組合各種實用類和自定義樣式，您可以創建符合設計要求的進度條。

不要忘記添加必要的Tailwind CSS類和內聯樣式，以調整進度條的寬度、顏色和動畫，以滿足您的喜好。借助Tailwind CSS的靈活實用類，可能性是無限的！

結束

在整片文章中，我們探討了如何使用Tailwind CSS創建美觀且可定制的進度條。借助其豐富的實用類集合，Tailwind CSS為您提供了一種簡單高效的方式來樣式化和定制進度條，以滿足您的設計需求。

我們首先創建了基本的圓角和纖細的進度條，然后在進度條上添加了標簽，為用戶提供了額外的上下文信息。

為了增加視覺效果，我們嘗試了帶有條紋效果的動畫進度條。通過結合類別如 animate-pulse 和 animate-stripes ，我們創建了動態而吸引人的進度條。

此外，我們嘗試了不同的樣式，包括漸變進度條、垂直進度條、圓形進度條和多彩進度條。這些變化使我們能夠創建出視覺上吸引人的進度指示器，可以根據具體項目需求進行定制。

由于文章內容篇幅有限，今天的內容就分享到這里，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請別忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想獲取更多前端技術的知識，歡迎關注我，您的支持將是我分享最大的動力。我會持續輸出更多內容，敬請期待。

此文為大家推薦一些實用的進度條狀態，希望對大家在以后的前端開發過程中，有所幫助！

1、NProgress（在 Ajax’y 應用顯示細長型進度條）

2、progress.js（為頁面任何對象創建和管理進度條）

3、progressbar.js（用 SVG path 動畫制作的、漂亮和響應式的進度條）

4、nanobar（非常輕量的進度條。不依賴 jQuery）

5、PageLoadingEffects（使用 SVG 動畫展現新內容的現代方式）

6、css-loaders（運用 CSS 動畫的旋轉加載指示器的集合）

切版 qieban(.cn)

在線咨詢

上一篇：基于HTML5 構建的 Web端現代化PDF在線預覽插件-PDF.js
下一篇：前端高級之路：寫一個高逼格可視化“圓環”

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商