Advanced Preloader

 v.1.0

FAQ

Overview

Widget Options

Placement

Loading Bar

Percentage Indicator

Animations

Step By Step

ADVANCED

PRELOADER

ADOBE MUSE WIDGET

OVERVIEW

Muse Advanced Preloader is a widget that allows you to create a fully customizable and breakpoint friendly preloader. Simply drag & drop text boxes, images, buttons, or other objects into the preloader container.

 

The customization options are endless.

  • Place any graphic or object inside the preloader container.
  • Widget comes with four customizable animations.
  • Use any image or color as the preloader background.

WIDGET OPTIONS

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.

PLACEMENT

LOADING BAR

PERCENTAGE INDICATOR

ANIMATIONS

 

 

 

 

 

WIDGET OPTION

PLACEMENT

There are seven placement options for where the preloader can appear in the browser

 

  1. Center
  2. Center Left
  3. Center Right
  4. Top Left
  5. Top Right
  6. Bottom Left
  7. Bottom Right

 

 

 

 

 

 

WIDGET OPTION

LOADING BAR

 

 

 

1. Bar Background Opacity

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.

 

 

 

2. Bar Background Color

The color of the loading bar's background can be easily changed by opening the dropdown and selecting a swatch or picking a color.

 

 

 

 

 

WIDGET OPTION

PERCENTAGE INDICATOR

 

 

 

1. Percentage Sign

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.

 

 

 

2. Percentage Number

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).

 

 

 

 

 

WIDGET OPTION

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.

 

ANIMATIONS

The Advanced Preloader comes included with four customizable animations that you can change the color and size of:

 

  1. Boo
  2. Qoo
  3. Vee
  4. Zoo

 

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.

Step by Step

  1. Drag Advanced Preloader onto canvas.
  2. Open the Main widget options and set your desired placement for where you want the preloader to appear on the screen.
  3. Place any of the Advanced Preloader animations into the container and, if desired, customize the size and color(s).
  4. Customize the size and color of the loading bar and percentage indicator by clicking on it and opening the options.
  5. Feel free to change the fill color of the container, add a background image, add text, place any graphics, etc. The options are endless.

frequently asked questions

 

Widget Options

FAQ
  • Place any graphic or object inside the preloader container.
  • Widget comes with four customizable animations.