Effect of filling a line

Navigation
2

I need to make an effect like this on this site link

Wellwhereisitmarked?Iwouldliketoknowhowthiseffectworksandifthereisanypluginforit

Followmytestcode:

    .chart {

      margin: 0 auto;

      position: relative;

      width: 70px;

      height: 70px;

      text-align: center;

    }

    .chart canvas {

      position: absolute;

      top: 0;

      left: 0;

    }

    .percent {

      display: inline-block;

      line-height: 110px;

      z-index: 2;

    }

    .percent:after {

      content: '%';

      margin-left: 0.1em;

      font-size: .8em;

    }

    .angular {

      margin-top: 100px;

    }

    .angular .chart {

      margin-top: 0;

    }

    .chart span {

      margin-top: -19px;

      font-size: 18px;

      color: #2f2f2f;

      font-family: 'Roboto', 'sans-serif';

      font-weight: 700;

    }

    .percent:after {

      content: '%';

      margin-left: 0.1em;

      font-size: .8em;

      font-size: 18px;

      color: #2f2f2f;

      font-family: 'Roboto', 'sans-serif';

      font-weight: 700;

    }

    .chart sup {

      font-size: 18px;

      color: #2f2f2f;

      font-family: 'Roboto', 'sans-serif';

      font-weight: 700;

      top: 0px !important;

      left: 0px !important;

      margin-left: 1px;

    }

    .textP h3 {

      margin-top: 22px;

      text-align: center;

      font-size: 20px;

      color: #2f2f2f;

      font-family: 'Roboto', 'sans-serif';

      font-weight: 300;

    }

    .textP p {

      line-height: 23px;

      margin-top: 13px;

      text-align: center;

      font-size: 13px;

      color: #2f2f2f;

      font-family: 'Roboto', 'sans-serif';

      font-weight: 300;

    }

    .bar {

      margin-top: 32px;

    }
<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <div class="chart" data-percent="64">
    <span class="percent"></span>
  </div>
</body>

<script type="text/javascript">
  $('.chart').easyPieChart({
    animate: 1000,
    lineWidth: 3,
    barColor: '#2f2f2f',
    trackColor: '#dcdcdc',
    lineCap: false,
    lineWidth: '2',
    size: '72',
    scaleColor: false,
    scaleColor: false,
    animate: 2000,
    onStep: function(from, to, percent) {
      $(this.el).find('.percent').text(Math.round(percent));
    }
  });
</script>

</html>
    
asked by anonymous 20.05.2015 / 19:07

3 answers

2

Looking at the source, more precisely the myscript.js file you can see that the Easy Pie Chart plugin is used. a>, which is called on top of .chart elements through the following script: 

$(this).find('.chart').easyPieChart({
  animate: 1000,
  lineWidth: 3,
  barColor:'#2f2f2f',
  trackColor:'#dcdcdc',
  lineCap:false,
  lineWidth:'2',
  size:'72',
  scaleColor:false,
  scaleColor:false,
  animate: 2000,
  onStep: function (from, to, percent) {
    $(this.el).find('.percent').text(Math.round(percent));
  }
});

Here a demo of how it is done on the site in question.

    
20.05.2015 / 19:24
2

The Easy pie chart plugin provides the same effect as the displayed site

Download link: Download

Example of using Easy pie chart: 

$(function() {
    //Cria um instancia
    $('.chart').easyPieChart({
        animate: 2000
    });
    //Atualiza a instancia apos 5 segundos
    setTimeout(function() {
        $('.chart').data('easyPieChart').update(40);
    }, 5000);
});

The Highcharts plugin also provides this effect on Piechart

Download link: Download

Documentation Link: Documentation

    
20.05.2015 / 19:12
2

You can implement directly using JS and SVG: 

$('#percent').on('change', function(){
  var val = parseInt($(this).val());
  var $circle = $('#svg #bar');
  
  if (isNaN(val)) {
   val = 100; 
  }
  else{
    var r = $circle.attr('r');
    var c = Math.PI*(r*2);
   
    if (val < 0) { val = 0;}
    if (val > 100) { val = 100;}
    
    var pct = ((100-val)/100)*c;
    
    $circle.css({ strokeDashoffset: pct});
    
    $('#cont').attr('data-pct',val);
  }
});
#svg circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
  stroke: #eee;
  stroke-width: 1em;
}
#svg #bar {
  stroke: #FF9F1E;
}
#cont {
  display: block;
  height: 200px;
  width: 200px;
  margin: 2em auto;
  box-shadow: 0 0 1em #ccc;
  border-radius: 100%;
  position: relative;
}
#cont:after {
  position: absolute;
  display: block;
  height: 160px;
  width: 160px;
  left: 50%;
  top: 50%;
  box-shadow: inset 0 0 1em #ccc;
  content: attr(data-pct)"%";
  margin-top: -80px;
  margin-left: -80px;
  border-radius: 100%;
  line-height: 160px;
  font-size: 2em;
}

input {
  color: #000;
}


/* Make things perty */
html {  height: 100%;}
body { font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; color: #000; height: 100%; padding-top: 2em; text-align: center;}
h2 { font-weight: 300}
input { border: 1px solid #666; padding: 0.5em; box-shadow: none; outline: none !important; margin: 1em  auto; text-align: center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h2>BarradeprogressoemSGV</h2><divid="cont" data-pct="100">
<svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
  <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
</svg>
</div>
<label for="percent">Percentual (0-100)</label>
<input id="percent" name="percent">

Font .

    
20.05.2015 / 19:32
How to use PDO bindParam in the IN () of the query? [duplicate] Where hair select