Make Progress Indicator only use CSS - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Progress Indicator only use CSS, we have prepared well for this article you read and download the information therein. hopefully fill posts Article CSS, Article CSS3, Article HTML, Article Resource, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make Progress Indicator only use CSS
link : Make Progress Indicator only use CSS

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

Thus articles Make Progress Indicator only use CSS

that is all articles Make Progress Indicator only use CSS This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Progress Indicator only use CSS with the link address https://autopostingblogspot.blogspot.com/2016/11/make-progress-indicator-only-use-css.html