Line Container Preloader

The Line Container Preloader is a fixed-width progress bar that sits inside of a high-polish container. The dimensions of the bar and container are controlled by you, along with several settings that allow you to customize the preloader to suit your needs. This preloader is 100% code-driven. You can try out several of the 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.
• containerColor – The base color of the container
• barColor – The color of the progress bar
• barLeadColor – The color of the gradient tip of the bar
• barWidth – The width of the bar (in pixels)
• barHeight – The height of the bar (in pixels)
• 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.
• txtColor – The color of the percentage text
• txtSize – The font size of the percentage text
• containerCornerRadius – The radius of the circle used to round the corners of the container. The larger the number, the more rounded the container’s corners will be.
• glowColor – The color of the glow used on the container
• glowAlpha – The alpha/opacity of the glow
• glowBlur – The amount of blurring applied to the glow (in pixels)
• showLead – A true/false value that controls whether or not to show the gradient tip of the progress bar
• 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 container’s reflection

These settings are located on their own layer within the preloader’s movieclip, making it quick and easy to change the look of this preloader. Implementing the Line Container Preloader is as simple as dragging and dropping its MovieClip onto the first frame of the timeline, then starting your project on Frame 2. The preloader does the rest!

All of the graphics in this preloader are vector and drawn by code, so there are no images you have to include. Just one movieclip and the job is done! Step-by-step instructions on how to use and customize this preloader are included with your purchase. Thank you and enjoy!

More Modulus Products

Galleries

Utilities

Preloaders