في هذا الشرح سنتعرف على طريقة Bar والتي تظهر مستوى تحميل الصفحة في المنتدى

نقوم بإضافة الكود التالي في ملف style.css الخاص بستايل المنتدى


[code=css]
.header {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}

.progress-container {
/* background-color: rgba(150, 150, 150, 0.6);*/
height: 10px;
width: 150%;
}

.progress-bar {
background-color: #2196f3;
height: 10px;
width: 0%;
}

.content {
padding: 2em;
}



[/code]


نقوم بإنشاء ملف js وندرج به الكود التالي


[code=js]
$(document).ready(function() {
$(document).scroll(function(e) {
var dimensions = {
scrollTop: $(window).scrollTop(),
documentHeight: $(document).height(),
windowHeight: $(window).height()
};

// Exclude the window to get actual height!
var pageScrolledPercentage =
dimensions.scrollTop /
(dimensions.documentHeight - dimensions.windowHeight) *
100;
$(".progress").css("width", pageScrolledPercentage + "%");
});
});



[/code]

نقوم بحفظ الملف بإسم progress.js ونقوم بنقله إلى مجلد includes/js الموجود في جذر المنتدى

من لوحة تحكم الإدارة نقوم بإنشاء قالب جديد ونعطيه الإسم progress

نفتح قالب headinclud ونضيف آخره الكود التالي

[code=plain]
{template}progress{/template}


[/code]



نقوم بعد ذلك بتفريغ كاش المتصفح ونلاحظ النتيجة