CSS Progress circle, change percentage - html

Question

I have found the following code, Link, it works perfectly but the problem is that I can only make the percentage 25, 50 or 75. If I want to make it 85% the circle fills up fully. Anyone any idea what I have to do? Maybe some JavaScript or JQuery that I have to add? Thanks!
Here is the HTML:
/* Import the Google Font 'Lato' */
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
/* Container styles */
body {
background-color: #fff;
color: #333;
font-family: 'Lato';
}
.container {
padding: 50px 0;
text-align: center;
}
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
text-align: center;
}
.chart figcaption {
padding: 50px 25px;
width: 100px;
height: 50px;
border: 20px solid #f0f0f0;
border-radius: 100px;
line-height: 50px;
}
.chart img {
position: absolute;
max-width: 100px;
max-height: 100px;
background: white;
}
/* END Container styles */
/* Colors for the circles and positions for the graphics */
.html {
top: 50px;
left: 45px;
}
.html + svg .outer {
stroke: #e34f26;
}
.css {
top: 55px;
left: 48px;
}
.css + svg .outer {
stroke: #0d84ce;
}
.javascript {
max-width: 90px;
max-height: 90px;
top: 45px;
left: 45px;
}
.javascript + svg .outer {
stroke: #f0e040;
}
.node {
width: 200px;
height: 200px;
top: 45px;
left: 45px;
}
.node + svg .outer {
stroke: #83cd29;
}
.chart svg {
position: absolute;
top: 0;
left: 0;
}
.outer {
fill: transparent;
stroke: #333;
stroke-width: 20;
stroke-dasharray: 534;
transition: stroke-dashoffset 1s;
-webkit-animation-play-state: running;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart:hover .outer {
stroke-dashoffset: 534 !important;
-webkit-animation-play-state: paused;
}
/* END Circle colors and graphic positions */
/* Set the initial values for the animation */
.chart[data-percent='100'] .outer {
stroke-dashoffset: 0;
-webkit-animation: show100 2s;
animation: show100 2s;
}
.chart[data-percent='75'] .outer {
stroke-dashoffset: 133;
-webkit-animation: show75 2s;
animation: show75 2s;
}
.chart[data-percent='50'] .outer {
stroke-dashoffset: 267;
-webkit-animation: show50 2s;
animation: show50 2s;
}
.chart[data-percent='25'] .outer {
stroke-dashoffset: 401;
-webkit-animation: show25 2s;
animation: show25 2s;
}
/* END set initial animation values */
/* Keyframes for the initial animation */
#-webkit-keyframes show100 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes show100 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 134;
}
}
#keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 124;
}
}
#-webkit-keyframes show50 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 267;
}
}
#keyframes show50 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 267;
}
}
#-webkit-keyframes show25 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 401;
}
}
#keyframes show25 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 401;
}
}
/* END Keyframes for the initial animation */
<section class="container">
<h3>I'm a web developer and here's what I can do</h3>
<!-- HTML Chart -->
<div class="chart" data-percent="85">
<figcaption>HTML</figcaption>
<img class="html" src="https://dl.dropboxusercontent.com/s/68gv23q4y5qyq52/html5.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</div>
<!-- CSS Chart -->
<figure class="chart" data-percent="75">
<figcaption>CSS</figcaption>
<img class="css" src="https://dl.dropboxusercontent.com/s/gftbpqje9h2jvlv/css3.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<!-- Javascript Chart -->
<figure class="chart" data-percent="50">
<figcaption>Javascript</figcaption>
<img class="javascript" src="https://dl.dropboxusercontent.com/s/jsp3rsberc4q650/javascript.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<!-- Node.js Chart -->
<figure class="chart" data-percent="25">
<figcaption>Node</figcaption>
<img class="node" src="https://dl.dropboxusercontent.com/s/v28zws1p38tjph2/node.png">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<p>Pure CSS and SVG animation</p>
</section>

Answer 1

