كيف ارسم دائرة مئوية 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.

عند التعامل مع Animation مشابه لهذا عادة ما نستخدم HTML,CSS,Javascript معا لحل مشكلة كهذه حيث نتعامل مع تقدم الدائرة بالجافاسكربت ومن ثم نقوم بتحديث شكل التقدم على حسب المنطق اللذي طبقناه في الجافاسكربت:

أولأ ننشئ div يحتوي على الصورة الداخلية ودائرة التقدم:

  <div class="progress-div">
    <img src="مسار الصورة" class="image">
    <div id="progressCircle" ></div>
  </div>

من ثم نعدل التصميم بCSS ونستخدم خاصية ال conic-gradient لعمل الخلفية ولونها ونحتفظ بالتقدم على شكل متغير يتم التعديل عليه بواسطة جافاسكربت

    .progress-div {
      position: relative;
      display: inline-block;
    }

    #progressCircle {
      position: absolute;
      top: 0;
      left: 0;
      width: 120%;
      height: 120%;
      background: conic-gradient(#efc407 calc(var(--progress) * 1%), #cecece calc(var(--progress) * 1%));
      border-radius: 50%;
      transform: translate(-10%, -10%);
    }


    .image {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      object-fit: cover;
      position: relative;
      right: 3px;
      z-index: 1; 
    }

ومن ثم يتم تطبيق المنطق بالجافا سكربت والتعامل مع التقدم وتغييره

  <script>
    let progress = 0;
    const progressCircle = document.getElementById('progressCircle');

    //هنا يتم تغيير المنطق حسب المراد
  </script>

ويمكن التعديل على التصميم على حسب المراد.