Indikator progress bar ketika scroll

Progress indikator bar, adalah sebagai petunjuk indikator saat kita men-scroll konten dari halaman website, seberapa panjang halaman tersebut.

Anda tertarik membuat indikator progress bar ketika scroll, untuk memper-indah atau sebagai pelengkap halaman website Anda?

Di bawah ini adalah script sederhana progress bar , silahkan Anda modifikasi untuk menyesuaikan dengan website Anda.


Script indikator progress bar

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Indikator progress bar ketika scroll</title>
		
<!-- begin CSS code -->

<style>
body {
    margin: 0;
    font-family: sans-serif;
    background-color: red;
    background-image:
        radial-gradient(
            circle at top right,
            green,
            #f06d06 50%
        );
    color: #fff;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    background: black;
    text-align: center;
    padding-top: 5px;
    font-size: 150%;
    height: 38px;
    width: 100%;	
}
main {
    margin: 40px auto;
    padding: 10px;
    height: 1000px;
}

h1 { 
    text-align: center;
}
</style>

<!-- end of CSS code -->

</head>
<body>

<!-- this content between tag <body>...</body> will be show on browser -->

    <div className="App" id="app">
        <header>Indikator progress bar ketika scroll</header>
            <main>
                <h1>Scroll untuk melihat indikator bar</h1>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </main>
    </div>

<!-- External JS Progress -->

<script src="https://cdn.jsdelivr.net/npm/sprogress@1.1.2/lib/sprogress.min.js"></script>

<!-- End of JS Progress -->
<!-- End of body content -->

</body>
</html>

Untuk melihat hasil dan mengeditnya, silahkan gunakan halaman Realtime HTML Editor ↗

Hanya sampai disini pembahasan tentang script sederhana untuk progress bar indikator, salam sukses selalu buat Anda semua.

Mungkin Anda Menyukai