資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 HTML 和 CSS 建立進度條
概述
進度條是任何 Web 應用程式的主要元件。進度條顯示某個專案或任務的完成情況。在本模組中，我們將使用 HTML 構建進度條，並透過 CSS 對其進行樣式設定。我們還將為進度條提供進度動畫。在此任務中，我們將使用 @keyframes 使進度條動畫化。使用動畫樣式屬性，例如動畫持續時間、名稱、時間等。
演算法
步驟 1 - 在文字編輯器中建立一個 HTML 基本結構。
步驟 2 - 建立父 div 容器並將其類名定義為 barContainer。
步驟 3 - 現在建立當前父 div 的另一個子元素並定義類名。
步驟 4 - 建立一個繼承在進度條內部的子元素，它將被動畫化。
步驟 5 - 使用頁面 head 標籤內的 link 標籤將樣式錶鏈接到網頁。
步驟 6 - 建立一個名為 style.css 的新檔案並設定頁面樣式，使用 animation 屬性在 progressBar 中建立動畫。
步驟 7 - 進度條建立成功。
示例
在此示例中，我們將使用 HTML 和 CSS 建立一個簡單的進度條。其中 index.html 是主頁面，是頁面的骨架，我們只建立了元件的框架，所有動畫和樣式部分都在 style.css 部分完成。style.css 檔案包含元件的樣式和動畫部分。
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Progress Bar</title>
<style>
* {
margin: 0;
}
.barContainer {
min-height: 100vh;
width: 100vw;
display: flex;
align-items: center;
}
.progress,.progressBar {
width: 20rem;
height: 2rem;
border-radius: 1.2rem;
margin: auto;
background-color: rgb(243, 243, 243);
}
.progressBar{
background-color: green;
animation: backp 3s;
margin: 0;
padding: 0;
width: 80%;
height: 2rem;
border-radius: 1rem;
box-shadow: none;
}
span{
color: white;
text-align: end;
display: block;
padding: 0.5rem;
}
@keyframes backp {
0% {
width: 0%;
}
100%{
width: 80%;
}
}
</style>
</head>
<body>
<div class="barContainer">
<div class="progress">
<div class="progressBar">
<span> 80% Completed</span>
</div>
</div>
</div>
</body>
</html>
下圖顯示了輸出，顯示了一個在頁面載入時載入的進度條，因為我們只使用了 css，所以進度條的進度固定為 80%。因此，建立此進度條是為了演示那些包含課程完成等任務的應用程式。因此，為了跟蹤任務的完成情況，這是以圖形使用者介面形式表示它的完美方式。
結論
進度條用於許多應用程式，例如安裝更新、下載任何應用程式、載入應用程式等等。進度條使使用者介面更具吸引力。要即時執行進度條，我們不能只使用 HTML 和 CSS 來實現，因此為了在即時專案中獲得進度條，我們還需要使用 Javascript 這種指令碼語言，它可以檢查網路連線以及網路的上傳和下載，從而我們可以使進度條的進度。使用 HTML 和 CSS 只能用於建立靜態進度條。因此，通常建議使用 Javascript 等指令碼語言來建立進度條。
2K+ 閱讀量
