Website preloader as Web Component

Aleksandr Zidyganov — Mon, 24 Jul 2023 06:52:51 +0000

Greetings! Today, I aspire to expound upon my open-source endeavor true-preloader-core.

The primary objectives that this solution addresses are as follows:

Harnessing the versatility of any animation of your choice.
Demonstrating the animation prior to the page loading.
Customizing browser display options:
- Upon each website visitation.
- Upon refreshing the page.
- Upon transitioning to a new page (except in the case of single-page applications).
Programmatically managing the concealment of the preloader:
- Establishing a minimum display duration.
- Specifying a maximum display duration.
- Triggering an event upon concealing the preloader.
Ensuring the preloader possesses a minimal size.

To initialize the preloader on your website, it will be necessary to include two JavaScript files within the <head> section. The first file encompasses the preloader animation, while the second file comprises the core functionality of the preloader.

<head>
 ...
  <script src='preloader-animation.js'></script>
  <script src='preloader-core.js'  
    data-preloader 
    data-build-version='v111112'
    data-frequency='always'
    data-duration-hide='300' 
    data-time-fallback='5000'
    data-min-show-time='2000'></script>
  ...
</head>

Crafting the Animation File

To create the preloader-animation.js file, we utilize the template-preloader.js as a foundation. You can find it here: template-preloader.js. Next, we incorporate the desired animation, such as the CSS animation from Codepen: example. Adapting it to suit the preloader's requirements, the resulting content of the file will be as follows: preloader-animation.js.

Then, proceed to include these two files within your website, acquiring a fully functional preloader. See the live demonstration here: DEMO.

For an overview of the available options, please refer to the project page https://github.com/csscoder/true-preloader-core.

DEV Community: Aleksandr Zidyganov

Website preloader as Web Component

Crafting the Animation File