ဖန်တီးနည်းဖြင့်

ဗီဇစာသင်း အချက်အလက် အသုံးပြုပါ

亲自试一试

ဆင်းနှံ့ကို ဖန်တီးရန်

ပထမအစက် - အခြေခံအချက်အလက် ထပ်ထည့်ပါ

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

ဒုတိယအစက် - ဗီဇစာသင်း ထပ်ထည့်ပါ

.loader {
  border: 16px solid #f3f3f3; /* အဖြူအနီရောင် */
  border-top: 16px solid #3498db; /* အနီရောင် */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

亲自试一试

အမှတ်အသားကြောင်း ဖော်ပြပါ

border ဗီဇစာသင်းအချက်အလက် ဖော်ပြပါborder-radius ဗီဇစာသင်းအချက်အလက် ကို အပေါ်ထပ် ပြုပေးပါ

အကွင်းပိုင်းတွင် အနီရောင်အစိတ်အပိုင်းကို ဆင်းနှံ့ကို ပြုပေးပါ border-top ဗီဇစာသင်းအချက်အလက် ဖော်ပြပါ border-bottom、border-left နှင့်/သို့မဟုတ် border-right（အောက်ဆုံး အမှတ်အသားကို ကြည့်ရှုပါ）

ဆင်းနှံ့ကို အရွယ်အစား ဖော်ပြပါ width နှင့် height ဗီဇစာသင်းအချက်အလက် ကို ဖော်ပြပါ

နောက်ဆုံးတွင် အနီရောင်အစိတ်အပိုင်းကို 2 စက္ကန့် အချိန်သွား အာရုံကြောန်ခြင်းဖြင့် အပြည့်အဝင် အနည်းငယ် အစိတ်အပိုင်းအား ပြုပေးပါ

အကြောင်းကြားချက်:လက်တွေ့ခြင်းမရှိသော animation နှင့် transform လက်တွေ့သော ဗီဇစာသင်းအချက်အလက် ကို လုပ်ဆောင်ပါ -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;
}

亲自试一试

另一个例子

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

实例

亲自试一试