Cara Membuat Indikator Progres Membaca Artikel Web - jQuery

Tutorial membuat read progress indikator pada halaman artikel web menggunakan jQuery

Rizki Ramadandi

Penulis

View(s)

Waktu baca

02 Juli, 2022

Tanggal publikasi

16 April, 2023

Tanggal sunting terakhir

Daftar Blog Cara Membuat Indikator Progres Membaca Artikel Web - jQuery

Daftar Isi

Cara Membuat Indikator Progres Membaca Artikel Web - jQuery
1. Membuat Indikator Progres Membaca Halaman Artikel Web
2. Kode Keseluruhan

Pada tutorial kali ini, akan dijelaskan mengenai bagaimana cara membuat indikator progres membaca artikel web.

Indikator ini berfungsi sebagai tanda sudah sejauh mana halaman artikel web sudah di scroll.

Membuat Indikator Progres Membaca Halaman Artikel Web

Pertama-tama, tambahkan script jQuery sebelum tutup tag body dengan cara berikut.

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>

Kemudian tambahkan kode berikut di dalam tag body seperti berikut.

<body>
    <h1 class="heading">Tutorial Indikator Progress Membaca Halaman Artikel Web</h1>
    <div id="progress-bar"></div>
    <div id="artikel">
      // Isi artikel
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>

Selanjutnya tambahkan style css untuk indikator progresnya dan tag lainnya di dalam tag head dengan cara berikut.

<head>
  <style>
          body {
              margin: 0;
              padding: 0;
          }
          .heading {
              background-color: rgb(250,250,250);
              margin: 0 0 24px 0;
              padding: 96px 24px;
              text-align: center;
          }
          #artikel {
              padding: 12px 48px;
          }
          #progress-bar {
              position: fixed;
              top: 0;
              left: 0;
              width: 0;
              height: 8px;
              background-color: blue;
          }
  </style>
</head>

Setelah diberi style, tampilannya menjadi sebagai berikut.

Tampilan halaman artikel

Kemudian, tambahkan kode berikut ini sebelum tutup tag body dan setelah jQuery di load.

<script>
        $(document).ready(function () {
            var elementTop = $("#artikel").offset().top;
            var elementBottom = elementTop + $("#artikel").outerHeight();
            var elementHeight = $("#artikel").height();

            $(window).on("scroll", function () {
                progressBar();
            })

            function progressBar() {
                var viewportTop = $(window).scrollTop();
                var viewportBottom = viewportTop + $(window).height();
                var progress = ((viewportBottom - elementTop) / (elementHeight)) * 100 + "%";
                $("#progress-bar").css("width", progress);
            }
        })
</script>

Akhirnya, indikator progres berhasil dibuat.

Tampilan indikator pada halaman artikel

Kode Keseluruhan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial Indikator Progress Membaca Halaman Artikel Web</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .heading {
            background-color: rgb(250,250,250);
            /* color: white; */
            margin: 0 0 24px 0;
            padding: 96px 24px;
            text-align: center;
        }
        #artikel {
            padding: 12px 48px;
        }
        #progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 0;
            height: 8px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <h1 class="heading">Tutorial Indikator Progress Membaca Halaman Artikel Web</h1>
    <div id="progress-bar"></div>
    <div id="artikel">
        // Isi Artikel
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var elementTop = $("#artikel").offset().top;
            var elementBottom = elementTop + $("#artikel").outerHeight();
            var elementHeight = $("#artikel").height();

            $(window).on("scroll", function () {
                progressBar();
            })

            function progressBar() {
                var viewportTop = $(window).scrollTop();
                var viewportBottom = viewportTop + $(window).height();
                var progress = ((viewportBottom - elementTop) / (elementHeight)) * 100 + "%";
                $("#progress-bar").css("width", progress);
            }
        })
    </script>
</body>
</html>

SUPPORT

Berikan supportmu kepada website https://www.rizki-ramadandi.com

Share this blog

Support me on

BLOG YANG MIRIP

Beberapa blog yang mirip dengan blog Cara Membuat Indikator Progres Membaca Artikel Web - jQuery

Cara Menggunakan Event Handler jQuery untuk Elemen Dinamis

Tutorial bagaimana cara membuat event handler jQuery untuk elemen HTML yang ditambahkan secara dinamis

