html5音頻控制進(jìn)度條

tml5中實(shí)現(xiàn)音頻的話可以用新增的屬性video，但是都會(huì)發(fā)現(xiàn)其自帶的控制進(jìn)度條非常不好看，所有很多人都會(huì)自定義它們的控制進(jìn)度條，今天就來(lái)做一下音頻控制進(jìn)度條！

點(diǎn)擊播放后即可看到進(jìn)度條的圓點(diǎn)在相對(duì)于的動(dòng)起來(lái)

代碼

html結(jié)構(gòu)：

css樣式：

javascript：

載說(shuō)明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載

開(kāi)發(fā)背景

在當(dāng)今快節(jié)奏的數(shù)字世界中，用戶體驗(yàn)是網(wǎng)站開(kāi)發(fā)的關(guān)鍵方面之一。提升用戶體驗(yàn)的一種有效方式是在您的網(wǎng)站或應(yīng)用程序中加入進(jìn)度條。

考慮到您正在為一個(gè)云存儲(chǔ)應(yīng)用構(gòu)建在線文件上傳功能。當(dāng)用戶上傳文件時(shí)，他們通常希望了解上傳進(jìn)度，以估計(jì)剩余時(shí)間或確保上傳過(guò)程成功完成。

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

在這篇博客文章中，我們將探討進(jìn)度條的威力以及如何使用流行的實(shí)用型CSS框架Tailwind CSS輕松創(chuàng)建它們。讓我們開(kāi)始吧！

為什么進(jìn)度條很重要？

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

創(chuàng)建 Tailwind CSS 入門(mén)環(huán)境

如果已經(jīng)知道怎么安裝 TailwindCSS ，可以忽略這一小節(jié)。

原文并沒(méi)有提及安裝方式，我也嘗試了官網(wǎng)的建議，也沒(méi)有達(dá)到理想的效果，只能自己在那折騰，現(xiàn)在把安裝過(guò)程分享給大家。

1、首先建立項(xiàng)目文件夾，初始化項(xiàng)目

mkdir demo
cd demo
npm init -y

2、接下來(lái)在項(xiàng)目的文件夾里安裝相關(guān)依賴(lài)

npm install tailwindcss postcss autoprefixer postcss-cli

3、接下來(lái)在項(xiàng)目文件夾里新建如下文件夾和文件

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

4、在此文件夾中創(chuàng)建一個(gè)新的Tailwind CSS配置文件：

npx tailwindcss init

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

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

5、接下來(lái)我們?cè)陧?xiàng)目的根目里新建個(gè) tailwind.css 文件，文件名你可以隨意

touch tailwind.css

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

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

6、最后回到 index.html 文件，編寫(xiě)如下代碼，注意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 ">歡迎來(lái)到前端達(dá)人</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、最后運(yùn)行 npm run build ，打開(kāi)index.html ，一切正常的話就會(huì)看到如下效果。

1. 帶有圓角的基本進(jìn)度條

這是帶有圓角的基本進(jìn)度條，易于集成。

<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>

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

2. 帶有銳利邊緣的瘦型進(jìn)度條

如果您喜歡帶有銳利邊緣的較窄進(jìn)度條，您可以相應(yīng)地修改類(lèi)。

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

上述代碼片段將創(chuàng)建一個(gè)更窄的進(jìn)度條，具有灰色背景和紫色填充，表示75％的進(jìn)度。

3. 帶有標(biāo)簽的進(jìn)度條

在進(jìn)度條上添加一個(gè)標(biāo)簽可以提供額外的上下文。我們可以通過(guò)在進(jìn)度條內(nèi)部包含一個(gè)文本元素來(lái)實(shí)現(xiàn)這一點(diǎn)。

<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>

在這段代碼片段中，一個(gè)百分比標(biāo)簽被放置在進(jìn)度條的中心，提供了進(jìn)度的清晰可視化表示。

4. 動(dòng)畫(huà)進(jìn)度條

如果你想給進(jìn)度條添加條紋動(dòng)畫(huà)效果，我們可以通過(guò)一些額外的CSS類(lèi)來(lái)實(shí)現(xiàn)。

<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>

這段代碼片段創(chuàng)建了一個(gè)帶有條紋動(dòng)畫(huà)效果的進(jìn)度條。進(jìn)度條填充容器的50％，而條紋動(dòng)畫(huà)從左向右移動(dòng)，給出了進(jìn)度的視覺(jué)指示。

5. 底部文字的直線進(jìn)度條

此進(jìn)度條允許添加外部底部文本（進(jìn)度百分比），同時(shí)顯示進(jìn)度。

<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>

在這段代碼片段中，一個(gè)百分比標(biāo)簽和文本被放置在進(jìn)度條下方，提供了進(jìn)度的清晰可視化表示。

6. 垂直進(jìn)度條

這個(gè)進(jìn)度條是垂直方向的。使用 flex-col 類(lèi)來(lái)將元素對(duì)齊為列方向。

<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>

進(jìn)度條的高度是使用 h-24 類(lèi)設(shè)置的，填充量是通過(guò)調(diào)整內(nèi)部 div 的高度來(lái)表示的，該高度使用 h-full 類(lèi)進(jìn)行調(diào)整。

7. 溫度計(jì)進(jìn)度條

這個(gè)進(jìn)度條是圓角形狀的。

<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>

這是一種完全不同的進(jìn)度條，我們通過(guò)在上面的代碼片段中應(yīng)用填充來(lái)制作它。

