Installation is simple. Just download the zip file from your Codecanyon account and upload it to your website via Wordpress Plugins page.

General

Animation Style: There are two types of animation. If you select "loading text", a title and a subtitle will be displayed on the page loading animation. If you select "loading image" an animated gif will be displayed on the page loading animation. You can also upload your own image. For more information please read the following sections.

Activate Transitions: To use CSS3 page transitions, you must activate transitions. If you don't activate it, jquery fadeout animation will be used. After the activation a new dropdown will be visible under this setting.

Page transitions: You can select from 32 CSS3 transitions.

Background color: Background color of the page loading animation.

Where to Show the Loading Animation: This is the most important setting.

1. All Pages: The page loading animation is displayed on all your pages.
2. Homepage: The page loading animation is displayed only on your homepage.
3. Select Post Type: If you select this option, new checkboxes will be visible. The page loading animation is displayed only selected post type pages.
4. Use the shortcode: If you select this option, default shortcode will be visible in a text box. The page loading animation will be displayed only when you add this shortcode to a post or page. Default shortcode is generated from your current plugin settings. So instead of editing the shortcode, we suggest you to change the plugin settings as you want and click save changes. After that, shortcode will be updated as you want. You can copy&paste it to any post or page as you want. We suggest you to paste the shortcode to the top of your page content. For more information about the shortcode, please look at shortcode section.
5. Disable page loading: The page loading animation is disabled completely.

Include archive pages: Category, Tag, other Taxonomy Term, custom post type archive, Author and Date-based pages are all types of Archives. If you activate this option, the page loading animation will be displayed on all these pages.

Test Mode: If you activate the test mode, the page loading animation will not disappear after page loading complete. It may be useful to test the layout, text animations etc.

Loading Text

Title: Title of the text animation.

Subtitle: Subtitle of the text animation. This is optional.

Title color: This is the main color of the title. We suggest you to use the semi-transparent version of the loaded title color. You can change the opacity of the color from the bar under the colorpicker.

Loaded title color: Second color of the title.

Subtitle color: The main color of the subtitle.

Loaded subtitle color: Subtitle will be this color just before the page loading is complete.

Disable on Mobile Devices: If you disable the text loading animation on mobile devices, switch on.

Loading Text Font Sizes

Animated title should be a single line text. So we suggest you to check the text animation on different screen sizes and update font sizes if required.

Loading Image

You can select a GIF animation from the image list. All preloaders created by Pixel Buddha. Note that their background is white. If you want to add your own image, you can use the custom image field.

GIF animation name: You can use this name in the shortcode.

Animated gif size: There are 3 available size of the gif animations. 128x128px, 64x64px and 32x32px.

Rounding: If you select "completely rounded" your animated gif or custom image will be displayed as a circle.

Image animation: You can select from 5 CSS3 animations for your custom image.

Animation duration: The duration of the image animation.

Loading Bar

Loading bar placement: Loading bar can be displayed at the bottom or at the top of the loading animation. If you don't want to display it, select "hide".

Loading bar color: It is actually the static background color of the loading bar.

Loaded bar color: It is the color of the animated part.

Loading bar height: If you want to display a thicker bar, change it with a bigger number.

Loading Percentage Counter

Activate Counter: If you want to display a percentage counter on the page loading animation, you must switch this on.

Counter placement: Placement of the counter on the page loading animation.

Text color: The color of the animated numbers.

Margin Left & Right: The left & right paddings of the counter. You can use this setting to push or pull your counter left or right (px).

Margin Top & Bottom: The top & bottom paddings of the counter. You can use this setting to push or pull your counter up or down (px).

Font Size: Font size on big screens and laptops (px)

Font Size (Tablets):Screens below 1024px width (px)

Font Size (Phones):Screens below 480px width (px)

Skip Loading Text

Display Skip Loading Text: If you want to display a skip loading link on the page loading animation, you must switch this on. Your visitors can skip the page loading animation by clicking this link.

Display delay: Indicate the delay in millisecond (1 second=1000 milliseconds) before the skip text appears.

Skip Text: The text of the skip loading link.

Text Placement: Placement skip text on the page loading animation.

Text Color: Color of the skip loading link.

Margin Left & Right: The left & right paddings of the text. You can use this setting to push or pull your text left or right (px).

Margin Top & Bottom: The top & bottom paddings of the text. You can use this setting to push or pull your text up or down (px).

Font Size: Font size on big screens and laptops (px)

Font Size (Tablets):Screens below 1024px width (px)

Font Size (Phones):Screens below 480px width (px)

Custom CSS

You can use this field to add your custom css codes.

GIF Animations

CSS