Effect of filling in a line

Asked

Viewed 178 times

2

I need to do an effect like this on this site http://www.gt3themes.com/website-templates/timber/

inserir a descrição da imagem aqui

well where this marked would like to know how does this effect and if you have any plugin for it

follow my test code:

    .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>

javascript html5 css3

3 answers

2

The Easy pie Chart Plugin provides the same effect as the website presented

Link to download: Download

Example of use of 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

Link to download: Download

Link to Documentation: Documentation

  • friend so only have maps here and Graphics found nothing referring to what I mentioned

  • @Kirito Look at the first link, I put the precisely the plugin that makes the effect of the piechart of the site present in the question and the way to call it, the Second link provides Harts pie also however of effect and appearance different.

2


Looking at the source, more precisely the file myscript.js it is possible to see that the plugin is used Easy Pie Chart, which is called upon the elements .chart by means of 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.

  • I will test just one hint the script I put at the end of my code or header

  • If it’s in the header you have to put in $(document).ready, if it is at the end, ok as long as it is after the html that you will handle. I recommend in the header in the event ready.

  • friend does not work because I will edit my post and I will put my test code

  • edited I put my code a little peek see if you find the error

  • Cade your scripts, buddy? Have to add jQuery and the plugin. Take a look at Fiddle there.

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>Barra de progresso em SGV</h2>

<div id="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">

Source.

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.