General

Hide On

Determines when the loader will hide. Can be set to hide when the page loads, or it can be set to hide after a set time duration (milliseconds)

Position

Fixed / Inline

When set to Fixed the loader will fill the entire screen.

When set to Inline, the loader will remain in its place on the page, and a stacks container will appear. Inside of the stacks container, you can place specific content inside. The loader will then cover this content until the page loads

You will also see an initial height option appear when setting the loader to INLINE. This initial height option can be used to set a specific height while the content is loading, and then after the loader is finished, the content will expand to it's full height. This can be good for long peices of content.

Background

You can choose between 4 background options

None
Color
Gradient
Image

Padding

This is the general padding around the edge of the loader

Opacity

This option controls the background opacity of the loader

Loader Text

Show Loader Text

Text can optionally be displayed with the loader if wanted. Simply check this option and you will see a few more settings appear for adjusting the text. For some loaders, specific text placement may be required, and you will see those option in the settings for that specific loader.

Loading Text

This is the actual text content that will appear with the loader when the show text option is checked

Font Family

Here you can choose from a list of basic fonts for the text

Color

Choose the color of the loading text here

1

Android Material Loader

Size

This setting controls the thickness of the loading bar

Max Width

This setting controls with maximum length of the loading bar

Color 1, Color 2, Color 3

These are the 3 colors that will cycle through while loading. The 3rd color is the base/start color for the loader

2

Folding Square

Size

This setting controls the width/height of the square. The sizes are always proportional.

Color 1, Color 2, Color 3

The square will cycle through these 3 colors. Note the the CENTER color (color 2) will appear twice.

3

Racing Inner Circle

Outer Circle Size

Controls the width/height of the outer circle

Outer Color

Controls the color of the outer circle

Inner Circle Size

Controls the width/height of the inner circle

Inner Circle Offset

The spacing between the edge of the outer circle and the inner circle

Inner Color

Controls the color of the inner circle

4

Growing Shrinking Vertical Bars

Bar Width

Controls the width of each individual bar

Bar Height

Controls the height of each individual bar

Bar Spacing

Controls the horizontal space between each vertical bar

Bar Radius

Controls the radius of each bar. Can be used for making them round or squared.

Text Position

When the "loader text" is set to "show", this option will allow you to choose whether the text is on the bottom or top of this loader.

Text Offset

This option will control how much vertical space is between the loader text if the loader text is set to be displayed.

Bar Color 1, 2, 3, 4

There are 4 bars for this loader, and the color of each bar can bet set individually.

5

Pulsating Circle Square

Circle Size

Controls the width/height of loader

Border Size

Controls the thickness of the cicle border

Border Radius

Controls the roundness of the loader. Can be used to make it a square or a circle. For perfect circles, set the radius to be the same as the "circle size" option.

Border Color

Controls the color of the circle

6

Flowing Circles / Squares

Bar Size

Controls the width/height of each square/circle

Border Radius

Controls the roundness of each sqaure/circle.

Bar Color

Controls the color of each sqaure/circle in the loader.

7

Expanding Load Bar

Bar Size

Controls the thickness of the loading bar

Max Width

Controls the maximum length of the bar

Bar Color 1

Controls the color of the background bar

Bar Color 2

Controls the inner moving bar

8

Striped Loader

Max Width

Controls the maximum length of the bar

Text Position

When the "loader text" is set to "show", this option will allow you to choose whether the text is on the bottom or top of this loader.

Text Offset

This option will control how much vertical space is between the loader text if the loader text is set to be displayed.

Bar Color

Controls the background color of the bar

Stripe Color

Controls the stripe color and the border color of the bar

9