Membuat Progress Bar Loader Animation CSS

Sharing Teknologi – Membuat Progress Bar Loader Animation Effect HTML CSS Di WordPress. HTML dan CSS adalah 2 bahasa yang sangat penting dalam pembuatan situs web..

Hypertext Markup Language atau HTML adalah bahasa markup standar yang digunakan untuk membuat dan menyusun struktur halaman web. HTML menggunakan tag-tag seperti <html>, <head>, <body>, <p>, <div>, dan lainnya untuk mendefinisikan konten seperti heading, paragraf, gambar, tabel, form, dan lain-lain.

HTML tidak bisa digunakan untuk mengatur styling/tampilan situs web seperti warna, ukuran font, letak, dan lainnya.

Cascading Style Sheets atau CSS adalah bahasa styling yang digunakan untuk mengatur tampilan dan format dari elemen HTML. CSS memungkinkan kita untuk mengontrol warna teks dan latar belakang, jenis dan ukuran font, ukuran dan posisi elemen pada halaman, layout/tata letak, variasi tampilan pada perangkat yang berbeda, dan lain sebagainya.

CSS menggunakan selector seperti ID, class, element, pseudo-class, dan lainnya untuk memilih elemen HTML mana yang akan distyling, dan property CSS seperti color, font-size, text-align, display, position, dan lainnya untuk menerapkan styling tersebut.

Jadi secara singkat, HTML digunakan untuk struktur konten website, sedangkan CSS digunakan untuk mengatur styling dan tampilan website tersebut. Keduanya saling melengkapi dan digunakan bersama-sama untuk membangun situs web yang menarik dan responsif.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Progress Bar Loader Animation

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan. 

Untuk contoh hasilnya ada di paling bawah ya, silakan scroll ke bawah.

HTML

<div class="position-relative p-3 my-1 overflow-hidden">
<div class="progressbarloader">
	<main>
	  <div class="h1">Loading<span class="dot">.</span><span class="dot">.</span><span class="dot">.</span><sub>infinitely :)</sub></div>
	  <div id="container">
		<div id="bar"></div>
	  </div>
	</main>
</div>
</div>

Style CSS

.progressbarloader {
  background: linear-gradient(to bottom right, #14151c, black, #080b1f);
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
  height: 300px;
  color: #ededed;
}

.progressbarloader #container {
  display: flex;
  width: 500px;
  height: 25px;
  background: black;
  border-radius: 6px;
  border: 2px solid dimgray;
  align-items: center;
}

@keyframes load {
  from {transform: translate(0, 0)}
  to {transform: translate(390px, 0)}
}

.progressbarloader #bar {
  width: 100px;
  height: 10px;
  background: linear-gradient(to bottom right, cyan, lightblue);
  border-radius: 6px;
  box-shadow: 0 0 10px lightblue;
  
  animation: load .25s infinite alternate ease-in-out;
}

@keyframes dots {
  from {color: cyan; transform: translate(0, -10%);}
  to {color: white; transform: translate(0, 0);}
}

.progressbarloader .dot {
  display: inline-block;
  font-size: 250%;
}

.progressbarloader .dot:nth-child(1) {
  animation: dots .5s infinite alternate linear;
}

.progressbarloader .dot:nth-child(2) {
  animation: dots 1s infinite alternate linear;
}

.progressbarloader .dot:nth-child(3) {
  animation: dots 1.5s infinite alternate linear;
}

.progressbarloader .h1 sub {
  margin-left: 5%;
  font-size: 15%;
  font-weight: normal;
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.