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