webdevlinux - logo Web Dev Linux

Progress Bars

යම් කිසි දෙයක ප්‍රගතියක් නිරූපණය කිරීමට HTML Progress Bars යොදා ගත හැකිය. Progress Bars වල යෙදීම් කිහිපයක් මෙහිදී සලකා බැලේ.

HTML Progress bars Progress Bars

පහත උදාහරණය අත්හදා බලන්න.

FILE : progress.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Progress bars</title>
</head>
<body>
<p>Indeterminate progress bar : <progress></progress></p>
<p>40% : <progress value="0.4"></progress></p>
<p>87% : <progress value="87" max="100"></progress></p>
</body>
</html>

පැහැදිලිකිරීම

ඉහත උදාහරණයේ සඳහන් elements හා attributes ගැන පැහැදිලි කිරීම පහත දක්වා ඇත.

<progress></progress>
මෙමගින් progress bar එකක් නිරූපණය කෙරේ. value attribute එක නොමැති විට, මෙයින් අවිනිශ්චිත progress bar එකක් නිරූපණය කෙරේ.
value="0.4"
value attribute එක ඇතිවිට මෙයින් නිශ්චිත අගයක් පෙන්වනු ලබයි. value attribute එක සමග max attribute එක නොමැති විට value එක ලෙස 0 සහ 1 අතර දශම අගයක් නිරූපණය කල හැක.
max="100"
value attribute එක ලෙස පැවතිය හැකි උපරිම අගය මෙයින් නිරූපණය කෙරේ. max attribute එක භාවිතා වනවිට, value attribute එකෙහි අගය සැමවිටම මෙයට වඩා කුඩා හෝ සමාන විය යුතුය.