Membuat Progress Bar Animation WordPress

Membuat Progress Bar Animation WordPress. Apakah rekan-rekan teknologi[dot]visitklaten[dot]com ingin Membuat Progress Animation WordPress yang keren, profesional dan powerfull?. Yap.. dalam kesempatan kali ini kami akan berbagi cara Membuat Bilah Progress WordPress.

Tanpa plugin, dengan bermodal HTML, CSS dan JavaScript yang tidak terlalu rumit rekan-rekan bisa membuat animasi bilah progress wordpress. 

Sebelumnya kami ucapkan terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang telah meluangkan waktunya untuk mengunjungi website kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi.

Animasi progress ini akan sangat berguna bagi website yang memerlukan suatu progress seperti progress penggalangan dana, progress pencapaian suatu pengerjaan, progress keterampilan, dll.

Contohnya apabila suatu penggalangan dana maka dengan bilah kemajuan maka bisa menunjukkan kepada pengunjung dana yang terkumpul. Misal target 10 juta dan baru mendapatkan 2 juta maka ditampilkan baru 20%.

Dengan cara ini mungkin bisa menarik lagi para donatur untuk menyumbang dan sebagai informasi bagi yang sudah menyumbang.

Begitu juga dengan progress pencapaian suatu pengerjaan maka bisa menampilkan kepada pemberi pekerjaan bahwa pengerjaan baru sekian persen. Sehingga pemberi pekerjaan bisa mengetahui sejauh mana pengerjaan sudah dikerjakan.

Yuk langsung saja berikut Cara Membuat Progress Bar Animation WordPress tanpa plugin

Membuat Progress Bar Animation WordPress

HTML

Tampilan dibawah ini bisa diedit menyesuaikan kebutuhan, misalnya diberi teks 80/100 atau yang lainnya.

<div class="meter">
	<span style="width: 25%"></span>
</div>

<div class="meter orange nostripes">
	<span style="width: 33.3%"></span>
</div>

<div class="meter red">
	<span style="width: 80%">80%</span>
</div>

<div class="meter animate">
	<span style="width: 50%"><span></span></span>
</div>

CSS

Style ini bisa diedit, ditambah ataupun dikurangi menyesuaikan kebutuhan.

.meter { 
	height: 40px;  /* Can be anything */
	position: relative;
	background: #555;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 10px;
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 18px;
    display: block;
    height: 100%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgb(43,194,83);
    background-image: linear-gradient(center bottom,rgb(43,194,83) 37%,rgb(84,240,84) 69%);
    box-shadow: inset 0 2px 9px  rgba(255,255,255,0.3),inset 0 -2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

.orange > span {
    background-color: #f1a165;
    background-image: linear-gradient(to bottom, #f1a165, #f36d0a);
}
.red > span {
    background-color: #f0a3a3;
    background-image: linear-gradient(to bottom, #f0a3a3, #f42323);
}

.meter > span:after, .animate > span > span {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image: linear-gradient(-45deg,  rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
    z-index: 1;
    background-size: 50px 50px;
    animation: move 2s linear infinite;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}

.animate > span:after, .animate > span > span {
    display: none;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

.meter > span:after, .animate > span > span {
  animation: move 2s linear infinite;
}

@keyframes expandWidth {
   0% { width: 0; }
   100% { width: auto; }
}

.nostripes > span > span, .nostripes > span:after {
    -webkit-animation: none;
    -moz-animation: none;
    background-image: none;
}

JavaScript

    $(".meter > span").each(function() {
      $(this)
        .data("origWidth", $(this).width())
        .width(0)
        .animate({
          width: $(this).data("origWidth") // or + "%" if fluid
        }, 1200);
    });

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.

Info Tambahan

Sekedar info apabila berminat dan semoga berminat, Apabila ingin mengiklankan usahanya yang khususnya berada wilayah klaten maka bisa memasang iklan di https://www.visitklaten.com/pasang-iklan/ . 

Kelebihannya dari iklan ini apabila diketikan kata kunci dan ditambah dengan kata “klaten” maka kesempatan muncul di halaman pertama google akan semakin besar. Selain itu yang tak kalah menarik ada diskonnya….

Tersedia juga iklan dalam bentuk banner. Apabila ingin beriklan di web inipun juga bisa, silakan Chat WA saja.