This plugin adds a preloader, the content will be shown when the page is fully loaded. When clicking a link (not # and external url), the preloader fades in again (not working on Mac Safari and all iOS Browsers) to get a smooth page transition.
Installation
- Download Plugin
- In your admin panel, go to Plugins > and click the Add New button.
- Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
- Click Activate to use your new Plugin right away.
Override template via theme
Template file can be found within the /bs-preloader/templates/ plugin directory.
Edit file in an upgrade-safe way using overrides. Copy the template into a directory within your theme named /bs-preloader-main keeping the same file structure but removing the /templates/ subdirectory. Path must be /your-theme/bs-preloader-main/preloader.php.
The copied file will now override the bS Preloader default template file. Change classes or HTML as you want.
Default template shows the Bootstrap Spinner spinner-border
:
<div id="preloader" class="align-items-center justify-content-center position-fixed top-0 end-0 bottom-0 start-0 zi-1070">
<div id="status" class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Change the class from spinner-border
to spinner-grow
and a different loader will be shown:
Of course you can also display your logo, a gif or your own css animation there instead of the Bootstrap Spinners, it just has to be inside the div id="status"
.
This code will display the site logo instead the spinner:
<div id="preloader" class="align-items-center justify-content-center position-fixed top-0 end-0 bottom-0 start-0 zi-1070">
<div id="status" role="status">
<span class="visually-hidden">Loading...</span>
<img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/img/logo/logo.svg" alt="logo" class="logo">
</div>
</div>
For editing it is advantageous to have the preloader permanently displayed. Temporarily use the following css to not let the loader fade out. When you’re done with the design, delete the css again.
#preloader {
display: flex !important;
}
#status {
display: block !important;
}
Changelog
Earlier versions can be downloaded via the Github repository. Install/downgrade via the plugin uploader.
Load version on Github
- [IMPROVEMENT] Reformat files
Load version on Github
- [BUGFIX] Changed class
sr-only
tovisually-hidden
(BS5) in template preloader.php
Load version on Github
- [HOTFIX] Exclude
:mailto
,:tel
,.woocommerce-MyAccount-downloads-file
anddata-fade="false"
from fade-in.
Load version on Github
- [BUGFIX] Exclude
.comments-link
from fade-out - [BUGFIX] Exclude
.woocommerce-MyAccount-downloads-file
from fade-out
Load version on Github
- [BUGFIX] Exclude
dropdown-toggle
from fade-out
- [IMPROVEMENT] Hide on Internet Explorer
- [IMPROVEMENT] Fade out effect on click
<a>...</a>
for smooth page transition (works not on Mac Safari and all iOS Browsers)
Load version on Github
- [IMPROVEMENT] Uses zi-1070 class of parent theme instead of own CSS (needs at least bootScore 5.0.0.5)
Load version on Github
- [IMPROVEMENT] Uses Bootstrap positioning classes instead of own CSS
Load version on Github
- [SEO] Load CSS in external file again
Load version on Github
- [NEW] Override template in child-theme
Load version on Github
- [SEO] Load js in footer
- [SEO] Load CSS inline to reduce file request
Load version on Github
- Initial release
Cuong Ung
says:i tried up file gif 300×169 pixels on the same folder templates
My code i pasted
Loading…
<img src="../Magnify-1s-200px.gif” alt=”logo” class=”logo”>
After i paste, i don’t see my gif when it reloading website
Basti
says:It seems that the path to your gif is not correct. But I cannot say something without checking it, please share a site link