Gambaran Keseluruhan
Bar kemajuan ialah komponen utama mana-mana aplikasi web. Kemajuan menunjukkan penyiapan projek atau tugas. Dalam modul ini, kami akan membina bar kemajuan menggunakan HTML dan menggayakannya dengan CSS. Kami juga akan menyediakan animasi kemajuan untuk bar kemajuan. Dalam tugasan ini kami akan menghidupkan bar kemajuan menggunakan @keyframes. Gunakan sifat gaya animasi seperti tempoh animasi, nama, masa, dsb.
Algoritma
Langkah 1 - Buat plat dandang HTML dalam penyunting teks.
Langkah 2 - Buat bekas div induk dan takrifkan nama kelas sebagai barContainer.
Langkah 3 - Sekarang buat anak lain bagi div induk semasa dan tentukan nama kelas.
Langkah 4 - Cipta kanak-kanak yang mewarisi dalam proses dan akan dianimasikan.
Langkah 5 - Pautkan helaian gaya ke halaman web menggunakan teg pautan dalam teg kepala halaman.
Langkah 6 - Buat gaya fail baharu.css dan gayakan halaman, menggunakan sifat animasi untuk mencipta animasi dalam bar kemajuan.
Langkah 7 - Bar kemajuan telah berjaya dibuat.
Contoh
Dalam contoh ini, kami akan mencipta bar kemajuan mudah menggunakan HTML dan CSS. Antaranya, index.html ialah halaman utama, ia adalah rangka halaman, kami baru saja mencipta rangka komponen, dan semua bahagian animasi dan penggayaan dilakukan dalam bahagian style.css. Fail style.css terdiri daripada bahagian penggayaan dan animasi komponen.
<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>
Imej yang diberikan di bawah menunjukkan output yang menunjukkan bar kemajuan yang dimuatkan pada beban halaman kerana kami hanya menggunakan css jadi bar kemajuan ditetapkan pada kemajuan 80%. Oleh itu, bar kemajuan ini dicipta untuk menunjukkan aplikasi yang merangkumi tugasan seperti penyiapan kursus. Jadi, untuk menjejaki penyiapan tugasan, ini adalah cara terbaik untuk mewakili tugasan dalam bentuk antara muka pengguna grafik.
KESIMPULAN
Bar kemajuan digunakan dalam banyak aplikasi seperti memasang kemas kini, memuat turun sebarang aplikasi, memuatkan apl dan banyak lagi. Bar kemajuan menjadikan antara muka pengguna lebih menarik. Untuk menjalankan bar kemajuan dalam masa nyata kami tidak boleh melakukannya hanya menggunakan HTML dan CSS jadi untuk melaksanakan bar kemajuan dalam projek langsung kami juga menggunakan bahasa skrip Javascript yang boleh menyemak sambungan internet dan memuat naik dan memuat turun melalui rangkaian kami boleh Kemajuan membuat bar kemajuan. Menggunakan HTML dan CSS hanya boleh digunakan untuk membuat bar kemajuan statik. Oleh itu, secara amnya lebih disukai untuk menggunakan bahasa skrip seperti javascript untuk mencipta bar kemajuan.
Atas ialah kandungan terperinci Cara membuat bar kemajuan menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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 AMJavaScript如何实现页面加载进度条功能？在现代互联网应用中，页面加载速度是用户体验的关键因素之一。为了向用户展示加载过程，许多网站和应用程序会使用加载进度条。JavaScript提供了一种简单而有效的方法来实现页面加载进度条功能。具体实现过程如下：创建HTML结构首先，在页面的合适位置创建一个进度条的HTML结构，常见的是将进度条放置在
css与xml的区别是什么Apr 24, 2022 am 11:21 AM区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。
如何使用HTML和CSS设置进度条的颜色？Sep 19, 2023 pm 08:25 PM在网站开发中，进度条是网站的重要组成部分。进度条显示了进程的进度。借助它，用户可以看到网站上正在进行的工作的状态，包括加载时间、文件上传、文件下载和其他类似任务。默认情况下，它呈灰色。然而，为了使进度条突出并具有视觉吸引力，可以使用HTML和CSS来改变它们的颜色。什么是进度条？进度条用于显示任务的进度。它是一个图形用户界面元素。它基本上由一个水平条组成，随着任务的进行逐渐填充，同时伴随着百分比值或其他完成指示器。进度条在Web应用程序中用于向用户提供关于完成诸如文件上传、文件下载或软件安装等过
如何使用Vue实现进度条特效Sep 19, 2023 am 09:22 AM如何使用Vue实现进度条特效进度条是常见的一种界面元素，它可以用来展示一个任务或操作的完成情况。在Vue框架中，我们可以通过一些简单的代码实现进度条的特效效果。本文将介绍如何使用Vue来实现进度条特效，并提供具体代码示例。创建Vue组件首先，我们需要创建一个Vue组件来实现进度条的功能。在Vue中，组件是可以复用的，我们可以在多个地方使用。创建一个名为Pro
如何使用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首先，
如何使用HTML和CSS创建进度条Sep 05, 2023 am 09:09 AM概述进度条是任何Web应用程序的主要组件。进度表明某个项目或任务的完成情况。在本模块中，我们将使用HTML构建进度条，并通过CSS对其进行样式设置。我们还将为进度条提供进度动画。在此任务中，我们将使用@keyframes使进度条动画化。使用动画样式属性，例如动画持续时间、名称、计时等。算法第1步-在文本编辑器中创建HTML样板。第2步-创建父div容器并将类名称定义为barContainer。第3步-现在创建当前父div的另一个子级并定义类名。第4步-创建一个在进度中继承的子级，该子级将被动画化
css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
Dreamweaver Mac版
Alat pembangunan web visual
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
