1. أهلا وسهلاً بكم في :: IQ-TeaM FORUM :: .
    إذا كانت هذه الزيارة الأولى أو لديك الرغبة بالانضمام لأعضاء شبكة عراق تيم فيجب الاطلاع على خصوصية الشبكه فربما بقائك زائر افضل لك من الانضمام بحيث أن قوانين شبكة عراق تيم لا تتناسب مع اهتماماتك .
    • للأطلاع على الخصوصية وسياسة الاستخدام - التفاصيل
    • بعد الاطلاع على سياسة الموقع وقوانين شبكة عراق تيم يمكنك التسجيل معنا - تسجيل عضو جديد
    إستبعاد الملاحظة
الكاتب : Read Onymus | المشاهدات : 1,382 | الردود : 28
الوسوم:
حالة الموضوع:
مغلق
  1. Read Onymus Developer

    الأنتساب:
    ‏27 أغسطس 2012
    المشاركات:
    41
    الإعجابات المتلقاة:
    7
    نقاط الجائزة:
    30
    الوظيفة:
    Free Web Developer
    الإقامة:
    jQuery
    نظام التشغيل:
    windows 8.1
    اللغة البرمجية:
    Perl
    [​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]
     
    'ZerOx و -AL SenatoOoR- معجبون بهذا.
  2. Wolf Hex DeveloPer Plus

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

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

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

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

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

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

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

    الأنتساب:
    ‏14 أغسطس 2014
    المشاركات:
    804
    الإعجابات المتلقاة:
    31
    نقاط الجائزة:
    435
    الجنس:
    ذكر
    الإقامة:
    [[ الـــعرآق الــــعظيم ]]
    نظام التشغيل:
    windows 7
    اللغة البرمجية:
    Visual Basic
    رد: درس عمل صفحه تحميل - CSS Spinners

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

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

    واواو

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


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

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

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

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

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

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

    بارك الله فيك اخوي .
     
  10. Gaza-Dz إدارة الموقع

    الأنتساب:
    ‏26 مايو 2013
    المشاركات:
    1,837
    الإعجابات المتلقاة:
    104
    نقاط الجائزة:
    505
    الجنس:
    ذكر
    الوظيفة:
    DZ
    الإقامة:
    DZ
    نظام التشغيل:
    windows 8.1
    اللغة البرمجية:
    Visual Basic
    Facebook:
    رد: درس عمل صفحه تحميل - CSS Spinners

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


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


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

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