lazyload or waypoint kind of waiting time

[nmvivek]

how can i animate circle while scrolling down to page ? my page is quite long and this plugin come just above the footer, but it animate, when page loads and when scroll down, can not see the circle progress effect ?

[kottenator]

You may use lazy init via jquery.appear plugin. Something like next:

var el = $('.circle'),
    inited = false;

el.appear({ force_process: true });

el.on('appear', function() {
  if (!inited) {
    el.circleProgress({ value: 0.7 });
    inited = true;
  }
});

[kottenator]

@Khabir-Ahamed: sorry but I don't understand - doesn't the example work for you?

[kottenator]

Did you try to use my example above?????!!! (with jquery.appear)

[kottenator]

That's exactly what you need: it doesn't start the circle animation until the circle appears in the viewport

[longhoang2984]

Hello! I want to show near the end progress value how can I do!
Many thanks!

[coreatgit]

@kottenator
can we trigger the animation on a button click also update the startAngle of the animation from a preset variable before it begins..??

[kottenator]

@longhoang2984 - see the #52 ticket

[kottenator]

@coreatgit - yes, we can do that.

To trigger animation on a button click:

var el = $('#circle-container'),
    btn = $('#trigger-button'),
    val = 0.7;  // get it from somewhere, somehow

// Option 1: pre-render an empty circle
circle.circleProgress({ value: 0 });
btn.click(function() {
  circle.circleProgress({ value: val });
});

// Option 2: render on click
btn.click(function() {
  circle.circleProgress({ value: val });
});

[kottenator]

@longhoang2984, @coreatgit - sorry for delayed answer. I've lost your comments because you had posted them in a closed ticket.

If you want to get the answer faster next time - please, reopen a ticket or create a new one ;)

[mrshoaib]

Hi kottenotor i cant understand how can i used it please help me.................

[Yoomin233]

Great plug-in, awesome!!Just a complimentary comment!

[kottenator]

@YueminHu - thanks! ;)

[kottenator]

Hi!

All you need to do is:

• include jquery.js into your HTML
• then include jquery.appear.js (download from here
  https://github.com/morr/jquery.appear)
• then run the code snippet from my comment
  lazyload or waypoint kind of waiting time #8 (comment)

It should work.

On Sun, Jun 5, 2016 at 6:08 AM Alex notifications@github.com wrote:

var el = $('.circle'),
inited = false;

el.appear({ force_process: true });

el.on('appear', function() {
if (!inited) {
el.circleProgress({ value: 0.7 });
inited = true;
}
});

how can i do this in Jquery? help plz)

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
#8 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AAWr2rKwtsrHQMgHpCw1GGuCJ2_3Zwihks5qIqAbgaJpZM4DDkO5
.

With regards,
Rostyslav

[devatiq]

Hi!

When we have more than one circle progress how we can use this? Changing .circle selector like .circle.second doesn't work. Any idea?

var el = $('.circle'),
    inited = false;

el.appear({ force_process: true });

el.on('appear', function() {
  if (!inited) {
    el.circleProgress({ value: 0.7 });
    inited = true;
  }
});

[kottenator]

Instead of inited global variable use $(this).data('inited', true).

[devatiq]

sorry, this not works, i'm new onto this, any full code would be much helpful. Thank you.

[Jiroscopes]

how to use with multiple on the same page? you cant just change selectors as said above, and changing inited didn't work for me...

[kottenator]

@atiqbd - try this:

<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>

.circle {
  margin-bottom: 1000px;
}

var circles = $('.circle');

circles.appear({ force_process: true });

circles.on('appear', function() {
  var circle = $(this);
  if (!circle.data('inited')) {
    circle.circleProgress({ value: 0.7 });
    circle.data('inited', true);
  }
});

Here is a demo example for you.

[amichel86]

Thanks @kottenator for this awesome plugin and the solution, you're a god! 🗡

[kottenator]

Thank you, @amichel86!

I really appreciate when people like my creation and when they're saying good words to me :) That's the best and the only reward I get for my effort here.

[amichel86]

@kottenator I don't mind paying you a beer, what's your PayPal? haha

[kottenator]

Don't think I told that to get a beer :) I really appreciate your words, that's all.

(but my e-mail is in the source code, it's for PayPal too).

[joloveridge]

Great plugin and solution, loving it so far! Is there an easy solution to having multiple circles on one page each with different values that animate when you scroll them?

[Jiroscopes]

@joeyre you can just make a div for each one and call it a different name. This is what I did.

        $('.progress-bar').gradientProgressBar({
          value: 0.95
        });
        //end progress-bar 1
        $('.progress-bar-2').gradientProgressBar({
          value: 0.90
        });
        //end progress-bar-2

[joloveridge]

@Jiroscopes ahh perfect thank you!

[nataliakielbicka]

Is it possible to use appear.js with circleProgress plugin without setting any value?

We have:

el.circleProgress({ value: 0.7 });

But I want to use it in WordPress and my HTML is:

<div class="circle" data-value="0.94">
  <span>94%</span>
</div>

[kottenator]

@nataliakielbicka - this issue seems to be the most popular in my project :)

See this demo - it uses Waypoints but you can easily convert it to jquery.appear.

The idea is:

• render circle(s) with 0 value at page load;
• then on appearance - set the correct circle value.

This can be done in various ways.

[amichel86]

@nataliakielbicka here's a complete example that I used on one of my recent project. I use a data-value on the circle's div to set the percentage dynamically.

<div class="circle__progress" data-value="0.8"><span>1.2G</span></div>

$('.circle__progress').circleProgress({
  value: 0,
  size: 140,
  startAngle: 4.7,
  emptyFill: "#202020",
  fill: {
    gradient: ["#fe6b26", "#cd571e"]
  }
});	

var circles = $('.circle__progress');

circles.appear({ force_process: true });

circles.on('appear', function() {
  var circle = $(this);
  if (!circle.data('inited')) {
    circle.circleProgress({ 
      value: $(this).data('value'),
    });
    circle.data('inited', true);
  }
});