+- Sinisterly (https://sinister.li)
+-- Forum: Design (https://sinister.li/Forum-Design)
+--- Forum: Web Design (https://sinister.li/Forum-Web-Design)
+--- Thread: HTML & CSS - Making a custom percentage bar (/Thread-HTML-CSS-Making-a-custom-percentage-bar)
HTML & CSS - Making a custom percentage bar - Banadmin - 05-16-2013
Markup:
Code:
<div class="percent_background"><div class="float_right">46%</div><a href="http://www.discussionzone.net/Thread-Update-Green-Percentage-Bar-Information-Why" /><div class="percent_percent"></div></a></div>The <a href="" /></a> can be linked to a thread or another page.
CSS:
Code:
.percent_percent {
width:46%;
background: #253408;
border: 1px solid #192211;
-moz-box-shadow: inset 0 0 2px #82B51C;
-webkit-box-shadow: inset 0 0 2px #82B51C;
box-shadow: inset 0 0 2px #82B51C;border-radius: 3px;
-moz-border-radius: 2px;
-webkit-border-radius: 3px;
-khtml-border-radius: 2px;
text-align: center;
padding: 8px 20px;
font-size: 12px;
color: #ABF125;
font-weight: normal;
}
.percent_background {
border-radius: 3px;
-moz-border-radius: 2px;
-webkit-border-radius: 3px;
-khtml-border-radius: 2px;
text-align: center;
padding: 8px 20px;
font-size: 12px;
color: rgb(49, 49, 49);
font-weight: normal;
background: rgb(14, 14, 14);
border: 1px solid rgb(9, 9, 9);
-moz-box-shadow: inset 0 0 2px #ff5555;
-webkit-box-shadow: inset 0 0 2px rgb(27, 27, 27);
box-shadow: inset 0 0 2px rgb(46, 46, 46);
}Notice:
Code:
.percent_percent {
width:46%;Change the width to whatever percent you are at.
Notice:
Code:
<div class="float_right">46%</div>Again, change to whatever percentage you're at.
RE: HTML & CSS - Making a custom percentage bar - Mafia - 05-17-2013
Thanks for this, I love looking at code
RE: HTML & CSS - Making a custom percentage bar - Banadmin - 05-17-2013
(05-17-2013, 04:04 PM)Mafia Wrote: Thanks for this, I love looking at code
You should attempt to actually do it yourself. There's nothing better than seeing something work after successfully coding it yourself.
RE: HTML & CSS - Making a custom percentage bar - Combo - 05-18-2013
Looking good, thankyou for the share.