DTH DTH - 1 month ago 18
HTML Question

CSS Progress circle, change percentage

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

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>

Comments