أهلا وسهلا بك زائرنا الكريم في منتدى دعم PBBoard الرسمي، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

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

السلام عليكم منتدايا هو هناك مواقع عندما ادخل لها اجد مثلا سهم يلف او اي شكل اخر وبعد مدة معينة اجدها تختفي والموقع يتم عرضه مثل هذا ازااي اعمل ل



26-07-2016 12:02 صباحاً
معلومات الكاتب ▼
انضم في : 14-05-2015
رقم العضوية : 6,061
المشاركات : 283
الجنس :
تاريخ الميلاد : 4-2-1980
قوة السمعة : 780
موقعي : زيارة موقعي
السلام عليكم منتدايا هو
www.lopital.net
هناك مواقع عندما ادخل لها اجد مثلا سهم يلف او اي شكل اخر وبعد مدة معينة اجدها تختفي والموقع يتم عرضه
مثل هذا
http://elzero.info/
ازااي اعمل لودينج سكرين زي الموقع دا للمنتدي الخاص بي

look/images/icons/i1.gif استفسار بخصوص loading screen
  26-07-2016 02:43 مساءً   [1]
معلومات الكاتب ▼
انضم في : 18-07-2009
رقم العضوية : 1
المشاركات : 12,561
الدولة : KSA
الجنس :
الدعوات : 52
قوة السمعة : 74,076
موقعي : زيارة موقعي
لعمل ​تأثير انتظار تحميل Loading Spinners للصفحة الرئيسية للمنتدى

افتح قالب : main
وضع هذا الكود اعلاه
CODE
<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)}@keyframes move{0%{left:0%}100%{left:100%}}</style>




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



بالتوفيق

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

look/images/icons/i1.gif استفسار بخصوص loading screen
  26-07-2016 05:24 مساءً   [3]
معلومات الكاتب ▼
انضم في : 23-07-2013
رقم العضوية : 3,940
المشاركات : 168
الجنس :
تاريخ الميلاد : 4-12-1979
قوة السمعة : 260
موقعي : زيارة موقعي
المشاركة الأصلية كتبت بواسطة: 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 مساءً


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


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


look/images/icons/i1.gif استفسار بخصوص loading screen
  26-07-2016 05:31 مساءً   [5]
معلومات الكاتب ▼
انضم في : 14-05-2015
رقم العضوية : 6,061
المشاركات : 283
الجنس :
تاريخ الميلاد : 4-2-1980
قوة السمعة : 780
موقعي : زيارة موقعي
ركبت الكود دا
CODE
 <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 1.2sinfinite}@keyframes 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:0.3s}@keyframes spinner-spin{100%{transform:rotate(360deg)}}@keyframes spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}</style>


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

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

look/images/icons/i1.gif استفسار بخصوص loading screen
  26-07-2016 05:48 مساءً   [7]
معلومات الكاتب ▼
انضم في : 23-07-2013
رقم العضوية : 3,940
المشاركات : 168
الجنس :
تاريخ الميلاد : 4-12-1979
قوة السمعة : 260
موقعي : زيارة موقعي
وفيه مشكلة كمان كل ما هتستدعى الصفحة الرئيسية هتظهرلك شاشة التحميل

والافضل تكون مرة واحدة هند الدخول للمنتدى
هدور كده على جوجل وارجعلك اذا لقيت حاجة

look/images/icons/i1.gif استفسار بخصوص loading screen
  26-07-2016 06:14 مساءً   [8]
معلومات الكاتب ▼
انضم في : 14-05-2015
رقم العضوية : 6,061
المشاركات : 283
الجنس :
تاريخ الميلاد : 4-2-1980
قوة السمعة : 780
موقعي : زيارة موقعي
لا انا عاوزها كل مرة عادي بس المشكلة ان انا بنتظر لكن المنتدي لا يظهر .. الذي يظهر فقط صفحة ال loading

look/images/icons/i1.gif استفسار بخصوص loading screen
  26-07-2016 07:34 مساءً   [9]
