Categories: CSSScriptWeb Design

Customizable Fullscreen Loading Screen with JavaScript – SWL.js

SenangWebs Loading (SWL) is a lightweight JavaScript library that displays a customizable, fullscreen loading indicator while assets like images, scripts, and dynamic content are loading on your webpage.

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.

Table of Contents

Toggle

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.

Modern JavaScript Lightbox with Zoom & Gallery – Zoomora

Zoomora is a modern JavaScript lightbox library that creates interactive image and video galleries with built-in zoom, fullscreen capabilities, thumbnail navigation, and smooth transitions. It automatically detects whether images can be zoomed based on their dimensions, implements pan-and-drag functionality for navigated zoomed content, and provides auto-hide controls for an immersive…

October 8, 2025

In "CSSScript"

Responsive Customizable SVG Radar Charts in JavaScript – RadarChartJS

RadarChartJS is a lightweight JavaScript library for generating responsive, customizable, interactive radar charts. It creates SVG radar charts that adapt to screen sizes and supports 3-6 data dimensions. Charts update dynamically, scale values automatically, and render gradients based on data thresholds. This library is useful for comparing different data sets…

October 13, 2025

In "CSSScript"

Lightweight Loading Overlay Plugin For Bootstrap 5 – AvalynxLoader

AvalynxLoader is a lightweight JavaScript plugin for Bootstrap 5 that displays a loading overlay with an animated spinner over specified DOM elements. This helps indicate to your visitors that something is loading into the element, such as AJAX requests, data synchronization, or any other process that requires a visual cue.…

October 10, 2025

In "CSSScript"

rssfeeds-admin