Menggunakan DataTables untuk Memoles Tampilan Tabel HTML

Tutorial menggunakan DataTables untuk membuat tabel HTML lebih menarik dan inteaktif

Walkthrough Digimon World 2 Bahasa Indonesia Lengkap

Walktrough lengkap game Digimon World 2 Bahasa Indonesia

Menerapkan Native Lazy Load untuk Mempercepat Waktu Memuat Halaman Web

Tutorial penerapan atribut lazy pada elemen gambar HTML untuk mempersingkat load time page

Cara Mengundang Alien Misterius ke File City - Digimon World

Apa saja yang harus kamu lakukan untuk bisa menemukan dan mengundang Vademon ke File City pada game Digimon World

Latihan Membaca Bahasa Jepang - Cerita Tsuru no Ongaeshi

Isi cerita Tsuru no Ongaeshi yang ditulis dalam bentuk hiragana dan kanji untuk keperluan latihan membaca bahasa Jepang

Cara Membuat Aksesoris - Harvest Moon: Back to Nature

Cara mendapatkan Orichalcum untuk membuat aksesoris pada game Harvest Moon: Back to Nature

Cara Redirect WWW ke non WWW Melalui cPanel

Cara mudah redirect URL WWW ke URL non WWW melalui cPanel

Menambahkan Custom HTML Tag Module - Quill.js

Tutorial menambahkan custom HTML tag pada Quill.js

Daftar Karakter - Harvest Moon: Back to Nature

Daftar karakter pada game Harvest Moon: Back to Nature beserta item yang disukai

Kata kunci: tutorial, read, progress, halaman, indikator, progres, membaca, artikel, web, jquery, tutorial membuat, membuat read, read progress, progress indikator, indikator pada, pada halaman, halaman artikel, web menggunakan, menggunakan jquery, cara membuat, membuat indikator, indikator progres, progres membaca, membaca artikel, artikel web, web jquery, tutorial membuat read, membuat read progress, read progress indikator, progress indikator pada, indikator pada halaman, pada halaman artikel, halaman artikel web, artikel web menggunakan, web menggunakan jquery, cara membuat indikator, membuat indikator progres, indikator progres membaca, progres membaca artikel, membaca artikel web, artikel web jquery, tutorial membuat read progress, membuat read progress indikator, read progress indikator pada, progress indikator pada halaman, indikator pada halaman artikel, pada halaman artikel web, halaman artikel web menggunakan, artikel web menggunakan jquery, cara membuat indikator progres, membuat indikator progres membaca, indikator progres membaca artikel, progres membaca artikel web, membaca artikel web jquery, tutorial membuat read progress indikator, membuat read progress indikator pada, read progress indikator pada halaman, progress indikator pada halaman artikel, indikator pada halaman artikel web, pada halaman artikel web menggunakan, halaman artikel web menggunakan jquery, cara membuat indikator progres membaca, membuat indikator progres membaca artikel, indikator progres membaca artikel web, progres membaca artikel web jquery, tutorial membuat read progress indikator pada, membuat read progress indikator pada halaman, read progress indikator pada halaman artikel, progress indikator pada halaman artikel web, indikator pada halaman artikel web menggunakan, pada halaman artikel web menggunakan jquery, cara membuat indikator progres membaca artikel, membuat indikator progres membaca artikel web, indikator progres membaca artikel web jquery, tutorial membuat read progress indikator pada halaman, membuat read progress indikator pada halaman artikel, read progress indikator pada halaman artikel web, progress indikator pada halaman artikel web menggunakan, indikator pada halaman artikel web menggunakan jquery, cara membuat indikator progres membaca artikel web, membuat indikator progres membaca artikel web jquery, tutorial membuat read progress indikator pada halaman artikel, membuat read progress indikator pada halaman artikel web, read progress indikator pada halaman artikel web menggunakan, progress indikator pada halaman artikel web menggunakan jquery, cara membuat indikator progres membaca artikel web jquery, tutorial membuat read progress indikator pada halaman artikel web, membuat read progress indikator pada halaman artikel web menggunakan, read progress indikator pada halaman artikel web menggunakan jquery, tutorial membuat read progress indikator pada halaman artikel web menggunakan, membuat read progress indikator pada halaman artikel web menggunakan jquery, tutorial membuat read progress indikator pada halaman artikel web menggunakan jquery

