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.
Configuration
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.
Installation