如何使用HTML和CSS建立進度條-html教學-PHP中文網

首頁

web前端

html教學

如何使用HTML和CSS建立進度條

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 05, 2023 am 09:09 AM

csshtml進度條

如何使用HTML和CSS建立進度條

概述

進度條是任何 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中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。

JavaScript 如何实现页面加载进度条功能？Oct 27, 2023 am 08:57 AM

JavaScript如何实现页面加载进度条功能？在现代互联网应用中，页面加载速度是用户体验的关键因素之一。为了向用户展示加载过程，许多网站和应用程序会使用加载进度条。JavaScript提供了一种简单而有效的方法来实现页面加载进度条功能。具体实现过程如下：创建HTML结构首先，在页面的合适位置创建一个进度条的HTML结构，常见的是将进度条放置在

css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。

如何使用Vue实现进度条特效Sep 19, 2023 am 09:22 AM

如何使用Vue实现进度条特效进度条是常见的一种界面元素，它可以用来展示一个任务或操作的完成情况。在Vue框架中，我们可以通过一些简单的代码实现进度条的特效效果。本文将介绍如何使用Vue来实现进度条特效，并提供具体代码示例。创建Vue组件首先，我们需要创建一个Vue组件来实现进度条的功能。在Vue中，组件是可以复用的，我们可以在多个地方使用。创建一个名为Pro

如何使用HTML和CSS设置进度条的颜色？Sep 19, 2023 pm 08:25 PM

在网站开发中，进度条是网站的重要组成部分。进度条显示了进程的进度。借助它，用户可以看到网站上正在进行的工作的状态，包括加载时间、文件上传、文件下载和其他类似任务。默认情况下，它呈灰色。然而，为了使进度条突出并具有视觉吸引力，可以使用HTML和CSS来改变它们的颜色。什么是进度条？进度条用于显示任务的进度。它是一个图形用户界面元素。它基本上由一个水平条组成，随着任务的进行逐渐填充，同时伴随着百分比值或其他完成指示器。进度条在Web应用程序中用于向用户提供关于完成诸如文件上传、文件下载或软件安装等过

如何使用HTML和CSS创建进度条Sep 05, 2023 am 09:09 AM

概述进度条是任何Web应用程序的主要组件。进度表明某个项目或任务的完成情况。在本模块中，我们将使用HTML构建进度条，并通过CSS对其进行样式设置。我们还将为进度条提供进度动画。在此任务中，我们将使用@keyframes使进度条动画化。使用动画样式属性，例如动画持续时间、名称、计时等。算法第1步-在文本编辑器中创建HTML样板。第2步-创建父div容器并将类名称定义为barContainer。第3步-现在创建当前父div的另一个子级并定义类名。第4步-创建一个在进度中继承的子级，该子级将被动画化

rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。

如何使用Vue和Element-UI实现进度条和加载动画效果Jul 21, 2023 pm 08:54 PM

如何使用Vue和Element-UI实现进度条和加载动画效果Vue.js是一款轻量级的前端框架，而Element-UI是一个基于Vue.js的UI组件库，它提供了丰富的组件和交互效果，可以帮助我们快速开发出漂亮的前端界面。本文将介绍如何使用Vue和Element-UI实现进度条和加载动画效果。1.安装并引入Element-UI首先，

See all articles