W3.CSS တိုးတက်မှုဘားများ
အသုံးပြုသူတစ်ဦးသည် လုပ်ငန်းစဉ်တစ်ခုအတွင်း မည်မျှအကွာအဝေးကိုပြသရန် တိုးတက်မှုဘားကို အသုံးပြုနိုင်သည်။
အခြေခံ တိုးတက်မှုဘား
တိုးတက်မှုဘားတစ်ခုအတွက် ပုံမှန် <div> ဒြပ်စင်ကို သုံးနိုင်သည်။
တိုးတက်မှုဘားတစ်ခု၏ အမြင့်နှင့် အကျယ်ကို သတ်မှတ်ရန် CSS အကျယ်ပိုင်ဆိုင်မှုကို အသုံးပြုနိုင်သည်။
ဥပမာ
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
တိုးတက်မှုဘားအကျယ်
CSS အကျယ် ပိုင်ဆိုင်မှုပိုင်ဆိုင်မှု (0 မှ 100%) ဖြင့် တိုးတက်မှုဘားတစ်ခု၏ အကျယ်ကို ပြောင်းပါ-
ဥပမာ
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
တိုးတက်မှုဘားအရောင်များ
တိုးတက်မှုဘား၏အရောင်ကိုပြောင်းလဲရန် w3- အရောင် အတန်းများကို သုံးပါ -
ဥပမာ
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
တိုးတက်မှုဘား အညွှန်းများ
တိုးတက်မှုဘားသို့ အညွှန်းတစ်ခုထည့်ရန် w3-ကွန်တိန်နာ ဒြပ်စင် အတွင်း စာသားထည့်ပါ ။
အညွှန်းကို ဗဟိုပြုရန် w3-center class ကိုသုံး ပါ။ ချန်လှပ်ထားလျှင် ၎င်းကို ချိန်ညှိထားပါမည်။
ဥပမာ
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
တိုးတက်မှုဘား စာသားအရွယ်အစား
ကွန်တိန်နာအတွင်းရှိ စာသားအရွယ်အစားကို ပြောင်းလဲရန် w3- အရွယ်အစား အတန်းများကို အသုံးပြု ပါ-
ဥပမာ
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Progress Bar Padding
ကွန်တိန်နာသို့ padding ထည့်ရန် w3-padding အတန်းများကို သုံး ပါ။
ဥပမာ
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
လုံးဝန်းသော တိုးတက်မှုဘားများ
တိုးတက်မှုဘားသို့ အဝိုင်းထောင့်များထည့်ရန် w3-အဝိုင်း အတန်းများကို သုံး ပါ-
ဥပမာ
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Dynamic Progress Bar
ဒိုင်းနမစ်တိုးတက်မှုဘားတစ်ခုဖန်တီးရန် JavaScript ကိုအသုံးပြုပါ-
ဥပမာ
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green"
style="height:24px;width:1%"></div>
</div>
<button class="w3-button w3-light-grey" onclick="move()">Click Me</button>
<script>
function move() {
var elem =
document.getElementById("myBar");
var width =
1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
အညွှန်းများပါသည့် ဒိုင်းနမစ်တိုးတက်မှုဘား
ဗဟိုပြုတံဆိပ်-
ဥပမာ
ဘယ်သို့ညှိထားသော အညွှန်း-
ဥပမာ
တိုးတက်မှုဘား၏အပြင်ဘက်တွင် အညွှန်းတပ်ပါ-
ဥပမာ
20%
နောက်ထပ် ဥပမာ (အဆင့်မြင့်)
ဥပမာ
Added 0 of 10 photos