This unique preloader shows fluid flowing through tubes to a main capsule that fills as your site loads in the background. Everything is 100% code-driven, so there are no graphics to include in your project!
The Capsule Preloader offers several settings for you to control how it will appear. Please use the “settings” bar found at the top of the demo above to try out some of these features. All color settings are given in hexadecimal. The full list of settings available with this preloader are:
- bgColor – This is the base color used to create the background and the capsule.
- liquidColor – This is the color of the liquid that fills the capsule.
- liquidColorHot – This is the color that appears ahead of the liquid color when the liquid fills the side tubes.
- percentTextColor – This is the color of the percentage text that appears at the bottom of the stage.
- showLiquidHot – This true/false value controls whether or not to show the “hot” colored liquid that appears ahead of the liquid color when the liquid is filling the side tubes.
- fadeOutAtEnd – A true/false value that controls whether or not the preloader fades out when it’s finished before moving to Frame 2.
- showBackground – A true/false value that controls whether or not to show the background behind the preloader.
Settings are controlled in their own layer of the preloader movieclip, making them easily accessible.
Implementing the Capsule Preloader is as simple as dragging its movieclip onto the timeline. Just place it on Frame 1 and start your project on Frame 2. The preloader does the rest!
The Capsule Preloader will listen for stage resizing and fullscreen events, and extends its side tubes to fill the entire width of the stage. There’s nothing to worry about when using this preloader – just drag and drop! Step-by-step instructions on how to use and customize this preloader are included with your purchase. Thanks and enjoy!