Make Progress Indicator only use CSS

Jika sobat perhatikan pada web plus.google.com atau www.youtube.com ketika kita mengklik navigasi yang ada, maka akan tampak indicator berupa garis lurus tipis tepat di bawah kotak address bar browsingan. Pada halaman youtube di beri nama progress indicator! Kalau pada web jalantikus.com kala kita masuk pada sesi artikel dan melakukan scroll ke bawah, akan tampak pula indicator tersebut. Memang banyak versi dan bentuk untuk tutorial satu ini bro :DTetapi AA Koben akan berbagi bagaimana cara membuat indikator itu hanya dengan kode CSS? Sebelum mulai, harap diperhatikan oleh kalian selektor kode CSS yg ada! Karena akan menggunakan kode CSS Selector :root For reference you can read here CSS Selector Reference Cek apakah browser sobat mendukung atau tidak terhadap kode-kode nanti yg diberikan ;))

Secara teknikal sobat hanya perlu menambahkan kode CSS berikut ke dalam template kalian.

:root {
  --si-height: .3em;
  --si-fg: #0bf;
  --si-bg: transparent;
  --bg: #fff;
  --fuzz: 0%;
}
body {
  background: var(--bg);
  background-image: -webkit-linear-gradient(top, transparent var(--si-height), var(--bg) var(--si-height)), -webkit-linear-gradient(left bottom, var(--si-fg) calc(50% - var(--fuzz)), var(--si-bg) calc(50% + var(--fuzz)));
  background-image: linear-gradient(to bottom, transparent var(--si-height), var(--bg) var(--si-height)), linear-gradient(to right top, var(--si-fg) calc(50% - var(--fuzz)), var(--si-bg) calc(50% + var(--fuzz)));
  background-size: 100% 100%, calc(100% + var(--fuzz)*2) calc(100% - 100vh + var(--si-height));
  background-repeat: no-repeat,  no-repeat;
  background-attachment: fixed,  scroll;
}

Jika template kalian memakai gambar maka akan ada bentrok dengan kode background-repeat, background-size & background-attachment Oleh sebab itu buatlah variabel baru saja ;)
Source and demo: codepen.io/jasesmith/pen/YGvGjm

Dengan trik tersebut memang akan hanya didapatkan indikator di dalam tag body. Lantas bagaimana kalau kita ingin memasang indikator di tempat lain? Mau nggak mau sobat harus belajar dari pos berikut PrognRoll.

Lebih dan kurangnya AA minta maaf, wabillahi taufiq walhidayah wassalamua'laikum warahmatullahi wabarakatuh.

Bonus:
Fancy Camera - Google maps fade in animation - Flat-style drawer Contact Me - Hovering Shiny CodePen in Space - Make any text look ugly and horrible yet strangely beautiful - Back to Top button in pure CSS without HTML anchors or JS - CSS Waves - CSS ICON - Learn CSS Animation - Emoji Engine