کیسے بنائیں: سی ایس ایس لودر

سی ایس ایس کا استعمال سے پیش لوڈر بنانے کا سیکس کریں.

亲自试一试

لودر کا قیام کیسے کریں

پہلا قدم - ایچ تی ایم ایل کا اضافہ:

<div class="loader"></div>

دوسرا قدم - سی ایس ایس کا اضافہ:

.loader {
  border: 16px solid #f3f3f3; /* سورجی رنگ */
  border-top: 16px solid #3498db; /* نیلا */
  border-radius: 50%;
  کورائی: 120px;
  کچھائی: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

亲自试一试

مثال دیکھیئے:

بوردر ترمیم کیاجاتا ہے جو لودر کی بوردر کی سائز اور رنگ کا معین کرتی ہے.border-radius ترمیم کے ذریعے لودر کو چورا بنایا جاتا ہے.

بوردر کے اندر چکر زدنا بنیادی رنگ کا حصہ border-top ترمیم کیاجاتا ہے. اگر آپ مزید 'گیر' چاہتے ہیں تو اس میں شامل کریں. border-bottom،border-left اور/یا border-rightمثال دیکھیئے (نیچے)).

لودر کی بڑائی، کورائی اور کچھائی ترمیم کئے گئے

آخری میں، ہم نے ایک آنیماشن اضافہ کیا ہے جس میں بنیادی رنگ کا حصہ 2 سیکنڈ کی رفتار سے لگاتار چکر زدنا شروع کرتا ہے.

تذکرہ:برائے نہایت نافذ نہیں ہونے والی آنیماشن اور ترمیم برائے استعمال کی نئی سائٹ، آپ کو ایک -webkit- پیشوند کا استعمال کا مثال دیکھیئے کس طرح عمل کریں.

مزید کچھ گیر کا اضافہ کریں

实例

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

亲自试一试

实例

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

亲自试一试

实例

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

亲自试一试

另一个例子

如何将加载器放置在页面中间，并在加载完成时显示“页面内容”：

实例

亲自试一试