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

نقوم بإضافة الكود التالي في ملف style.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;
}

نقوم بإنشاء ملف 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 + "%");
});
});

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

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

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

{template}progress{/template} 

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