همانطور که میدانید , در html5 تگی جدید به نام <progress> اضافه شد که کار آن نمایش پیشرفت کار می باشد .

یکی از کاربرد های این تگ در همین سایت و در صفحه درباره وحید مجیدی از آن استفاده شده است .

این تگ به صورت ساده و بدون هیچ دیزاین خاصی می باشد که در این پست قصد دارم با ترفندی , ان تگ رو از دیزاین ساده اش خلاص کنیم .

این تگ دارای 2 خاصیت max و value میباشد که تعیین کننده کل مقدار و مقدار پر شونده می باشد .

مثلا اگر بخواهیم نصف این نوار را پرکنیم . کافیست خط زیر را در html بنویسیم .

<progress value="500" max="1000"></pregress>

<progress value="50" max="100"></pregress>

<progress value="5" max="10"></pregress>

<progress value="1" max="2"></pregress>

پس از انجام این کار , کافیست کد های زیر را در css قرار دهید تا تمامی تگ های progress در سایت , به حالت زیر درآید .

progress{
	background-color:#eee;	
}
progress::-webkit-progress-value {
 	background-color:#ba1000;
}
progress::-webkit-progress-bar {
 	background-color:#eee;
}
progress::-moz-progress-bar {
 	background-color:#ba1000;
}

شما بجز تعویض رنگ که در بالا قرار داده شده , میتوانید خاصیت های دیگری در CSS از جمله border-radius , box-shadow , border , outline و … به آنها اضافه کنید .

نکته مهم این است که موارد بالا در internet explorer ساپورت و پشتیبانی نمیشود .

گرداوری : وحید مجیدی

پخش اختصاصی

نمونه آماده شده و دمو