استفسار بخصوص loading screen

السلام عليكم منتدايا هوwww.lopital.net هناك مواقع عندما ادخل لها اجد مثلا سهم يلف او اي شكل اخر وبعد مدة معينة اجدها تخت ..



الصفحة 1 من 3 < 1 2 3 > الأخيرة »


26-07-2016 12:02 صباحا
mohab2005
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 14-05-2015
رقم العضوية : 6061
المشاركات : 268
الجنس : ذكر
تاريخ الميلاد : 4-2-1980
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 780
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
السلام عليكم منتدايا هو
www.lopital.net
هناك مواقع عندما ادخل لها اجد مثلا سهم يلف او اي شكل اخر وبعد مدة معينة اجدها تختفي والموقع يتم عرضه
مثل هذا
http://elzero.info/
ازااي اعمل لودينج سكرين زي الموقع دا للمنتدي الخاص بي

26-07-2016 02:43 مساء
مشاهدة مشاركة منفردة [1]
Soliman
PBB Management
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 18-07-2009
رقم العضوية : 1
المشاركات : 10317
الدولة : السعودية
الجنس : ذكر
تاريخ الميلاد : 6-1-1980
الدعوات : 44
يتابعهم : 12
يتابعونه : 50
قوة السمعة : 62386
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif استفسار بخصوص loading screen
لعمل ​تأثير انتظار تحميل  Loading Spinners  للصفحة الرئيسية للمنتدى

 افتح قالب : main
وضع هذا الكود اعلاه
<div id='loader'>
<div class='balls'></div>
<div class='balls'></div>
<div class='balls'></div>
<div class='balls'></div>
</div>
    <script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(".balls").fadeOut("slow");
                setTimeout(function () {
                    $("#loader").fadeOut("slow")
                }, 1000)
            }, 1000)
        });
    </script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#22475E;z-index:1000}.balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls:nth-child(1){background-color:#FF5460;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(2){background-color:#FF9D84;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(3){background-color:#F0E797;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(4){background-color:#75B08A;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)[email protected] move{0%{left:0%}100%{left:100%}}</style>



لمزيد من الأشكال ابحث في قوقل عن ​تأثير انتظار تحميل الصفحة Loading Spinners
أو عن Loading Spinners



بالتوفيق

26-07-2016 03:00 مساء
مشاهدة مشاركة منفردة [2]
mohab2005
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 14-05-2015
رقم العضوية : 6061
المشاركات : 268
الجنس : ذكر
تاريخ الميلاد : 4-2-1980
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 780
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif استفسار بخصوص loading screen
اخي سليمان مثلا هذا
https://codepen.io/Roosa/pen/yOQrdg
عندما اضيف كود html في main واكواد ال css في اخر ال css شيت لا يحدث شئ.. لماذا؟
وهنا ايضا
http://tobiasahlin.com/spinkit/
كيف لي ان اضيف ما يحلو لي منهم؟

26-07-2016 05:24 مساء
مشاهدة مشاركة منفردة [3]
khaabas
موقوف
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 23-07-2013
رقم العضوية : 3940
المشاركات : 168
الجنس : ذكر
تاريخ الميلاد : 4-12-1979
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 260
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif استفسار بخصوص loading screen
المشاركة الأصلية كتبت بواسطة: mohab2005 »
اخي سليمان مثلا هذا
https://codepen.io/Roosa/pen/yOQrdg
عندما اضيف كود html في main واكواد ال css في اخر ال css شيت لا يحدث شئ.. لماذا؟
وهنا ايضا
http://tobiasahlin.com/spinkit/
كيف لي ان اضيف ما يحلو لي منهم؟


شوف دول كده باكوادهم  wink_3
http://www.hackpower.org/2015/04/top-6-pre-loading-spinners-for-blogger.html


تم تحرير المشاركة بواسطة :khaabas
بتاريخ:26-07-2016 05:25 مساء


26-07-2016 05:30 مساء
مشاهدة مشاركة منفردة [4]
khaabas
موقوف
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 23-07-2013
رقم العضوية : 3940
المشاركات : 168
الجنس : ذكر
تاريخ الميلاد : 4-12-1979
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 260
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif استفسار بخصوص loading screen
وهنا لو عاوز تشوف تاثير كل شكل قبل ما تركبه
http://files.allbloggertricks.com/Pre%20Loading%20Spinners.html

 


تم تحرير المشاركة بواسطة :khaabas
بتاريخ:26-07-2016 05:44 مساء


26-07-2016 05:31 مساء
مشاهدة مشاركة منفردة [5]
mohab2005
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 14-05-2015
رقم العضوية : 6061
المشاركات : 268
الجنس : ذكر
تاريخ الميلاد : 4-2-1980
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 780
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif استفسار بخصوص loading screen
ركبت الكود دا
 <div id='loader'>
<div class="spinner"></div>
    </div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(".spinner").fadeOut("slow");
                setTimeout(function () {
                    $("#loader").fadeOut("slow")
                }, 1000)
            }, 1000)
        });
    </script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(#1f3a47,#0b1114);z-index:1000}.spinner{position:relative;margin:180px auto auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),black 90%);transform-origin:50%60%;transform:perspective(200px)rotateX(66deg);animation:spinner-wiggle [email protected] spinner-wiggle{30%{transform:perspective(200px)rotateX(66deg)}40%{transform:perspective(200px)rotateX(65deg)}50%{transform:perspective(200px)rotateX(68deg)}60%{transform:perspective(200px)rotateX(64deg)}}.spinner:before,.spinner:after{content:"";position:a*bsolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:spinner-spin 1.2s cubic-bezier(0.6,0.2,0,0.8)infinite,spinner-fade 1.2s linear infinite}.spinner:before{border-top-color:#66e5ff}.spinner:after{border-top-color:#f0db75;animation-delay:[email protected] spinner-spin{100%{transform:rotate(360deg)[email protected] spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}</style>


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

26-07-2016 05:33 مساء
مشاهدة مشاركة منفردة [6]
mohab2005
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 14-05-2015
رقم العضوية : 6061
المشاركات : 268
الجنس : ذكر
تاريخ الميلاد : 4-2-1980
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 780
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif استفسار بخصوص loading screen
وانا عاجبني الشكل اللي هنا
https://codepen.io/Roosa/pen/yOQrdg
ونفسي فعلا فطريقة انفذه بيها 


الصفحة 1 من 3 < 1 2 3 > الأخيرة »


الكلمات الدلالية
استفسار ، بخصوص ، loading ، screen ،







الساعة الآن 02:31 مساء