Background

Basic Options

Click on the Background section, then you can set the styles of the pre-loader’s background.

  • Fill Type – Solid/Background Image/No Color. If choose No Color, then the background will be invisible, and the options below will be disabled. If choose Solid or Background Image, then you can continue to change the background’s style.
  • Background Color – Click to choose a color from the color picker. Or enter the hex value of a color you like.
  • Opacity – Drag to tweak the background opacity. So visitors can see through the content behind the pre-loader.
  • Ending Animation – There are 11 animations. Choose one and hover your cursor onto the preview area to see the result.
    • Fade
    • Slide Left & Right
    • Slide to Left
    • Slide to Right
    • Slide Up
    • Slide Up & Down
    • Shrink & Fade
    • Split & Reveal Vertically
    • Split & Reveal Horizontally
    • Split Diagonally – Vertically
    • Split Diagonally – Horizontally

Gradient Background

We added support for gradient background since version 1.0.3. Just click to Enable Gradient, then pick a Start Color and an End Color, and drag to change the gradient Angle.

Currently we only support linear gradient between 2 colors.

Background Image

We added support for background image since version 1.0.7. Upload an image and choose to
repeat it or not:

  • No Repeat – Use it as a full background image
  • Tile – Use it as a repeating pattern

You are able to choose a background color if you are using a transparent (e.g. .png file) background image, and select an ending animation, adjust the opacity.

Split Diagonally Ending Animations

Since version 1.1.5, we added 2 new ending animations:

  • Split Diagonally – Vertically
  • Split Diagonally – Horizontally

Please Note: These 2 new ending animations are more like experimental effects – we created them with CSS “clip-path” property, and this property is not supported by all browsers.

According to Can I Use, so far the following browsers do not support “clip-path”:

  • IE
  • Edge
  • Opera Mini

If your site has many visitors using any of the 3 browsers, you might like to select another ending animation for your preloader.