Updated: 21/04/2016
By: Emanuele Manco
Profile: codecanyon
Thank you for purchasing my app. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Before doing anything you need to work on a webserver. Go to apachefriends.org and install XAMMP which will enable you a local development environment. Of course you can use any kind of Apache server. Once you've done copy the root inside the htdocs folder and access it from your browser to see it running. If you try accessing it locally it simply won't work properly.
Alternatively you can also download a copy of Brackets which has a built-in webserver that will kickstart your work in no time.
If you want to kickstart your work, just copy the css and js folder and you're ready to go. Arrange the DOM and initialize the script to see it in your page. The stylesheet is not mandatory, but reccomended.
Circular Preloader needs just a little bit of code in your DOM Structure. Take your time and organize your project by following this userguide. It will be easy once you understand how it works.
You can create any element you want. It just needs a class and a data-url attribute to get started.
<div class="element" data-url="img/01.jpg"></div>
The SVG elements and the loaded container itself will be wrapped inside of the element you just declared. Once the download has ended the SVG element will disappear from the DOM and free up memory inside the browser.
If you don't want to initialize the preload process through javascript, there is a handy flag that allows you to automatically start the loading process with no additional scripts. Just add the data-autoload attribute to your element to do so. There is also an example provided in the root of the app.
<div class="element" data-url="img/01.jpg" data-autoload></div>
Remember that you need to refer to the same classes when initalizing. Classes can be altered through the shared options.
The provided stylesheets are not mandatory. It's up to you if you want to use them or not. Though it is recommeded to use them to keep things in place like the percentage text, the image container and general alignment.
Of course you're free to customize it for your own needs and you can even rename the classes through the shared options. Include it in your header and you're set.
<link link rel="stylesheet" href="css/cp-styles.css">
You can also just import it into your main stylesheet.
@import url(css/cp-styles.css);
Keep sure that the classes declared in the options match the ones you're referring in the stylesheets. If you don't know what you're doing leave it as it is.
Once your DOM is ready and you have successfully included the stylesheet in your head you have to include the following javascript files before the end of the body:
<script src="//code.jquery.com/jquery-2.1.4.min.js"></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 src="js/snap.svg-min.js"></script> <script src="js/jquery.circularpreloader.min.js"></script>
You should at first include jQuery if you don't have already. The libraries require to run the Circular Preloader are Snapsvg, PreloadJS and TweenMax. The first draws the SVG Graphics, the second is responsible for the Preloading system and the last one is used for animation. Keep sure those are included before the Circular Preloader script.
Despite the minified versions of the scripts, you can still optimize the files further by gzipping them. You'll find an htaccess file in the root which is already compiled to enable your server to do so.
So, you arranged the DOM and included all needed files. Though the preloader sits there without doing anything, isn't it? Of course you need to initialize it! It's meant that way, to give you more control over the script. You can wake it up with the following Snippet.
(function ($) {
$(document).ready(function () {
$('.element').circularPreloader();
});
})(jQuery);
You can also call it inside your own app script as long it's called when the DOM is ready. Though even a dirty inline script tag will do the job if you want to.
There is a neat app.js included that shows you how to organize your stuff in the correct way. It's not needed to get it working though. Just use the script above and it will initialize. It's up to you.
If you don't need to pass any parameter to the function, consider using the autoload feature provided by the script. When your element has the data-autoload attribute it will automatically initialize without needing additional scripts.
There are over 30 options available for customizing Circular HTML5 Preloader. All you need to do is including them as parameter during the initialization. The following example shows how to push options inside the main function.
(function ($) {
$(document).ready(function () {
$('.element').circularPreloader({ // example with options + callbacks
drawMethod:"pie",
progressPadding:10,
transitionsEnabled:true
});
});
})(jQuery);
The default values of all options will be used whenever no parameter has been found. These parameters can be also pushed later through the options method.
You can push custom functions driven by these events.
$('.element').circularPreloader({ // example with options + callbacks
drawMethod:"pie",
progressPadding:10,
transitionsEnabled:true,
onUpdate: function(percent) { // onUpdate callback
console.log('loaded %: '+percent);
},
onComplete: function(obj) { // onComplete callback
TweenMax.fromTo($(obj), 1, {autoAlpha:0}, {autoAlpha:1});
},
onError: function(e) { // onError callback
console.log('error occurred: '+e);
}
});
Circular HTML5 Preloader comes with a few extra methods for your special needs which might come handy for your project with a little more control. The following methods are supported.
var c = $('.element').circularPreloader();
c.render(); // plots the preloader to the chosen percentage
c.update(); // refreshes all parameters inside the routine
c.options(); // allows to push new options values
Let's say you want to change options values after you initialized it. Here's how you can do it.
var c = $('.element').circularPreloader();
r.options({radius:50, progressPadding:15, loadedPadding:15});
r.update();
r.render(60);
Check out the provided render example in the root.
The following libraries were used:
Included photos courtesy of Envato Asset Library.
Want to update your project? Just overwrite both css and js folder and you're set!
Once again, thank you so much for purchasing this app. As I said at the beginning, I'd be glad to help you if you have any questions relating to this app. No guarantees, but I'll do my best to assist. If you have a more general question relating to the apps on Codecanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Sincerely, flashedge