Cara membuat bar kemajuan menggunakan HTML dan CSS-html tutorial-php.cn

Cara membuat bar kemajuan menggunakan HTML dan CSS

WBOY

Lepaskan： 2023-09-05 09:09:11

ke hadapan

1533 orang telah melayarinya

Cara membuat bar kemajuan menggunakan HTML dan CSS

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>

Salin selepas log masuk

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!