Step By Step
There are four different widget option panels. Each panel controls specific functionalities. See the sections below, and click on each one to see the related documentation.
There are seven placement options for where the preloader can appear in the browser
You can change the opacity of the loading bar's background. Numbers closer to 0 are less opaque, and numbers closer to 1 are more opaque.
The color of the loading bar's background can be easily changed by opening the dropdown and selecting a swatch or picking a color.
You can insert custom Sign Text and adjust the text size, opacity, and text color of the percentage sign with the tools in the option panel.
If you are looking to style the typeface, size, color, or alignment of the percentage number you can do so through the Text panel (window > text, or ⌘T).
Do not move the percentage and loading bar outside of the container.
In case you do not want the Loading bar or the percentage sign, you can simply remove them, but note that moving them outside of the container will cause a notification on the page, telling you that they need to be either moved back in the container or deleted.
The Advanced Preloader comes included with four customizable animations that you can change the color and size of:
To customize any of the animations simply click on it, open the option panel, and change the size and color to your liking.
Note: You can not use more than one of the preset animations in the same preloader.
You can place any graphic inside the preloader container: JPG, PNG, GIF animation, AOM Edge Animate files, SWF Flash animations…basically any file as long as it can be imported into Muse.
Yes. Simply select the container, click 'Fill', and 'Image: add image'.
Yes, as long as the animation file can be imported into Muse and played when the page is previewed. Just place your animation into the preloader container.
Make sure that you’re not using more than one of the preset animations. Also check to see if you put a valid number for the size (3-10).
Everything that you want to be in the preloader must be completely within the preloader’s container. Make sure it's not sticking partially outside of the container.
Yes, it will work for all screen sizes. You can turn on the responsive option and use pinning on each object nested inside the preloader container. However, you can't hide things within the widget container for each breakpoint separately.
Get It Here