Loading...

bS5 Preloader

This plugin shows a preloader. The content will be displayed when the page is fully loaded.

Note that in bootScore 5.0.0.2 the preloader is a plugin and no longer part of the theme. Do not install it if you are using bootScore 5.0.0.1 or older. If you update to 5.0.0.2 and have edited the header.php, you have to delete the preloader there.

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.

Override template via theme

Template file can be found within the /bs5-preloader/templates/ plugin directory.

Edit file in an upgrade-safe way using overrides. Copy the template into a directory within your theme named /bs5-preloader keeping the same file structure but removing the /templates/ subdirectory. Path must be /your-theme/bs5-preloader/preloader.php.

The copied file will now override the bS5 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="sr-only">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="sr-only">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;
}

2 Comments on “bS5 Preloader”

  • 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

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information