- CSS Loader လုပ်နည်း
CSS ဖြင့် preloader ဖန်တီးနည်းကို လေ့လာပါ။
Loader ဖန်တီးနည်း
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<div class="loader"></div>
အဆင့် 2) CSS ကိုထည့်ပါ
ဥပမာ
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation:
spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform:
rotate(360deg); }
}
နမူနာရှင်းပြထားပါတယ်။
ပစ္စည်းသည် loader ၏ border
နယ်နိမိတ်အရွယ်အစားနှင့် ဘောင်အရောင်ကို သတ်မှတ်ပေးပါသည်။ ပစ္စည်း သည် border-radius
loader ကို စက်ဝိုင်းအဖြစ် ပြောင်းလဲပေးသည်။
နယ်နိမိတ်အတွင်း လှည့်ပတ်နေသော အပြာရောင်အရာသည်
border-top
ပိုင်ဆိုင်မှုနှင့် သတ်မှတ်ထားသည်။ သင်သည် border-bottom
, border-left
နှင့်/သို့မဟုတ်
border-right
နောက်ထပ် "spinners" ကို လိုချင်ပါက (ဥပမာ အောက်တွင် ကြည့်ပါ)။
width
loader ၏ အရွယ်အစားကို နှင့် height
ဂုဏ်သတ္တိများ ဖြင့် သတ်မှတ်ထား ပါသည်။
နောက်ဆုံးတွင်၊ animation
ကျွန်ုပ်တို့သည် အပြာရောင်အရာအား 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;
}
နောက်ဥပမာ
loader ကို စာမျက်နှာ အလယ်တွင် ထားပုံနှင့် loading ပြီးသွားသောအခါ "page content" ကို ပြပုံ ဥပမာ-