Fandom Developers Wiki
Advertisement

ReadProgressBar, ekranın üst kısmına, kullanıcı bir blog gönderisinde aşağı kaydırdığında genişliğini artıran bir ilerleme çubuğu ekleyen bir betiktir. Kullanıcının bir sayfada ne kadar ilerlediğini doğru bir şekilde göstermeye hizmet eder.

%100 genişliğe ulaştığında (veya başka bir deyişle, kullanıcı blog/sayfa maddesinin aşağı kaydırdığında), çubuğun kendisi üst gezinme çubuğunun arkasına gizlenecektir.

Yapılandırma[]

Aşağıdaki CSS parçacığını kullanarak ilerleme çubuğunu özelleştirebilirsiniz:

:root {
  --progress-bar-border-radius: (sinir-degeri-buraya);
  --progress-bar-color: (renk-degeri-buraya);
  --progress-bar-height: (yukseklik-degeri-buraya);
}

Çubuğun height ve border-radius değerleri 8px piksele kadar ayarlayabilirsiniz. Bu nedenle, örneğin, kenarları hafifçe yuvarlatılmış 6 piksel uzunluğunda bir hotpink ilerleme çubuğu istiyorsanız, kullanacağınız kod bu olacaktır:

:root {
  --progress-bar-border-radius: 4px;
  --progress-bar-color: hotpink;
  --progress-bar-height: 6px;
}

Maddelerdeki ilerleme çubuğunu göstermek için betiğini içe aktarmadan önce common.js dosyanıza window.enableReadProgressBarOnArticles = true ekleyin.

Demo[]

Yukarıda kullanılan stilleri değiştirmek için aşağıdaki onay kutusunu tıklayın.

Kurulum[]

Advertisement