The Semi Circle Preloader puts a bend into the typical progress bar. The bar arcs over the percentage text, with its reflection appearing below. A gradient backdrop is added to polish it all off. All graphics are vector and drawn in code. This preloader is 100% code-driven. There are several settings you can use to customize this preloader. You can try out many of these settings right now by clicking on the ‘settings’ bar in the demo above! The full list of settings is:
- bgColor – This is the base color used to create the background.
- barColor – The color of the progress bar
- outlineColor – The color of the progress bar’s outline/container
- txtColor – The color of the percentage text
- txtSize – The font size of the percentage text
- txtFont – This is the name of the font used for the percentage text. The font you specify here needs to be embedded in your project to show up properly. A text field is provided in the preloader where you can change the embedded font.
- showText - A true/false value that controls whether or not to show the percentage text
- showBackground – A true/false value that controls whether or not to show the background behind the preloader.
- fadeOutAtEnd – A true/false value that controls whether or not the preloader fades out when it’s finished before moving to Frame 2.
- showReflection – A true/false value that controls whether or not to show the reflection of the preloader and text
All of these settings are available on their own layer in the preloader’s MovieClip, making it quick and easy to customize the look of the preloader to suit your needs.
Implementing the Semi Circle Preloader is easy! Just drop it onto the first frame of your timeline, and start your project on frame 2. The preloader does the rest. Step-by-step instructions on how to use this preloader and how to customize it are included with you purchase. Thanks and enjoy!