معلومات الكاتب ▼
انضم في : 23-07-2013
رقم العضوية : 3,940
المشاركات : 168
الجنس :
تاريخ الميلاد : 4-12-1979
قوة السمعة : 260
موقعي : زيارة موقعي
المشاركة الأصلية كتبت بواسطة: mohab2005 لا انا عاوزها كل مرة عادي بس المشكلة ان انا بنتظر لكن المنتدي لا يظهر .. الذي يظهر فقط صفحة ال loading
لانك محتاج تعدل الاكواد

look/images/icons/i1.gif استفسار بخصوص loading screen
  26-07-2016 08:49 مساءً   [10]
معلومات الكاتب ▼
انضم في : 14-05-2015
رقم العضوية : 6,061
المشاركات : 283
الجنس :
تاريخ الميلاد : 4-2-1980
قوة السمعة : 780
موقعي : زيارة موقعي
هحتاج اضيف ولا اشيل ولا ايه

look/images/icons/i1.gif استفسار بخصوص loading screen
  27-07-2016 12:04 صباحاً   [11]
معلومات الكاتب ▼
انضم في : 18-07-2009
رقم العضوية : 1
المشاركات : 12,561
الدولة : KSA
الجنس :
الدعوات : 52
قوة السمعة : 74,076
موقعي : زيارة موقعي
المشاركة الأصلية كتبت بواسطة: mohab2005 ركبت الكود دا
CODE
 <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 1.2sinfinite}@keyframes 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:0.3s}@keyframes spinner-spin{100%{transform:rotate(360deg)}}@keyframes spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}</style>


بس بقعد انتظر لفترة طويلة ومبيدخلنيش للمنتدي.. ليه مش عارف وانا لقيت اكتر من دول وكلهم مش بيدخلوني للمنتدي واقفين علي صفحة الانتظار بس
يجب حذف هذا السطر
CODE
​<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>


لأنه متعرف من قبل في النسخة فلا داع لتكراره

look/images/icons/i1.gif استفسار بخصوص loading screen
  27-07-2016 01:29 صباحاً   [12]
معلومات الكاتب ▼
انضم في : 14-05-2015
رقم العضوية : 6,061
المشاركات : 283
الجنس :
تاريخ الميلاد : 4-2-1980
قوة السمعة : 780
موقعي : زيارة موقعي
طب بالنسبة لده
https://codepen.io/Roosa/pen/yOQrdg
يتركب ازاي

look/images/icons/i1.gif استفسار بخصوص loading screen
  27-07-2016 02:50 صباحاً   [13]
معلومات الكاتب ▼
انضم في : 18-07-2009
رقم العضوية : 1
المشاركات : 12,561
الدولة : KSA
الجنس :
الدعوات : 52
قوة السمعة : 74,076
موقعي : زيارة موقعي
المشاركة الأصلية كتبت بواسطة: mohab2005 طب بالنسبة لده
https://codepen.io/Roosa/pen/yOQrdg
يتركب ازاي
افتح قالب : main
وضع هذا الكود اعلاه
CODE

<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-color:#FFB3B4;z-index:1000
}
.balls{position:absolute;
width:100px;
height:100px;
border-radius:100%;
position:absolute;
border: 1px solid red;
animation: up 1s;
animation-iteration-count: infinite;
transition:2s;
border-bottom:none;
border-right:none;
animation-timing-function:linear;
margin-left: -70px;
margin-top: -70px;
left:50%;
top:50%;
}
.balls:nth-child(1){
width:90px;
height:90px;
left:50.35%;
top:50.7%;
animation-delay:.2s;
}.balls:nth-child(2){
width:80px;
height:80px;
left:50.70%;
top:51.4%;
animation-delay:.4s;
}.balls:nth-child(3){
width:80px;
height:80px;
left:50.70%;
top:51.4%;
animation-delay:.4s;
}.balls:nth-child(4){
width:70px;
height:70px;
left:51.05%;
top:52.1%;
animation-delay:.6s;
}
.balls:nth-child(5){
width:60px;
height:60px;
left:51.40%;
top:52.8%;
animation-delay:.8s;
}
@keyframes up{
from{transform:rotate(0deg); }
50%{transform:rotate(180deg);}
100%{transform:rotate(360deg);}
}}
</style>

رد جديد موضوع جديد




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









الساعة الآن 09:44 AM