الوسوم:
حالة الموضوع:
مغلق
  1. Read Onymus

    Read Onymus Developer

    الأنتساب:
    ‏27 أغسطس 2012
    المشاركات:
    41
    الإعجابات المتلقاة:
    5
    نقاط الجائزة:
    8
    الوظيفة:
    Free Web Developer
    الإقامة:
    jQuery
    [​IMG]

    السلام عليكم ورحمة الله وبركاته

    اخواني اصدقائي معاكم اخوكم عبد الرحمن العتيبي

    [​IMG]
    اليوم بأذن الله تعالى اطرح لكم درس جميل وصغير وسهل

    في عالم css

    CSS Spinners
    [​IMG]

    الدرس عباره عن عمل صفحه تحميل او ماشابه تصلح لعدة استخدامات

    في البداية نقوم بعمل صفحة html

    مثال

    [HTML CODE]<!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8'>
    <title>شبكة عراق تيم - spinner-loader</title>[/HTML CODE]

    الان نقوم بستدعاء ملف css

    [HTML CODE]<link rel="stylesheet" href="http://css-spinners.com/css/spinner/spinner.css" type="text/css">[/HTML CODE]

    من ثمة استدعاء العنصر في المكان الذي ترغب ان يضهر فيه

    [HTML CODE]<div class="spinner-loader">
    Loading…
    </div>[/HTML CODE]

    نقوم بتجهيز الصفحه بشكل نهائي لنشاهد ناتج العمل

    [HTML CODE]<!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8'>
    <title>شبكة عراق تيم - spinner-loader</title>
    <link rel="stylesheet" href="http://css-spinners.com/css/spinner/spinner.css" type="text/css">
    </head>
    <body>
    <center>
    <br /><div class="spinner-loader">
    Loading…
    </div><br /><br />
    جاري تحميل الصفحة<br />
    شبكة عراق تيم - spinner-loader
    </center>
    </body>
    </html>
    [/HTML CODE]
    [​IMG]

    الناتج

    [​IMG]
    [​IMG]

    الان دعونا نشاهد مثال اخر

    كود استدعاء css

    [HTML CODE]<link rel="stylesheet" href="http://css-spinners.com/css/spinner/heartbeat.css" type="text/css">[/HTML CODE]

    كود الاضافة

    [HTML CODE]<div class="heartbeat-loader">
    Loading…
    </div>[/HTML CODE]

    المثال

    [​IMG]

    [​IMG]

    الان دعونا نشاهد مثال اخر

    كود استدعاء css

    [HTML CODE]<link rel="stylesheet" href="http://css-spinners.com/css/spinner/whirly.css" type="text/css">[/HTML CODE]

    كود الاضافة

    [HTML CODE]<div class="whirly-loader">
    Loading…
    </div>[/HTML CODE]

    المثال

    [​IMG]

    [​IMG]

    الان دعونا نشاهد مثال اخر

    كود استدعاء css

    [HTML CODE]<link rel="stylesheet" href="http://css-spinners.com/css/spinner/hexdots.css" type="text/css">[/HTML CODE]

    كود الاضافة

    [HTML CODE]<div class="hexdots-loader">
    Loading…
    </div>[/HTML CODE]

    المثال

    [​IMG]

    [​IMG]

    الان دعونا نشاهد مثال اخر

    كود استدعاء css

    [HTML CODE]<link rel="stylesheet" href="http://css-spinners.com/css/spinner/dots.css" type="text/css">[/HTML CODE]

    كود الاضافة

    [HTML CODE]<div class="dots-loader">
    Loading…
    </div>[/HTML CODE]

    المثال

    [​IMG]

    [​IMG]

    الان دعونا نشاهد مثال اخر

    كود استدعاء css

    [HTML CODE]<link rel="stylesheet" href="http://css-spinners.com/css/spinner/plus.css" type="text/css">[/HTML CODE]

    كود الاضافة

    [HTML CODE]<div class="plus-loader">
    Loading…
    </div>[/HTML CODE]

    المثال

    [​IMG]

    [​IMG]

    الان دعونا نشاهد مثال اخر

    كود استدعاء css

    [HTML CODE]<link rel="stylesheet" href="http://css-spinners.com/css/spinner/flower.css" type="text/css">[/HTML CODE]

    كود الاضافة

    [HTML CODE]<div class="flower-loader">
    Loading…
    </div>[/HTML CODE]

    المثال

    [​IMG]

    [​IMG]

    الى هنا اكتفي بهذه الامثله البسيطه

    لنا عوده اخرى ان شاء الله

    [​IMG]
     
    1 person likes this.
  2. Wolf Hex

    Wolf Hex DeveloPer Plus

    الأنتساب:
    ‏24 فبراير 2015
    المشاركات:
    264
    الإعجابات المتلقاة:
    1
    نقاط الجائزة:
    18
    الوظيفة:
    Student
    الإقامة:
    دولة أمير المؤمنين (ع)
    رد: درس عمل صفحه تحميل - CSS Spinners

    وعليكم السلام ورحمه الله
    بارك الله بيك على التنسيق والشرح الواضح
    يعطيك العافيه
    {1!$7}
     
  3. AlKOrtanY

    AlKOrtanY Developer

    الأنتساب:
    ‏24 مايو 2012
    المشاركات:
    57
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    رد: درس عمل صفحه تحميل - CSS Spinners

    تسلم أخي طرح جميل

    ربي يعطيك الف عافيه
     
  4. Read Onymus

    Read Onymus Developer

    الأنتساب:
    ‏27 أغسطس 2012
    المشاركات:
    41
    الإعجابات المتلقاة:
    5
    نقاط الجائزة:
    8
    الوظيفة:
    Free Web Developer
    الإقامة:
    jQuery
    رد: درس عمل صفحه تحميل - CSS Spinners

    شكرآ لمروركم بالتوفيق للجميع
     
  5. -AL SenatoOoR-

    -AL SenatoOoR- V • I • P

    الأنتساب:
    ‏14 أغسطس 2014
    المشاركات:
    803
    الإعجابات المتلقاة:
    29
    نقاط الجائزة:
    28
    الجنس:
    ذكر
    الإقامة:
    [[ الـــعرآق الــــعظيم ]]
    رد: درس عمل صفحه تحميل - CSS Spinners

    {1!$2}
    ماشاء الله عليك
    وش هل الابداع :{14}:
    موضوع منسق وشرح مفوهم وموضوع متعوب عليه
    يوشم بالخماسي +التقيم +{1!$7}
    استمر يابطل ولاتحرمنا من ابداعك
    :ُye@:​
     
  6. محمد العوادي

    محمد العوادي Developer

    الأنتساب:
    ‏31 يوليو 2015
    المشاركات:
    202
    الإعجابات المتلقاة:
    3
    نقاط الجائزة:
    18
    رد: درس عمل صفحه تحميل - CSS Spinners

    واواو

    رووعه بكل متعنيه الكلمه من معنى استمر يامبدع


    بانتضار جديدك يابطل
     
  7. عراقي انا

    عراقي انا Developer

    الأنتساب:
    ‏22 ديسمبر 2012
    المشاركات:
    37
    الإعجابات المتلقاة:
    1
    نقاط الجائزة:
    8
    الإقامة:
    العراق
    رد: درس عمل صفحه تحميل - CSS Spinners

    مْبُڊعٌ يُآ آځيُ بُآرْڪ آلُلُهٌ فُيُڪ
     
  8. V!P-Hero

    V!P-Hero DeveloPer Plus

    الأنتساب:
    ‏27 مارس 2012
    المشاركات:
    138
    الإعجابات المتلقاة:
    11
    نقاط الجائزة:
    18
    الإقامة:
    هنااااااك
    رد: درس عمل صفحه تحميل - CSS Spinners

    مشكور على الموضوع المفيد ..
    فعلا كتبت فأبدعت ..
    واصل يابطل ^
     
  9. mouadh kouki

    mouadh kouki Developer

    الأنتساب:
    ‏8 نوفمبر 2011
    المشاركات:
    43
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    الإقامة:
    TuNiSiA
    رد: درس عمل صفحه تحميل - CSS Spinners

    بارك الله فيك اخوي .
     
  10. Gaza-Dz

    Gaza-Dz Support - Iq-Team

    الأنتساب:
    ‏26 مايو 2013
    المشاركات:
    1,823
    الإعجابات المتلقاة:
    87
    نقاط الجائزة:
    48
    الجنس:
    ذكر
    الوظيفة:
    DZ
    الإقامة:
    DZ
    رد: درس عمل صفحه تحميل - CSS Spinners

    السلام عليكم ورحمة الله


    مشاء الله اخي علي الشرح الجميل
    بارك الله بك علي الشرح المميزة
    اتمني لك المزيد من التميزة و التوفيق
    نحن بانمتظار كل ما هو جديدك من شروحات


    ......
     
حالة الموضوع:
مغلق

مشاركة هذه الصفحة