Code

Discussion on Circular HTML5 Preloader

Discussion on Circular HTML5 Preloader

Cart 164 sales

flashedge supports this item

Supported

26 comments found.

Hi,

Got this error in the console: Uncaught TypeError: Cannot read property ‘progress’ of null.

It’s about this line of code: if (options.autoDestroy && preload.progress == 1) { options.transitionsEnabled ? setTimeout(destroy, 2000) : destroy(); }

This is my code: $(’.preloader’).circularPreloader({ debugMode: false, queue: [ “assets/images/SSWebAnimatie-1.jpg”, // more images ] });

Can you reproduce this error, or am I doing something wrong?

I suppose it gets stuck when the garbage collection happens. But it’s kind of strange unless your file is corrupted or the url is wrong. You can see a queue example in the download folder which works just fine: http://apps.flashedge.net/circular/queue.html

If you wish I can inspect your work to troubleshoot it.

Thank you, I will have a further look at the example, and compare it with my code to see what’s different. If I don;t succeed I will let you know. Thank your for the quick reply and the awesome code :)

I want to use this on a site that pulls images from other sites. However, I use:

onerror=”this.style.display=none”

in the image tag, so that if the image has trouble or times out getting pulled, it hides the dead image.

Will your preloader work with this and still hide the errored out image tag? I don’t want my page to continue showing preloaders for all the unpullable images.

I’m very interested in purchasing if it works correctly with the onerror code.

Thanks.

There are onUpdate and onComplete callbacks. Whenever there is an error a strikethrough appears above the preloader.

Anyway your feedback is useful and I’ll consider to include the onError callback in the next update. This way you will be able to include your own function whenever a preload fails.

Added onError callback in the new update. Enjoy! ;)

Looks slick – good luck with sales :)

Thanks! :)

Hi,

I just purchased the circular pack. I want to use the circle/donut chart not as preloader but as a chart. How do i make it just animate and show my desired number? (for example, I want the donut to animate to 76%).

thanks.

to clarify, i want animation to begin at 0

There is a handy render function for that. You’ll find an example in the root named render.html which is not animated out of the box, you’re free to use whatever tweening technique you want.
var r = $('.render').circularPreloader({ // render example, with no preload
            radius:30,
            loadedPadding:5,
            loadedAlpha:0.15,
            progressPadding:4,
            glowSize:2,
            glowEnabled:true,
            percentageEnabled:true
        });

        r.render(86);

Here’s an example using Greensock:

var o = {value:0},    // start value
              val = 75;         // end value

          TweenMax.to(o, 1, {value:val, ease: Cubic.easeinout, overwrite:1, onUpdate:function(){r.render(o.value); }});

Just append this snippet to the render example and you’re set.

It’s excellent, great sales and good luck to you too, of course.

Thanks for your kind comment. :)

Can this script package be used to preload an entire webpage, and prevent any part of the webpage from being displayed until all of the assets (css files, js files, and image files) have been loaded into the document?

Yes, there is a queue function which does just that. You can preload all supported files and add them to the DOM only after it has been cached. You’ll get examples with the download file showcasing how it’s done.

Additionally there are also callback functions which enable you to create your own behavior or even concatenate preloading phases for your project.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey