نوارهای پیشرفت (دایره)

طرح پایه

شعاع برای اهداف مختلف مفید است و در صفحات شما ساده و آسان است. عنصر شعاعی در ابتدایی ترین شکل آن نیاز به a دارد . عنصر radial با a ویژگی های Data- مظارد نشان می دهد که درصد شعاعی برای پر کردن چه درصد است.

برچسب که در مرکز شعاع ظاهر می شود توسط a & lt ؛ span & gt ؛ عنصر با کلاس .radial__label

<div class="radial" data-value="50">
	<span class="h4 radial__label">50%</span>
</div>

اصلاح ظاهر

کنترل ظاهر شعاعی با استفاده از تعدادی از ویژگی های داده اضافه شده به . عنصر radial همانطور که در زیر ذکر شده است:

• data-size - یک مقدار عددی در پیکسل ها ، اندازه شعاع را کنترل می کند
• data-timing - یک مقدار عددی در میلی ثانیه ، سرعت انیمیشن را کنترل می کند
• data-color- یک مقدار کد هگز که رنگ نوار پیشرفت را کنترل می کند
• data-bar-width - یک مقدار عددی در پیکسل هایی که عرض نوار را کنترل می کند

<div class="radial" data-value="90" data-timing="1000" data-color="#4a90e2" data-size="200" data-bar-width="10">
	<span class="h3 radial__label">90%</span>
</div>