1

بابه‌ت: دروستكردنى preloader with jQuery بۆ ماڵپەڕى ژووملە

سڵاو بەڕێزان.
من دەمەوێت لە كاتى Loading ماڵپەڕەكەم كە چەند چركەيەكە ئەنيمەيشنێك پيشان بدات كە يارمەتى بەكارهێنەر دەدات بێزار نەبێت لە چاوەڕوانى كردانەوەى لاپەڕەى ماڵپەڕەكە.
لەم چەند لينكە بە شێوەيەك باسى كردووە بەڵام هەرچى دەكەم بۆم ڕێكناخرێت
لينكى يەكەم: https://medium.com/@kingrayhan/create-a … efb03c7f23
لينكى دووەم: https://medium.com/@feldman238/the-quic … fa975e1a50

ئەنيمەيشنەكە بە فايلێكى (GIF) دەكرێت لەم لينكە دەتوانين هەر ئەنيمەيشنێك دابنرێت
https://i.imgur.com/l568ECv.gif

ئەمەش ماڵپەڕەكەى منە ئەگەر سەيرى كۆدەكانتان كرد: https://www.civilferba.com/

ئەگەر بكرێت هەنگاوەكانم پێ بڵێن كە ئەم كۆدانەى سەرەوە بخەمە كوێوە زۆر سوپاستان دەكەم، كاتێكى زۆر خەريكى بووم بەڵام بێ سوود بوو.

زۆر سوپاس

2 (دەستکاری کراوە: balenzrar 2018-09-02 17:32:05)

وه‌ڵام: دروستكردنى preloader with jQuery بۆ ماڵپەڕى ژووملە

بەڕێزان ئەمەش نمونەيەكى ترە https://codepen.io/zerospree/pen/aCjAz ، وا هەست دەكەم لەوانەى سەرەوە باشتر بێت چونكە وێنەى گيف ناوێت، هەر خۆى شێوەى ئەنيمەيشنەكە بە كۆدى ستايلى سى ئێس ئێس نوسراوە بەمەش بۆ ئامێرە شاشە جياوازەكان ئەنيمەيشنەكە وەك Responsive ى لێدێت و كواليتيەكەى باشتر دەبێت.
ئەمەى لەم لينكەى سەرەوە كۆدى هتمل و سى ئێس ئێس كە ستايلى ئەنيمەيشنەكەى تێدا دانراوە، تەنها كۆدى جاڤا سكرێپتێكى كەمە ئەم كۆدەيش بۆ ئەوەيە كە كاتێك لاپەڕەكە بە تەواوى كرايەوە ئەنيمەيشنەكە ديارنەمێنێت

كۆدى هتمل كە لە دواى Body Tag دادەنرێت:

<div class="preloader">
  <hr/><hr/><hr/><hr/>
</div>

ئەمەش كۆدى ستايلەكەيە كە دەخرێتە ناو فايلێكى سى ئێس ئێس:

body{background:#ECF0F1}

.preloader{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
  /*change these sizes to fit into your project*/
  width:100px;
  height:100px;
}
.preloader hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}

.preloader :first-child{background:#19A68C;animation-delay:-1.5s}
.preloader :nth-child(2){background:#F63D3A;animation-delay:-1s}
.preloader :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.preloader :last-child{background:#193B48}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}

ئەمەش كۆدى جاڤا سكرێپەكەيە، هەرچەندە ئەم كۆدەم لە شوێنێكى تر هێناوە  تەنها كلاسەكەم گۆڕيوە كە هەمان كلاسى دوو كۆدەكەى سەرەوە بێت (ئەم كۆدە بۆ ئەوەيە كاتێك كە لاپەڕەى ماڵپەڕەكە بە تەواوى كرايەوە ئەم ئەنيمەيشنە نەمێنێت)

 $(window).load(function() {
   $('.preloader').fadeOut('slow');
});

تێبينى: كۆدى جاڤاسكرێپتەكە لەم لينكە وەرگيراوە: https://medium.com/@feldman238/the-quic … fa975e1a50

تەنها يارمەتيم دەوێت كە چۆن ئەم كۆدانە ڕێك بخەم، لينكى ماڵپەڕەكەى خۆم لەسەرەوە داناوە ئەگەر سەيرى Source Code ەكان بكەن.
چۆن بتوانم ئەم كۆدانە بخەمە شوێنى گونجاو.
زۆر سوپاس

3

وه‌ڵام: دروستكردنى preloader with jQuery بۆ ماڵپەڕى ژووملە

کاک بەلێن بە Module تاقیتکردۆتەوە ؟
https://www.google.iq/search?q=preloade … p;ie=UTF-8


واتە بە مۆدیول نەک بە  Custom کۆدەکان دابنێی.

ڕووحت شاد مامۆستای گەورە ئاسۆ نادری، تۆ هەموو شتێکت فێر کردین.
لەگەل وێبچن هەموو شتێک ئاسانترە!

4

وه‌ڵام: دروستكردنى preloader with jQuery بۆ ماڵپەڕى ژووملە

Rawan نووسی:

کاک بەلێن بە Module تاقیتکردۆتەوە ؟
https://www.google.iq/search?q=preloade … p;ie=UTF-8


واتە بە مۆدیول نەک بە  Custom کۆدەکان دابنێی.

كاك ڕەوان زۆربەى مۆديولە باشەكان بە پارەن نزيكى ٣٠ دۆلار، ئەم ستايلە زۆر جوانە بەلام ئەم كێشەيەى هەيە، لەبەر ئەوەى پەنام بۆ ئەو ڕێگەيە برد تا ئەوانەم دۆزيەوە، هەڵبەتە ئەگەر ئيشەكەمان بۆ بكات.