عند التعامل مع 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>
ويمكن التعديل على التصميم على حسب المراد.
مشاكل ال responsive design تحصل بسبب عدم ضبط الbreak points الخاصة بال Media query أو عدم استخدام خواص ال position بشكل صحيح. ينصح دائما بالتجربة أثناء العمل واستخدام الdeveloper tools الخاصة بالمتصفح فيتم تصغير وتكبير الشاشة وتعديل الأخطاء عندما يخرب التصميم عند حجم شاشة معين. الرجاء تزويد الخطأ الذي يحصل المرة القادمة لكي نعمل على إصلاحه.