Animasi Progress Menggunakan jQuery dan CSS

Hallo teman-teman dumet school. pada kesempatan kali ini saya akan membuat Animasi Progress Menggunakan Jquery dan CSS. Dimana progress ini bisa teman-teman gunakan untuk memberikan suatu informasi terhadap proses yang sedang berjalan. Langkah pertama untuk membuat Animasi Progress Menggunakan Jquery dan CSS yaitu teman-teman buat struktur html seperti pada script di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animasi Progress Menggunakan Jquery dan CSS</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
</head>
<body>
 

<h1>Animasi Progress Menggunakan Jquery dan CSS</h1>
<br>
<div class="process-wrapper">
    <div id="progress-bar-container">
        <ul>
            <li class="step step01 active"><div class="step-inner">Pesanan Sedang Di Kemas</div></li>
            <li class="step step02"><div class="step-inner">Pesanan Sedang Di Kirim</div></li>
            <li class="step step03"><div class="step-inner">Pesanan Sudah Di Terima</div></li>
        </ul>
        
        <div id="line">
            <div id="line-progress"></div>
        </div>
    </div>    <div id="progress-content-section">
        <div class="section-content discovery active">
            <h2>Pesanan Sedang Di Kemas</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec neque justo, consequat non fermentum ac, tempor eu turpis.</p>
        </div>
        
        <div class="section-content strategy">
            <h2>Pesanan Sedang Kirim</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec neque justo, consequat non fermentum ac, tempor eu turpis.</p>
        </div>
        
        <div class="section-content creative">
            <h2>Pesanan Sudah Di Terima</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec neque justo, consequat non fermentum ac, tempor eu turpis.</p>
        </div>
    </div>
</div>
</body>
</html>

Jika sudah maka teman-teman buat style css seperti di bawah ini. 

<style>
    body {
        margin:0;
        font-family: 'Roboto Condensed', sans-serif;
    }

    
    h1 {
               
        color:#333;
        font-weight:700;
        margin-top:125px;    
        text-align:center;
        text-transform:uppercase;
        letter-spacing:4px;
        line-height:23px;
    }

    /* --- Start progress bar --- */

    .process-wrapper {
        margin:auto;
        max-width:1080px;
    }

    #progress-bar-container {
        position:relative;
        margin:auto;
        height:100px;
        margin-top:65px;
    }

    #progress-bar-container ul {
        padding:0;
        margin:0;
        padding-top:15px;
        z-index:9999;
        position:absolute;
        width:100%;
        margin-top:-40px
    }

    #progress-bar-container li:before {
        content:" ";
        display:block;
        margin:auto;
        width:30px;
        height:30px;
        border-radius:50%;
        border:solid 2px #aaa;
        transition:all ease 0.3s;
         
    }

    #progress-bar-container li.active:before, #progress-bar-container li:hover:before {
        border:solid 2px #fff;
               
        background: linear-gradient(to right, #E91E63 0%,#fff 100%);
    }

    #progress-bar-container li {
        list-style:none;
        float:left;
        width:20%;
        text-align:center;
        color:#aaa;
        text-transform:uppercase;
        font-size:11px;
        cursor:pointer;
        font-weight:700;
        transition:all ease 0.2s;
        vertical-align:bottom;
        height:60px;
        position:relative;
    }

    #progress-bar-container li .step-inner {
        position:absolute;
        width:100%;
        bottom:0;
        font-size: 14px;
    }

    #progress-bar-container li.active, #progress-bar-container li:hover {
        color:#444;
    }

    #progress-bar-container li:after {
        content:" ";
        display:block;
        width:6px;
        height:6px;
        background:#777;
        margin:auto;
        border:solid 7px #fff;
        border-radius:50%;
        margin-top:40px;
        box-shadow:0 2px 13px -1px rgba(0,0,0,0.3);
        transition:all ease 0.2s;
         
    }

    #progress-bar-container li:hover:after {
        background:#555;
    }

    #progress-bar-container li.active:after {
        background:#207893;
    }

    #progress-bar-container #line {
        width:40%;
        margin:auto;
        background: #eee;
        height:6px;
        position:absolute;
        left:10%;
        top:57px;
        z-index:1;
        border-radius:50px;
        transition:all ease 0.9s;
    }

    #progress-bar-container #line-progress {
        content:" ";
        width:3%;
        height:100%;
        background: #207893;    
        background: linear-gradient(to right, #207893 0%,#2ea3b7 100%);
        position:absolute;
        z-index:2;
        border-radius:50px;
        transition:all ease 0.9s;
    }

    #progress-content-section {
        width:90%;
        margin: auto;
        background: #f3f3f3;
        border-radius: 4px;
    }

    #progress-content-section .section-content {
        padding:30px 40px;
        text-align:center;
    }

    #progress-content-section .section-content h2 {
        font-size:17px;
        text-transform:uppercase;
        color:#333;
        letter-spacing:1px;
    }

    #progress-content-section .section-content p {
        font-size:16px;
        line-height:1.8em;
        color:#777;
    }

    #progress-content-section .section-content {
        display:none;
        animation: FadeInUp 700ms ease 1;
        animation-fill-mode:forwards;
        transform:translateY(15px);
        opacity:0;
    }

    #progress-content-section .section-content.active {
        display:block;
    }

    @keyframes FadeInUp {
        0% {
            transform:translateY(15px);
            opacity:0;
        }
        
        100% {
            transform:translateY(0px);
            opacity:1;
        }
    }
    </style>

Dan langkah terakhir yaitu buat script jquery untuk dapat menjalankan animasi progress yang akan dibuat.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>   
    $(".step").click( function() {
        $(this).addClass("active").prevAll().addClass("active");
        $(this).nextAll().removeClass("active");
    });

    $(".step01").click( function() {
        $("#line-progress").css("width", "0%");
        $(".discovery").addClass("active").siblings().removeClass("active");
    });

    $(".step02").click( function() {
        $("#line-progress").css("width", "50%");
        $(".strategy").addClass("active").siblings().removeClass("active");
    });

    $(".step03").click( function() {
        $("#line-progress").css("width", "100%");
        $(".creative").addClass("active").siblings().removeClass("active");
    });
</script>

Demikian artikel tentang cara  membuat Animasi Progress Menggunakan Jquery dan CSS.Semoga dapat bermanfaat dan selamat mencoba.

11 November 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat