如何使用HTML和CSS建立進度條
- WBOY轉載
- 2023-09-05 09:09:111421瀏覽
概述
進度條是任何 Web 應用程式的主要元件。進度表示某個專案或任務的完成情況。在本模組中，我們將使用 HTML 建立進度條，並透過 CSS 對其進行樣式設定。我們還將為進度條提供進度動畫。在此任務中，我們將使用 @keyframes 來使進度條動畫化。使用動畫樣式屬性，例如動畫持續時間、名稱、計時等。
演算法
第 1 步 - 在文字編輯器中建立 HTML 樣板。
第 2 步 - 建立父 div 容器並將類別名稱定義為 barContainer。
第 3 步 - 現在建立目前父 div 的另一個子層級並定義類別名稱。
第 4 步 - 建立一個在進度中繼承的子級，該子級將會被動畫化。
步驟 5 - 使用頁面 head 標籤內的連結標籤將樣式表連結到網頁。
第 6 步 - 建立一個新檔案 style.css 並設定頁面樣式，使用動畫屬性在進度條中建立動畫。
第 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等腳本語言來建立進度條。
以上是如何使用HTML和CSS建立進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章！