بەڕێزان ئەمەش نمونەيەكى ترە 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 ەكان بكەن.
چۆن بتوانم ئەم كۆدانە بخەمە شوێنى گونجاو.
زۆر سوپاس