عمل ويندوز لودر Windows Loader باستخدام HTML و CSS فقط

يستخدم موقعنا الإلكتروني ملفات تعريف الارتباط لتحسين تجربتك. سياسة الخصوصية.

عمل ويندوز لودر Windows Loader باستخدام HTML و CSS فقط

+
حجم خط المقالة
-
{settocflatech}
سنتعلم في هذه المقالة كيفية إنشاء ويندوز لودر أو بالانجليزية Windows Preloader أو Loader باستخدام HTML وCSS فقط.

ماهو المحمل المُسبق؟ أو Loader أو PreLoader


كلها مسميات لنفس الشئ وهو ما تراه أثناء تحميل صفحة ما تزورها والتي لم يتم تحميل باقي محتواها.
يساعد Preloader في الترفيه عن الزوار بينما لا تزال بقية الصفحة قيد التحميل. ويساعد التحميل المسبق في الحفاظ على معدل الارتداد في الموقع حيث أنه يقوم بتأخير الزائر للحظات قبل وصوله للمحتوى وهي منحة اضافية من الوقت للبقاء داخل موقعك.

في هذه المقاله نشرح طريقة عمل محمل مسبق Loader بنفس فكرة نظام الويندوز التابع لشركة مايكروسوفت والذي يظهر عند بدء تشغيل جهاز الكمبيوتر ستجد ان بعض النقاط الدوارة ونص يفيد بأنه عليك الانتظار وأثناء دوران المحمل بعض بضع ثواني يختفي المحمل ثم يعود مره اخرى حتى يختفي تمام بعد إقلاع الويندوز.

{setMore}

في هذا البرنامج يكون المحمل المسبق هو نفس فكرة المحمل الذي تجده داخل جهاز الكمبيوتر عند البدء في تشغليه والذي يدور في إتجاه عقارب الساعة بلا توقف. تم تحديد نسب معينه للمحمل ليختفي فيها ويظهر بنسب معينة حتى يشابه تمام المحمل المسبق الخاص بالويندوز Windows Loader.

إذا كان هذا صعباً عليك، يمكنك مشاهدة الفيديو المبسط لشرح كيفية عمل محمل مسبق (Windows Preloader أو Loader).

فيديو تعليمي لعمل المحمل المسبق



إذا كُنت جديداً فى عالم تطوير المواقع ولديك خبره بسيطة في HTML وCSS يمكنك إنشاء المزيد من هذه المحملات المسبقة باستخدام افكارك الشخصية.

وكما ذكرت أعلاه أن أهمية أداة المحمل المسبق Preloader هو الحفاظ على معدل الارتداد والترفيه عن الزوار ومشاهدي المحتوى الخاص بالموقع.

إذا كُنت ترغب في الحصول على اكواد المصدر الخاصة بهذا المحمل المسبق Preloader فقط مرر لأسفل.

محمل مسبق Windows Loader أو Preloader (مفتوح المصدر)


لإنشاء هذا المحمل الموجود في الفيديو فقط تحتاج لإنشاء ملفين أحدهما يحمل أكواد HTML والآخر خاص بأكواد الشكل الظاهري CSS.

قم فقط بنسخ محتوى كل ملف ولصق هذه الأكواد داخل ملفاتك:

أولاً: قم بإنشاء ملف باسم index.html والصق داخله محتوى الكود التالي، ولكن تأكد ان الملف بامتداد أو صيغة .HTML.

<html lang="en">
<!--* BergStock.Com *-->
<head>
    <meta charset="UTF-8"></meta>
    <title>Windows Loader - ويندوز لودر</title>
    <link href="style.css" rel="stylesheet"></link>
</head>
<body>
    <div class="container">
        <div class="warpper">
            <div class="bergloader">
                <div class="circle"></div>
            </div>
            <div class="bergloader">
                <div class="circle"></div>
            </div>
            <div class="bergloader">
                <div class="circle"></div>
            </div>
            <div class="bergloader">
                <div class="circle"></div>
            </div>
            <div class="bergloader">
                <div class="circle"></div>
            </div>
            <div class="bergloader">
                <div class="circle"></div>
            </div>
        </div>
        <div class="waitingmessage">
            لحظات من فضلك
        </div>
    </div>
</body>
</html>

ثانياً: قم بإنشاء ملف باسم style.css والصق الرموز التالية داخله وتذكر أنه يجب عليك أن يكون الملف بامتداد أو صيغة .CSS.
 
/* Brought to you from BergStock.Com */
/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}
body {
    display: flex;
    align-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    background: #1540EA
}
.container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center
}
.warpper {
    position: absolute;
    top: -50px;
    transform: scale(1.5)
}
.bergloader {
    height: 25px;
    width: 1px;
    position: absolute;
    animation: rotate 3s linear infinite
}
.bergloader .circle {
    position: relative;
    top: 25px;
    height: 5px;
    width: 5px;
    background: #fff;
    border-radius: 50%;
}
.waitingmessage {
    position: absolute;
    bottom: -75px;
    font-size: 20px;
    font-weight: 600;
    font-family: Tahoma;
    color: #fff
}
@keyframes rotate {
    25% {
        transform: rotate(220deg)
    }
    50% {
        transform: rotate(450deg);
        opacity: 1
    }
    75% {
        transform: rotate(720deg);
        opacity: 1
    }
    76% {
        opacity: 0
    }
    100% {
        opacity: 0;
        transform: rotate(0deg)
    }
}
.bergloader:nth-child(1) {
    animation-delay: 0.15s
}
.bergloader:nth-child(2) {
    animation-delay: 0.3s
}
.bergloader:nth-child(3) {
    animation-delay: 0.45s
}
.bergloader:nth-child(4) {
    animation-delay: 0.6s
}
.bergloader:nth-child(5) {
    animation-delay: 0.75s
}
.bergloader:nth-child(6) {
    animation-delay: 0.9s
}

هذا كل شئ، فقد قمت بإنشاء محمل مسبق مشابه للموجود في جهازك الكمبيوتر Windows Preloader باستخدام HTML وCSS فقط.

إذا واجهتك بعض المشاكل أو أية أخطاء فرجاءً ترك تعليقك وسيتم الرد عليك.
بيرجستوك

موقع تقني يشمل كافة مجالات التكنولوجيا المختلفة من لغات برمجية واخبار التكنولوجيا.

1 تعليقات
  1. أضافه جميلة جدأ, وشرح ممتاز من أنسان مبدع دائما, شكرا علي مجهودك يغالي

    ردحذف
الموضوع السابق الموضوع التالي