Baru digunakan

    Buka sebuah alat dan alat itu akan muncul di sini.

    Pembuat bilah progres

    Desain bilah progres animasi

    Bagikan alat ini

    Laporkan masalah

    Jelaskan masalahnya tanpa menyertakan input atau file pribadi.

    Seberapa berguna alat ini?

    Seberapa berguna alat ini?

    Rancang bilah progres Anda

    Pilih bentuk dan tema, lalu sesuaikan detailnya.

    Tema cepat
    Pengaturan lainnya
    Dimensi & bentuk
    Warna & gradien
    Pengaturan bingkai
    Label
    Animasi & efek

    Pratinjau & kode

    Latar pratinjau

    Pratinjau menyesuaikan panel ini. Dimensi ekspor dan kode tetap sesuai ukuran pilihan Anda.

    Pratinjau diperbarui. Salin HTML dan CSS untuk proyek Anda.

    Pratinjau ekspor PNG

    PNG adalah hasil render statis dengan latar putih. PNG memakai gaya kanvas asli: gradien dan bingkai hanya diterapkan pada bilah linear; efek cahaya CSS, garis-garis, denyut, dan transisi tersedia di pratinjau langsung dan kode.

    Markup HTML
    <div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-label">
    Memuat... 65%
  </div>
</div>
    Gaya CSS
    .progress-container {
  width: 400px;
  max-width: 100%;
  height: 20px;
  background-color: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  
  
}

.progress-bar {
  height: 100%;
  width: 65%;
  background: #3b82f6;
  border-radius: 10px;
  transition: width 1.5s ease-in-out;
  
  
  
}





.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #1f2937;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

    HTML dan CSS harus digunakan bersama. Keduanya menggambarkan nilai tetap ini; hubungkan pembaruan progres dan semantik aksesibilitas di aplikasi Anda.

    Tips singkat
    • Linear: indikator pemuatan dan unggahan file.
    • Melingkar: pengukur dan representasi keahlian.
    • Setengah lingkaran: metrik dasbor dan penggunaan kuota.
    • Vertikal: indikator baterai dan penyimpanan.
    • Titik: penomoran halaman dan kemajuan dalam sebuah urutan.
    • Bertahap: tonggak dalam proses multilangkah.

    Tentang Pembuat bilah progres, generator progress bar CSS gratis

    Rancang bilah progres animasi yang menarik dengan warna, label, dan efek yang dapat diatur. Salin HTML dan CSS sekaligus, atau ekspor PNG statis dengan dimensi yang dipilih. Tersedia enam bentuk, enam tema, dan tiga kurva transisi. PNG memakai perender canvas terpisah: gradien dan border hanya diterapkan pada bilah linear, sedangkan animasi CSS, garis-garis, dan efek glow tidak disertakan. Periksa hasilnya di tata letak target Anda sebelum memasang generator bilah progres online ini.

    Indikator progres adalah pola UI inti dalam desain web dan seluler modern. Indikator ini menyampaikan status pemuatan, penyelesaian tugas, tingkat keahlian, dan pencapaian target kepada pengguna. Daripada menulis CSS dari nol, gunakan editor visual kami untuk mengatur setiap detail, yaitu warna, radius sudut, garis-garis, gradien, dan label, lalu salin kode yang dihasilkan langsung ke proyek Anda.

    Alat ini menyediakan pratinjau langsung real-time berdampingan dengan pratinjau ekspor canvas, sehingga Anda melihat persis tampilan bilah progres sebelum menggunakannya. Baik Anda sedang membuat pengukur dasbor, indikator unggah file, wizard multilangkah, maupun penanda paginasi berbasis titik, Pembuat bilah progres punya gaya yang tepat dan kode yang bersih.

    Desain

    Baru ditambahkan

    Semua alat

    Pengaturan privasi

    Pilih preferensi Anda untuk analitik, iklan, dan personalisasi. Penyimpanan esensial menjaga fitur seperti tema dan alat tersimpan Anda tetap berfungsi.

    Penyimpanan esensial selalu aktif.