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.
Top comments (0)