كيف ارسم دائرة مئوية HTML

ذلك يسمى Circle progress bar، ولتنفيذ ذلك من خلال HTML, CSS فقط ستقوم بالآتي:

HTML:

نقوم أولاً بإنشاء عنصر كحاوية، ثم استخدام عنصر <progress> بداخله ونخفيه عن طريق CSS (visibility:hidden;height:0;width:0;) لأننا سنستخدم CSS لإنشاء شريط التقدم.

<div class="progress-bar">
  <progress value="75" min="0" max="100" style="visibility:hidden;height:0;width:0;">75%</progress>
</div>

CSS:

أولاً نقوم بإنشاء خاصية مخصصة وهي @property --progress-value تعني أننا نقوم تُسمى --progress-value لتخزين قيمة التقدم.

و @keyframes progress يُعرّف تأثير متحرك يسمى progress ونغير به قيمة --progress-value من 0 إلى 75.

progress-bar هو التنسيق الخاص بكلاس شريط التقدم ونضع خلفية له من خلال radial-gradient.

و .progress-bar::before يُنشئ عنصرًا قبل الحاوية لعرض قيمة التقدم.

عند تشغيل الكود، ستظهر دائرة بيضاء صغيرة في المنتصف. ثم ستبدأ الدائرة بالتحول إلى اللون hotpink ببطء حتى تصل إلى 75% من الدائرة، وفي نفس الوقت، ستظهر قيمة التقدم (75%) داخل الدائرة.

@property --progress-value {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@keyframes progress {
 to { --progress-value: 75; }
}

.progress-bar {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: 
    radial-gradient(closest-side, white 79%, transparent 80% 100%),
    conic-gradient(hotpink calc(var(--progress-value) * 1%), pink 0);
  animation: progress 2s 1 forwards;
}

.progress-bar::before {
  counter-reset: percentage var(--progress-value);
  content: counter(percentage) '%';
  animation: progress 2s 1 forwards;
}

بالطبع لتعديل قيمة التقدم في الدائرة ستحتاج إلى استخدام جافاسكريبت من أجل التلاعب بالقيمة والتعديل على كود CSS و HTML.