By rssfeeds-admin 
It can be used to enhance the browsing experience by providing visual feedback during the loading process. This reduces perceived wait times and keeps users engaged.
The library supports various loader types, including spinners, pulsing animations, and custom images. You can customize the appearance to fit your site’s design through color customization and backdrop blur effects.
How to use it:
1. Download the swl.js JavaScript library and include it on your webpage.
<script src="/dist/swl.js"></script>
2. The SWL library uses data attributes to customize the loader’s appearance and behavior. Here’s how you can configure it:
- data-swl-pulse: Use pulsing loader
- data-swl-image: Use custom image
- data-swl-color: Set loader color
- data-swl-duration: Set minimum display time (ms)
- data-swl-bg-color: Set overlay background color
- data-swl-bg-opacity: Set overlay opacity (0-1)
- data-swl-bg-blur: Set background blur (px)
- data-swl-z-index: Set overlay z-index
<body data-swl-color="#007bff" data-swl-duration="2000" data-swl-bg-color="#ffffff" data-swl-bg-opacity="0.8" data-swl-bg-blur="5" data-swl-z-index="9999" >
How it works:
When the swl.js script loads, it creates a loading overlay (swl-overlay), a backdrop (swl-backdrop), and a content container (swl-content). The chosen loading animation (spinner, pulse, or custom image) is added to this content container.
The script then applies styles based on the data attributes provided in the body tag. These styles control the appearance of the loading screen, such as color, blur, and opacity.
A small piece of JavaScript then calculates the remaining display time for the loader based on the data-swl-duration setting and the initial page load time. After the page fully loads, the loading screen is hidden.
Changelog:
v1.1.8 (05/02/2025)
- Refactor
v1.1.5 (10/27/2024)
- Update color scheme & remove redundances
The post Customizable Fullscreen Loading Screen with JavaScript – SWL.js appeared first on CSS Script.
Discover more from RSS Feeds Cloud
Subscribe to get the latest posts sent to your email.