andreabaccolini / preloader-with-circular-progress-bar

Customizable preloader with circular progress bar developed using js and css. Displays graphical and percentage page loading progress. DEMO:

Page preloader

Hi, everyone!

In this rep you can find everything you need to add beautiful preloader to your web page. This is customizable preloader with circular progress bar developed using vanilla js(ES6). Displays graphical and percentage page loading progress. To view follow the link: https://1ucius.github.io/preloader-with-circular-progress-bar/

To start using this preloader just link preloader.js and preloader.css files to your main html file. If you wanna change it's styles and animation duration you gotta change following values in "settings" in preloader.js:

1. preloaderBackground - background color;
2. progressSize - height and width of progress bar;
3. progressColor - progress bar fill color;
4. progressOpacity - progress bar opacity;
5. textColor - percentage indicator text color;
6. textOpacity - percentage indicator opacity;
7. lineWidth - progress bar line width;
8. lineCap - style of ending of the line('round', 'butt', 'square');
9. preloaderAnimationDuration- ... :)

IMPORTANT !!!Difference between values "startDegree" and "finalDegree" should be less or 360 degrees and bigger or -360 degrees for correct display of loading progress!!!

10. startDegree - angle in degrees where progress bar starts;
11. finalDegree - angle in degrees where progress bar ends;

Good luck on the expanse of GitHub and sorry for my English:)