Code

Discussion on Circular HTML5 Preloader

Discussion on Circular HTML5 Preloader

Cart 161 sales

flashedge supports this item

Supported

24 comments found.

uniqfox

uniqfox Purchased

hey is there a way to:

A. make the preloader work for the entire page? B. just have it autoload with a specific class

uniqfox

uniqfox Purchased

hey nice plugin, good work. just wondering how would I be able to make a preloader for the entire page on my landing page? thanks

Hello, I’ve just purchased the preloaders item but i cannot see any preloaders in my index.html downloaded files.

Are you running it on a webserver? It might be blocked if you run it directly in the browser. I advise trying local webservers like MAMP.

hello to flashhedge

I bought the circular preloader today and the intallation semms very easily. But I recognized a conflict between some existing js-files. Please have a look at the following scripts, placed before the body-tag ends. Do you have an idea to solve the problem? I would appreciate your support. Thank you in advance. Best – Max

The js-scripts are as followed:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/jquery.zoomslider.min.js"></script>
<script src="js/vanilla-form.js" type="text/javascript"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4j8KDliU1I2Th6yKjEv5LGWVXZTTBjeg&callback=initMap"></script>
  <script src="//code.createjs.com/preloadjs-0.6.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script type="text/javascript" src="js/snap.svg-min.js"></script>
<script type="text/javascript" src="js/jquery.circularpreloader.min.js"></script>

The script is self-contained and doesn’t affect anything outside it unless you have similar selectors overlapping. Feel free to share your link and I’ll inspect the issue as soon I can.

Hello, I have a WordPress site. Does this product work there?

Yes, it just needs some dev work on it.

Purchase code: c2b67361-96e9-428a-ad86-356ed346565b

I bought your product but I can not make it work. Could you help me how to install it?

Sorry for the late reply. What’s the issue? It might be wise to send me a private message with a detailed report. Thank you.

I dud, how are you.

I’m from brazil, and I’m having difficulties to make the preload work. Does it work to load my entire page?

Hi, sorry fo the late reply. I was on holidays. Did you manage to fix the issue? Feel free to contact me privately.

Dear flashedge!

I’ve purchased your script but it does not work with parameters for me… It works only with data-autoload mode. I’d like to have the circle in blue color. http://websoluutions.hu/gallery2/galeria-walk-in.html

Can you help me please?

I got a 404 error when I tried to inspect your page. Feel free to send me a private inquiry for your issue.

What are the greensock plugins included?..By the way, amazing work.

None. It’s loaded through CDN to keep the footprint small.

Hi,

I just bought your amazing circular HTML5 Preloader. I would like to preload the entire webpage, and prevent any part of the webpage from being displayed until all elements have been loaded. I have followed your guide I used “Queue” but I cannot get to work. It sticks to the top of the page.

The test site is: http://www.sandvall.dk/index-test.html

Please advise; ATB Morten

I see that’s just a styling issue. You might put the preload container at the end of the DOM right before the closing body tag. Add some styling to it to overlay your website, using absolute position and centering it.

A common mistake is to keep the image references in the DOM and declare the same paths in the preloader queue. You’re loading the same assets twice this way inside the browser! So, you should remove any reference in the DOM and restore them later in the onComplete event. The same event should be used to do any animation like fading out the preloader and showing the actual content.

If you’re still having issues feel free to contact me privately. :)

dones not work for full page

I’m usually very open to my clients when it comes to troubleshoot issues. You just asked for a refund in a couple of hours, which I approved a few minutes ago. Have a nice day, sir.

I’ve had no luck with other “entire webpage” preloaders responding to the script below. For some reason the files that howlerjs references do not load, while all other filetypes do. Will your queue function solve this issue?

var allSounds = new Howl({ src: [‘audio/my_audio.mp3’],

I have no clue about howler, but I guess you’re not passing the paths but some object that is not recognized.

I just purchased and went to open the file and noting loaded. Looks like i’m getting a bunch of jQuery undefined errors? Am I missing something? I haven’t changed anything.

You need to run the script on a webserver and keep sure jQuery is available.

whoops.. thanks :0)

Hi, I’m trying to preload part of the content of a website via the “queue” method with the code provided in the sample file.

The problem I get is that the animation disappears after a few moments while the content is still loading.

I can tell when the loading is complete because I’ve set a function “onComplete” that reveals a set of buttons.

Here’s the website if you want to have a look. www.olivierofiori.it/newsmaker/

Thank you!

I see. Try setting transitionEnabled to false and hide the loader in the onComplete event like you’re already doing right now by setting the display to none on the cp-wrapper. Otherwise avoid hiding the wrapper in the onComplete event and keep the transitionEnabled to false.

Using both will overlap two actions resulting in unwanted behavior. The tweening lags slightly behind the real progress value, which will result in premature transitions.

I’m committing also an update that allows no tweening with just a simple render of the actual loading progress. Some people might prefer it.

You can view how it has been used on this site, just for reference: http://loveweek-citv.it/

Thank you! Now it works fine.

Am i the only one who tried the demo but it doesn’t work for? The circle next to the title spins pretty weirdly and in the demo part none of the demos work. First 0%, then Nan%, some second later the photo of the girl appears. Tried on Safari and Firefox (newest version, Mac) + on iPhone Safari – the same result on all devices.

It is my intention to isolate the cause of this glitch and I’ll need your help, since I cannot reproduce it myself. Neither can the people I asked to test it.

Does this page render well for you? http://apps.flashedge.net/circular/render.html It should show just a static circle at 86% with no tweening. If this shows up fine then I can exclude snap.svg.

The other library is preload.js which you can test here: http://www.createjs.com/demos/preloadjs/preloadqueue Can you load the whole queue without issues?

Then the last one is Greensock which is used as ticker for animation. I really trust this one, so I can exclude it from the possible causes. Anyway you can browse the demos on http://greensock.com

I really appreciate your help. We should maybe continue this discussion privately as it might take some time to troubleshoot.

Do you use skype? If so, let me know your ID, so we can continue discussing there!

Sure. My contact is: e.manco

Hi Author, Almost every other time I load my page, I get several hundred “Uncaught TypeError: e.match is not a function” errors with a ‘NaN’ percentage in my loader. It loads perfectly some times and then the next it freaks out like this. Do you have an idea of why?

Thanks

Nothing to worry about. It’s the progress arc that freaks out whenever there is no value to render and just throws error in the console. I already addressed this issue and will include the fix in the next update so you won’t be bothered in the log.

I’m trying to preload my entire website: sonofabeast.com, do the images need to be numbered 01.jpg etc? I’m having trouble getting it to work,am I missing external files?

You can name the files as you wish and feed them in the queue. Check out the provided example. Remember that the preloader will load the files even if you’re having them already in your DOM. So you should ideally add them in the DOM after the loading is done.

Hi,

I just bought the preloader but maybe it’s not what I was looking for. I tried to install it without success and so I read that it’s a preloader for images but I need of a preloaded for the page. Do you think I can use your instead of this one on my website? www.gianlucacecere.it Thank you for your help

You can preload all file assets of your website, including images, audio, video, js, css and more through a queue and trigger custom functions with the oncomplete callback. You’ll find an example in the root which looks like this: http://apps.flashedge.net/circular/queue.html

So, you might hide the website container and show it once you’ve preloaded the needed files.

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! ;)

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