KONTEN YANG MIRIP

Cara Menggunakan Event Handler jQuery untuk Elemen Dinamis

Tutorial bagaimana cara membuat event handler jQuery untuk elemen HTML yang ditambahkan secara dinamis

01 Juli, 2023

5 View(s)

Menggunakan DataTables untuk Memoles Tampilan Tabel HTML

Tutorial menggunakan DataTables untuk membuat tabel HTML lebih menarik dan inteaktif

16 April, 2023

4 View(s)

Walkthrough Digimon World 2 Bahasa Indonesia Lengkap

Walktrough lengkap game Digimon World 2 Bahasa Indonesia

06 April, 2023

70 View(s)

Menerapkan Native Lazy Load untuk Mempercepat Waktu Memuat Halaman Web

Tutorial penerapan atribut lazy pada elemen gambar HTML untuk mempersingkat load time page

29 Maret, 2023

4 View(s)

Cara Mengundang Alien Misterius ke File City - Digimon World

Apa saja yang harus kamu lakukan untuk bisa menemukan dan mengundang Vademon ke File City pada game Digimon World

15 Desember, 2023

1 View(s)

Latihan Membaca Bahasa Jepang - Cerita Tsuru no Ongaeshi

Isi cerita Tsuru no Ongaeshi yang ditulis dalam bentuk hiragana dan kanji untuk keperluan latihan membaca bahasa Jepang

22 Maret, 2024

234 View(s)

Cara Membuat Aksesoris - Harvest Moon: Back to Nature

Cara mendapatkan Orichalcum untuk membuat aksesoris pada game Harvest Moon: Back to Nature

15 Desember, 2023

21 View(s)

Cara Redirect WWW ke non WWW Melalui cPanel

Cara mudah redirect URL WWW ke URL non WWW melalui cPanel

15 Desember, 2023

No View(s)

Menambahkan Custom HTML Tag Module - Quill.js

Tutorial menambahkan custom HTML tag pada Quill.js

16 April, 2023

5 View(s)

Daftar Karakter - Harvest Moon: Back to Nature

Daftar karakter pada game Harvest Moon: Back to Nature beserta item yang disukai

25 Mei, 2023

5 View(s)

MUNGKIN KAMU JUGA SUKA

Penjelasan Karakter Demon - Brotato

Penjelasan karakter Demon pada game Brotato

07 November, 2024

20 View(s)

Penjelasan Karakter Knight - Brotato

Penjelasan karakter Knight pada game Brotato

01 November, 2024

25 View(s)

Penjelasan Karakter Masochist - Brotato

Penjelasan karakter Masochist pada game Brotato

26 Oktober, 2024

28 View(s)

Penjelasan Karakter Soldier - Brotato

Penjelasan karakter Soldier pada game Brotato

20 Oktober, 2024

30 View(s)

Penjelasan Karakter Bull - Brotato

Penjelasan karakter Bull pada game Brotato

14 Oktober, 2024

34 View(s)

Penjelasan Karakter One-Armed - Brotato

Penjelasan karakter One-Armed pada game Brotato

08 Oktober, 2024

22 View(s)

Cara Mendapatkan DigiSeabass - Digital Tamers 2

Apa itu DigiSeabass dan bagaimana cara mendapatkannya pada game Digital Tamers 2

06 Oktober, 2024

23 View(s)

Penjelasan Karakter Renegade - Brotato

Penjelasan karakter Renegade pada game Brotato

02 Oktober, 2024

22 View(s)

Cara Mendapatkan Deluxe Mushroom & DigiWater untuk Drimogemon - Digital Tamers 2

Bagaimana cara mendapatkan Deluxe Mushroom dan DigiWater untuk Drimogemon pada game Digital Tamers 2

27 September, 2024

19 View(s)

Penjelasan Karakter King - Brotato

Penjelasan karakter King pada game Brotato

26 September, 2024

14 View(s)

KONTEN LAINNYA

Blog

Koleksi blog random

Resource

Koleksi berbagai macam resource gratis

Tool

Koleksi online tools berbagai macam fungsi

Game

Koleksi berbagai macam game sederhana

Abbreviation

Koleksi abreviasi/singkatan