Page preloader

Page preloader

Show a customizable preloader when loading frontend pages.

Enable page preloader to customize background, border, image and animations.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Preloader will be disabled.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.

Page preloader

Switch to advanced mode

Show a customizable preloader when loading frontend pages.

Enable page preloader to customize background, border, image and animations.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Preloader will be disabled.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.

Background

primary
#3fa6a5
primary-dark
#2a6e6d
primary-darker
#153736
primary-light
#6bc6c5
primary-lighter
#a2dbda
primary-comp
#a63f40

deg


primary
#3fa6a5
primary-dark
#2a6e6d
primary-darker
#153736
primary-light
#6bc6c5
primary-lighter
#a2dbda
primary-comp
#a63f40

%


primary
#3fa6a5
primary-dark
#2a6e6d
primary-darker
#153736
primary-light
#6bc6c5
primary-lighter
#a2dbda
primary-comp
#a63f40

%

px

primary
#3fa6a5
primary-dark
#2a6e6d
primary-darker
#153736
primary-light
#6bc6c5
primary-lighter
#a2dbda
primary-comp
#a63f40

Image/logo

primary
#3fa6a5
primary-dark
#2a6e6d
primary-darker
#153736
primary-light
#6bc6c5
primary-lighter
#a2dbda
primary-comp
#a63f40

px


%

%

sec

Animation out

sec

Page preloader

Switch to basic mode

Show a customizable preloader when loading frontend pages.

Enable page preloader to customize background, border, image and animations.
On update:
Basic mode: New code will be generated to update the related partial SCSS file and all CSS will be compiled. Related theme mod will be updated.
Advanced mode: Editor code will be used to update the related partial SCSS file and all CSS will be compiled. Related theme mod will not be updated.

On reset:
Preloader will be disabled.
Related partial SCSS file will reset to default template and all CSS compiled. Related theme mod will reset to default values.
File:
SCSS _preloader.scss/custom/scss/_preloader.scss
Partial SCSS styles for customizer: Page preloader.
Type: SCSS
Size: 1 KB
Modified: 2026/07/28 09:06:59
Open file in new tab
Toggle editor find & replace panel.
Hotkeys: CTRL + F to open, ESC to close
Copy editor contents to clipboard.
Toggle editor light/dark theme.

Preloader preview

Preloader disabled.