bs Preloader

The plugin integrates a preloader that gracefully fades page in and out (not working in Safari) upon clicking a link, ensuring smooth transitions between pages.

Installation

1. Download Plugin
2. In your admin panel, go to Plugins > and click the Add New button.
3. Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
4. Click Activate to use your new Plugin right away.

Filters & Hook

Use filters to change preloader classes in child’s functions.php:

Changing the bg

/**
 * Change preloader bg
 */
function preloader_bg_class() {
  return "bg-success align-items-center justify-content-center position-fixed top-0 end-0 bottom-0 start-0 zi-1070";
}
add_filter('bootscore/class/preloader/bg', 'preloader_bg_class', 10, 2);

Changing the spinner

Default template shows the Bootstrap Spinner spinner-border:

Change the spinner-border text-primary to spinner-grow text-success:

/**
 * Change preloader spinner
 */
function preloader_spinner_class() {
  return "spinner-grow text-success";
}
add_filter('bootscore/class/preloader/spinner', 'preloader_spinner_class', 10, 2);

Changing the spinner to site logo

Remove the spinner class and hook the site logo to bootscore_preloader_after_status_open:

/**
 * Remove preloader spinner class
 */
function remove_preloader_spinner_class() {
  return "";
}
add_filter('bootscore/class/preloader/spinner', 'remove_preloader_spinner_class', 10, 2);

/**
 * Hook to add site logo to preloader
 */
function hook_preloader_inside_status() {
  ?>
    <img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/img/logo/logo.svg" alt="<?php bloginfo('name'); ?> Logo" class="d-td-none" width="60" height="60">
    <img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/assets/img/logo/logo-theme-dark.svg" alt="<?php bloginfo('name'); ?> Logo" class="d-tl-none" width="60" height="60">
  <?php
}
add_action( 'bootscore_preloader_status', 'hook_preloader_inside_status' );

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 keeping the same file structure but removing the templates subdirectory. Path must be your-theme/bs-preloader/preloader.php.

The copied file will now override the bs Preloader default template file. Change classes or HTML as you want.

Changelog

Currently bs Preloader v5.5.0

Visit the Releases page for a detailed changelog. Previous versions can be downloaded from the Assets tab. Install/downgrade via the plugin uploader.