Iy's not a script so it's not automatically fit to any percentage. In that pen, the author defined only those 4 percentage. Here I added 85% too. But if you want to do this dynamically, you need to use a script.
Take a look:
/* Import the Google Font 'Lato' */
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
/* Container styles */
body {
background-color: #fff;
color: #333;
font-family: 'Lato';
}
.container {
padding: 50px 0;
text-align: center;
}
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
text-align: center;
}
.chart figcaption {
padding: 50px 25px;
width: 100px;
height: 50px;
border: 20px solid #f0f0f0;
border-radius: 100px;
line-height: 50px;
}
.chart img {
position: absolute;
max-width: 100px;
max-height: 100px;
background: white;
}
/* END Container styles */
/* Colors for the circles and positions for the graphics */
.html {
top: 50px;
left: 45px;
}
.html + svg .outer {
stroke: #e34f26;
}
.css {
top: 55px;
left: 48px;
}
.css + svg .outer {
stroke: #0d84ce;
}
.javascript {
max-width: 90px;
max-height: 90px;
top: 45px;
left: 45px;
}
.javascript + svg .outer {
stroke: #f0e040;
}
.node {
width: 200px;
height: 200px;
top: 45px;
left: 45px;
}
.node + svg .outer {
stroke: #83cd29;
}
.chart svg {
position: absolute;
top: 0;
left: 0;
}
.outer {
fill: transparent;
stroke: #333;
stroke-width: 20;
stroke-dasharray: 534;
transition: stroke-dashoffset 1s;
-webkit-animation-play-state: running;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart:hover .outer {
stroke-dashoffset: 534 !important;
-webkit-animation-play-state: paused;
}
/* END Circle colors and graphic positions */
/* Set the initial values for the animation */
.chart[data-percent='100'] .outer {
stroke-dashoffset: 0;
-webkit-animation: show100 2s;
animation: show100 2s;
}
.chart[data-percent='85'] .outer {
stroke-dashoffset: 83;
-webkit-animation: show85 2s;
animation: show85 2s;
}
.chart[data-percent='75'] .outer {
stroke-dashoffset: 133;
-webkit-animation: show75 2s;
animation: show75 2s;
}
.chart[data-percent='50'] .outer {
stroke-dashoffset: 267;
-webkit-animation: show50 2s;
animation: show50 2s;
}
.chart[data-percent='25'] .outer {
stroke-dashoffset: 401;
-webkit-animation: show25 2s;
animation: show25 2s;
}
/* END set initial animation values */
/* Keyframes for the initial animation */
#-webkit-keyframes show100 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes show100 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes show85 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 83;
}
}
#keyframes show85 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 83;
}
}
#-webkit-keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 134;
}
}
#keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 124;
}
}
#-webkit-keyframes show50 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 267;
}
}
#keyframes show50 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 267;
}
}
#-webkit-keyframes show25 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 401;
}
}
#keyframes show25 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 401;
}
}
/* END Keyframes for the initial animation */
<section class="container">
<h3>I'm a web developer and here's what I can do</h3>
<!-- HTML Chart -->
<div class="chart" data-percent="85">
<figcaption>HTML</figcaption>
<img class="html" src="https://dl.dropboxusercontent.com/s/68gv23q4y5qyq52/html5.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</div>
<!-- CSS Chart -->
<figure class="chart" data-percent="75">
<figcaption>CSS</figcaption>
<img class="css" src="https://dl.dropboxusercontent.com/s/gftbpqje9h2jvlv/css3.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<!-- Javascript Chart -->
<figure class="chart" data-percent="50">
<figcaption>Javascript</figcaption>
<img class="javascript" src="https://dl.dropboxusercontent.com/s/jsp3rsberc4q650/javascript.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<!-- Node.js Chart -->
<figure class="chart" data-percent="25">
<figcaption>Node</figcaption>
<img class="node" src="https://dl.dropboxusercontent.com/s/v28zws1p38tjph2/node.png">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<p>Pure CSS and SVG animation</p>
</section>