كيفية إنشاء loading

في هذا الدرس سنتعرف على كيفية إنشاء loading بطريقة سهلة أولا تعريف لل loading ثم مثال كود لها ولكي لا نطيل عليكم كثيرا سنبدء على بركة الله.
يتم استخدام loading لإظهار أن المحتوى قيد التحميل ويساعد على تحسين تجربة المستخدم. في هذا الدرس، سنقوم بإنشاء loading بسيط باستخدام CSS و JavaScript.

أولاً، يجب إنشاء العنصر الذي سيحتوي على loading . يمكن استخدام العنصر div وتطبيق الأنماط المناسبة لتحديد الشكل والأبعاد.

HTML

<div class="loading"></div>

بعد ذلك، يمكن استخدام CSS لتحديد الأنماط الخاصة بـ loading. يمكن استخدام الخصائص background و width و height لتحديد الشكل والأبعاد ولون الخلفية بالنسبة للون الخليفة سيكون شفاف و سنعطيها border لتحديدها وسنطهر فقط جهتي الفوق وايسار باللون الأحمر الفاتح والباقي باللون الرمادي وسنعطيعها border-radius مع قيمة 50% لجعل الشكل دائري وأخيرا سنستعمل animtion الخاص بنا وتحديد إسمه مع عدد الثواني الذي سيستغرقه مع قيمة infinity لكي يدور دون توقف إلى ما لانهاية.

CSS

.loading {
    background: transparent;
    width: 50px;
    height: 50px;
    border-left: 5px solid #f45;
    border-right: 5px solid #ccc;
    border-top: 5px solid #f45;
    border-bottom: 5px solid #ccc;
    border-radius: 50%;
    animation: rotate 1s infinite linear;
}

يمكن استخدام CSS Animation لإنشاء تأثير الدوران. يتم ذلك عن طريق تحديد مفتاح الرسوم المتحركة وتطبيقه على loading. في هذا المثال، سيتم دوران الloading بزاوية 360 درجة.

CSS

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

أخيرًا، يمكن استخدام JavaScript لتحديد متى يجب إخفاء loading. يتم ذلك عن طريق إضافة الخاصية display: none إلى loading بعد اكتمال التحميل. في هذا المثال، سنستخدم window.onload للكشف عن اكتمال التحميل وإخفاء loading.

JavaScript

window.onload = function() {
    var loading = document.querySelector('.loading');
    loading.style.display = 'none';
}

بهذا الشكل، يتم إنشاء loading بسيط باستخدام CSS و JavaScript. يمكن تخصيص هذا الloading وفقًا لاحتياجات الموقع أو التطبيق.

لكي تنظر للنتيجة بشكل أوضح:



وهكذا إنتهينا إذا أعجبكم الدرس أتمنى تدعومنا بمشاركته وشكرا لكم و وفقكم الله.