I'm trying to use the % charts from this tutorial here: https://codepen.io/anon/pen/XERbXQ
<div class="graphsWrapper">
<section class="sect">
<div>
<div class="box-piesite">
<header>
<h1>Awwwards Pies</h1>
<p>Let's take a peak at them simple pie's</p>
</header>
<ul>
<li class="design">
<div class="piesite" id="pie_0" data-pie="2.04"></div>
</li>
<li class="usability">
<div class="piesite" id="pie_2" data-pie="5.00"></div>
</li>
<li class="creativity">
<div class="piesite" id="pie_1" data-pie="2.00"></div>
</li>
<li class="content">
<div class="piesite" id="pie_3" data-pie="6.43"></div>
</li>
</ul>
</div>
</div>
</section>
</div>
I can get it working without issue, the only thing is that I want the progress border to be much thinner but every css style I change to try to fix it does't affect it. I've googled searched it and maybe I've used the wrong terminology but I can't find any answers. Any help is much appreciated!
An Idea of what I'm trying to replicated is midway down this page:
What you need to ask is: what's causing the width of the circle. The obvious reaction would be border-width - but changing that just moves them about, so it's not that.
The next thing would be to take out parts of the css until you no longer get a hollow circle, then determine what causes that to create the circle border.
Giving:
.piesite:after {
content:'';
display:block;
position:absolute;
top:.05em;
left:.05em;
width:.9em;
height:.9em;
background:$color-lightgrey;
border-radius:0.5em;
z-index:1
}
Adjust the top: left: width: and height: accordingly and in relation to each other.
Updated codepen: https://codepen.io/anon/pen/JLNYyy