<link href="//cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css" rel="stylesheet" id="bootstrap-css">
<script src=""></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<main>
<h3>Níveis de experiência - João Lourenço</h3>
<section>
<ul class="style-1">
<li>
<em>Pescaria - Nível 3</em>
<span>0 / 20</span>
</li>
<li>
<em>Plantação - Nível 10</em>
<span>956 / 1000</span>
</li>
<li>
<em>Colheita - Nível 5</em>
<span>131 / 200</span>
</li>
</ul>
</section>
</main>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
@-webkit-keyframes grow-width {
from {
width: 0;
}
}
@keyframes grow-width {
from {
width: 0;
}
}
body {
font-family: "Open Sans", Arial;
background: #EDEDED;
}
.container {
position: absolute;
bottom: 10%;
left: 5%;
}
main {
width: 400px;
padding: 2px 30px 0px;
background: #FFF;
ba
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
@keyframes grow-width {
from {
width: 0;
}
}
main body {
font-family: "Open Sans", Arial;
background: #ededed;
}
main .container {
position: absolute;
bottom: 10%;
left: 5%;
}
main main {
width: 400px;
padding: 2px 30px 0px;
background: #fff;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
main h1,
main h4 {
text-align: center;
color: #333;
}
main p {
font-size: 13px;
}
main section {
vertical-align: top;
margin-top: 20px;
}
main section:nth-of-type(odd) {
margin-right: 20px;
}
main .style-1 {
list-style-type: none;
padding: 0;
width: 350px;
}
main .style-1 li {
position: relative;
height: 50px;
}
main .style-1 li em,
main .style-1 li span {
display: block;
border-bottom: 5px solid #ffe5e5;
padding-bottom: 5px;
white-space: nowrap;
}
main .style-1 li em {
font-style: normal;
border-bottom-color: #db6b6b;
position: absolute;
overflow: visible;
-webkit-animation: grow-width 2s;
animation: grow-width 2s;
}
main .style-1 li span {
text-align: right;
}
main .style-2 {
list-style-type: none;
padding: 0;
width: 350px;
}
main .style-2 li {
height: 50px;
}
main .style-2 li em,
main .style-2 li span {
padding: 5px 10px;
}
main .style-2 li em {
text-align: right;
font-style: normal;
float: left;
width: 85px;
}
main .style-2 li span {
display: inline-block;
background: #ffe5e5;
overflow: visible;
-webkit-animation: grow-width 2s;
animation: grow-width 2s;
}
h1, h4 {
text-align: center;
color: #333;
}
p {
font-size: 13px;
}
section {
vertical-align: top;
margin-top: 20px;
}
section:nth-of-type(odd) {
margin-right: 20px;
}
.style-1 {
list-style-type: none;
padding: 0;
width: 350px;
}
.style-1 li {
position: relative;
height: 50px;
}
.style-1 li em, .style-1 li span {
display: block;
border-bottom: 5px solid #FFE5E5;
padding-bottom: 5px;
}
.style-1 li em {
font-style: normal;
border-bottom-color: #DB6B6B;
position: absolute;
overflow: visible;
-webkit-animation: grow-width 2s;
animation: grow-width 2s;
}
.style-1 li span {
text-align: right;
}
.style-2 {
list-style-type: none;
padding: 0;
width: 350px;
}
.style-2 li {
height: 50px;
}
.style-2 li em, .style-2 li span {
padding: 5px 10px;
}
.style-2 li em {
text-align: right;
font-style: normal;
float: left;
width: 85px;
}
.style-2 li span {
display: inline-block;
background: #FFE5E5;
overflow: visible;
-webkit-animation: grow-width 2s;
animation: grow-width 2s;
}
$(document).ready(function() {
function setBarWidth(dataElement, barElement, cssProperty, barPercent) {
var listData = [];
$(dataElement).each(function() {
listData.push($(this).html());
});
$(barElement).each(function(index) {
var dat = listData[index].split(' / ');
$(this).css(cssProperty, (dat[0] / dat[1]) * barPercent + "%");
});
}
setBarWidth(".style-1 span", ".style-1 em", "width", 100);
});
