در طراحی بعضی سایت‌ها و قسمت‌هایی از وبلاگ‌ها گاهی نیاز به نشان دادن آماری پیدا میشود، ساده‌ترین راه برای این کار استفاده از نوار‌های درصد دار است.
به کمک سی‌اس‌اس به راحتی میتوان نوار‌های درصد دار بسیار زیبا ساخت.

برای این کار ابتدا سه المنت بشکل زیر در صفحه خود ایجاد میکنیم:

<div id="container">
<div class="percent"></div>
<div class="bar"></div>
</div>

المنت div کلی با آی‌دی container بدنه اصلی نوار را ایجاد میکند، المنت با کلاس percent درصد نوار را نمایش میدهد که میتوانید به دلخواه آن را حذف کنید و المنت بعدی با کلاس bar قسمت رنگی نوار را تشکیل میدهد که مقدار پر شده‌ی نوار را مشخص میکند.

بعد از این نوبت به نوشتن کد CSS میرسد:

#container {
background: #F0F0F0;
width: 200px;
height: 20px;
position: relative;
}
#container .percent {
text-align: center;
position: absolute;
width: 200px;
height: 20px;
top: 12%;
font: 12px Tahoma, Geneva, sans-serif;
}
#container .bar {
background: #3C0;
height: 20px;
}

مشخصه width دو المنت اول باید یکی باشد و مشخصه height هرسه المنت باید یکی باشد.

حالا کد اول را بصورت زیر تغییر میدهیم :

<div id="container">
<div class="percent">65%</div>
<div class="bar" style="width: 65%;"></div>
</div>

با تغییر دادن درصد مشخصه width میزان پر شدن نوار را مشخص میکنیم، حالا میتوانیم این درصد را به کمک یه زبان مانند php یا javascript تعیین کنیم و یا این کار را دستی انجام دهیم.