How to delay start animation?

[aha74]

Hi! First off, great plugin! I was wondering if you can help me with delaying the animation. For example, I would like the animation to start one or two seconds after the page loads. Thanks in advance.

[kottenator]

Hi, @aha74! I appreciate your words, thanks ;)

To delay the animation you could:

el.circleProgress({
  // any options, but value is 0 at the beginning
  value: 0
});

setTimeout(() => el.circleProgress('value', realValue), 2000);

In addition, you could wait until your circle appears in browser's viewport - see #8.

[aha74]

Thanks for the response. Sorry, but I'm a newb at this. Where would I put it in this code.

<script>
  var circle = $('#circle').circleProgress({
    value: 0.71,
    fill: {
      gradient: ['#002856', '#67b2e8']
    },
    size: 150
  });

  circle.resizable()
    .on('resizestop', function() {
      circle.circleProgress();
    });

  circle.on('circle-animation-progress', function(e, p, v) {
    var obj = $(this).data('circle-progress'),
      ctx = obj.ctx,
      s = obj.size,
      sv = (100 * v).toFixed(),
      fill = obj.arcFill;

    ctx.save();
    ctx.font = "bold " + s / 2.5 + "px sans-serif";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = fill;
    ctx.fillText(sv, s / 2, s / 2);
    ctx.restore();
  });
</script>

Also, how would I add an "%" at the end of the numbers, yet make it smaller then the number?
Sorry for all the questions.
Thanks in advance.

[kottenator]

Where would I put it in this code

In you HTML, below the library inclusion. Or in one of your JS files.

how would I add an "%" at the end of the numbers

Change sv = (100 * v).toFixed() to sv = (100 * v).toFixed() + '%'

yet make it smaller then the number

That would be pretty hard in this case. You can use another approach - render the text in HTML, not in canvas (just add some <div> which would contain the numbers, and position it absolutely over the circle).

[aha74]

Thanks for all the help. My apologies, but what I mean is, where in my current script, would I put the timer delay script you provided.

[kottenator]

Here's a snippet for you.

[aha74]

You are the man!!! Thank you!

[kottenator]

You're welcome ;) I'm closing this ticket.