外部的 div 與 rounded-full 和 border 類(lèi)創(chuàng)建了圓形容器。根據(jù)指定的百分比填充進(jìn)度，并通過(guò)設(shè)置 height 和 width 的百分比值來(lái)實(shí)現(xiàn)圓形形狀。

我們還可以在50%或任何其他位置添加一個(gè)圓圈。它將代表一些終點(diǎn)或目標(biāo)點(diǎn)，以便在任務(wù)中輕松獲得進(jìn)展。

<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>

內(nèi)部的 div 代表進(jìn)度，使用 absolute 類(lèi)在外部容器中定位。

8. 多彩進(jìn)度條

這個(gè)進(jìn)度條被分成了多個(gè)不同顏色的部分，每個(gè)部分代表著進(jìn)度的特定百分比。

<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>

在這個(gè)片段中，我們有三種不同的顏色，每種顏色都有不同的百分比。這些顏色代表了使用不同顏色來(lái)表示總體進(jìn)展和子任務(wù)進(jìn)展的進(jìn)度。

每個(gè)部分由一個(gè)單獨(dú)的 div 標(biāo)簽定義，使用 bg-green-500 類(lèi)設(shè)置寬度的百分比值。不同的部分可以有不同的顏色，我們可以根據(jù)需求調(diào)整部分的數(shù)量和寬度。

9. 漸變進(jìn)度條

這個(gè)進(jìn)度條利用漸變效果來(lái)創(chuàng)建顏色的平滑過(guò)渡。

<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 類(lèi)應(yīng)用從左到右的漸變，從 from-green-500 指定的顏色開(kāi)始，到 to-blue-500 指定的顏色結(jié)束。 w-1/2 類(lèi)將每個(gè)漸變部分的寬度設(shè)置為50％，創(chuàng)建兩個(gè)相等的段。

我們還可以使用它來(lái)修改任何樣式，使其更具互動(dòng)性，以展示任務(wù)的進(jìn)展情況，就像這樣

<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. 多彩多段的進(jìn)度條

這個(gè)進(jìn)度條被分成了多個(gè)不同顏色的部分，每個(gè)部分代表著進(jìn)度的特定百分比。

<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>

在這個(gè)片段中，我們?cè)O(shè)計(jì)了具有不同顏色和進(jìn)度百分比的進(jìn)度步驟。此外，底部欄的文本表示整體進(jìn)度，而內(nèi)部文本表示步驟的進(jìn)度。

每個(gè)部分由一個(gè)單獨(dú)的 div 標(biāo)簽定義，使用 bg-red-500 類(lèi)設(shè)置寬度的百分比值。不同的部分可以有不同的顏色，我們可以根據(jù)需要調(diào)整部分的數(shù)量和寬度。

這些只是使用Tailwind CSS可以創(chuàng)建的進(jìn)度條的幾個(gè)示例。通過(guò)組合各種實(shí)用類(lèi)和自定義樣式，您可以創(chuàng)建符合設(shè)計(jì)要求的進(jìn)度條。

不要忘記添加必要的Tailwind CSS類(lèi)和內(nèi)聯(lián)樣式，以調(diào)整進(jìn)度條的寬度、顏色和動(dòng)畫(huà)，以滿足您的喜好。借助Tailwind CSS的靈活實(shí)用類(lèi)，可能性是無(wú)限的！

結(jié)束

在整片文章中，我們探討了如何使用Tailwind CSS創(chuàng)建美觀且可定制的進(jìn)度條。借助其豐富的實(shí)用類(lèi)集合，Tailwind CSS為您提供了一種簡(jiǎn)單高效的方式來(lái)樣式化和定制進(jìn)度條，以滿足您的設(shè)計(jì)需求。

我們首先創(chuàng)建了基本的圓角和纖細(xì)的進(jìn)度條，然后在進(jìn)度條上添加了標(biāo)簽，為用戶提供了額外的上下文信息。

為了增加視覺(jué)效果，我們嘗試了帶有條紋效果的動(dòng)畫(huà)進(jìn)度條。通過(guò)結(jié)合類(lèi)別如 animate-pulse 和 animate-stripes ，我們創(chuàng)建了動(dòng)態(tài)而吸引人的進(jìn)度條。

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

由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識(shí)，歡迎關(guān)注我，您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。

此文為大家推薦一些實(shí)用的進(jìn)度條狀態(tài)，希望對(duì)大家在以后的前端開(kāi)發(fā)過(guò)程中，有所幫助！

1、NProgress（在 Ajax’y 應(yīng)用顯示細(xì)長(zhǎng)型進(jìn)度條）

2、progress.js（為頁(yè)面任何對(duì)象創(chuàng)建和管理進(jìn)度條）

3、progressbar.js（用 SVG path 動(dòng)畫(huà)制作的、漂亮和響應(yīng)式的進(jìn)度條）

4、nanobar（非常輕量的進(jìn)度條。不依賴(lài) jQuery）

5、PageLoadingEffects（使用 SVG 動(dòng)畫(huà)展現(xiàn)新內(nèi)容的現(xiàn)代方式）

6、css-loaders（運(yùn)用 CSS 動(dòng)畫(huà)的旋轉(zhuǎn)加載指示器的集合）

切版 qieban(.cn)

在線咨詢(xún)

上一篇：基于HTML5 構(gòu)建的 Web端現(xiàn)代化PDF在線預(yù)覽插件-PDF.js
下一篇：前端高級(jí)之路：寫(xiě)一個(gè)高逼格可視化“圓環(huán)”

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商