Membuat Pesentase Keahlian atau proggres bar animasi bergerak di google site untuk Portofolio

Biasanya di website portofolio kita akan menampilkan persentase keahlian atau progres bar. tapi untuk google site untuk saat ini masih belum bisa kita buat manual. tapi tidak perlu khawatir karena ngeweb.site akan membantu anda membuatnya silahkan ikuti tutorialnya di youtube kami GOFOREDU Disini

Form Membuat Bar Progres :

Keahlian 1

Persentase 1 (angka)

Keahlian 2

persentase 2 (Angka)

Warna Tulisan (isi dengan kode warna)

Warna Persentase (isi dengan kode warna)

jarak antar keahlian contoh : 20

Setelah memasukkan Kode silahkan klik Generate, Copy Semua Code jika telah di generatedan reset kode bisa ingin memasukkan kode atau salah memasukkan kode




<!DOCTYPE html>
<html lang="en">
<head>
    <title>How To Create jQuery Animated Progress Bar With Percentage Counter</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <!-- Progress Bar -->
    <div class="work-process">
        <div class="project">
            <h3 style="margin: 0px 0px 10px;">micro</h3>
            <div class="project-bar">
                <div class="project-percent" percent="micro"></div>
            </div>
        </div>

        <!-- copy dibawah ini -->

        <div class="project" >
            <h3 style="margin: micropx 0px 10px;">micro</h3>
            <div class="project-bar">
                <div class="project-percent" percent="micro"></div>
            </div>
        </div>

<!-- Silahkan Tambahkan dibawah ini -->




<!-- Batas Tambahkan -->

        </div>
    </div>
</body>
</html>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: arial;
}



}
body {
    overflow: hidden;
    
}
.work-process {
    max-width: 500px;
}
.work-process h3 {
    color: micro;
}
.project-bar {
    height: 18px; /* bisa dirubah lebar background */
    background: #e0e0e0;
    border-radius: 30px;
}
.project-percent {
    height: 18px; /* bisa dirubah lebar Persentase */
    background-color: micro;
    border-radius: 30px;
    position: relative;
    width: 0;
    transition: 2s linear;
}
.project-percent::before {
    content: attr(percent);
    position: absolute;
    right: 0px;
    left: 0px;
    padding: 1px 0px;
    color: #ffffff;
    font-size: 15px;
    border-radius: 25px;
    font-weight: bold;
    width: 20px;
    margin: 0px auto;
}
</style>

<script>
$('.project-percent').each(function(){
    var $this = $(this);
    var percent = $this.attr('percent');
    $this.css("width",percent+'%');
    $({animatedValue: 0}).animate({animatedValue: percent},{
        duration: 2000,
        step: function(){
            $this.attr('percent', Math.floor(this.animatedValue) + '%');
        },
        complete: function(){
            $this.attr('percent', Math.floor(this.animatedValue) + '%');
        }
    });
});
</script>

Terima Kasih telah berkunjung semoga membantu terima kasih

Mudah Buat Website

Membuat Pesentase Keahlian atau proggres bar animasi bergerak di google site untuk Portofolio

Related Posts

2 komentar

Posting Komentar

Popular

Label

Arsip

Kontributor