https://github.com/a-hakim/senangwebs-loading
Customizable loading screens for web applications.
https://github.com/a-hakim/senangwebs-loading
loading-indicator loading-screen senangwebs-library website
Last synced: about 1 month ago
JSON representation
Customizable loading screens for web applications.
- Host: GitHub
- URL: https://github.com/a-hakim/senangwebs-loading
- Owner: a-hakim
- License: mit
- Created: 2024-10-15T07:41:41.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-05-10T02:32:29.000Z (about 1 month ago)
- Last Synced: 2026-05-13T13:55:47.489Z (about 1 month ago)
- Topics: loading-indicator, loading-screen, senangwebs-library, website
- Language: JavaScript
- Homepage:
- Size: 703 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# SenangWebs Loading (SWL)
SenangWebs Loading (SWL) is a lightweight JavaScript library that provides customizable loading screens for web applications. With minimal setup, you can add elegant loading animations to your web pages, enhancing the user experience during page load.
[](LICENSE.md)
## Features
- Instant loading indicator before DOM loads
- Easy to integrate with existing projects
- Multiple loader types: spinner, pulsing, and custom image
- Customizable colors for loaders and overlay
- Backdrop blur effect option
- Minimum duration setting to ensure visibility of the loading screen
- Priority loading - shows immediately before page content
- Smooth fade-out transitions
- Image preloading support
- No dependencies, pure vanilla JavaScript
- Compatible with Tailwind CSS
- Responsive and works on all modern browsers
## Examples
[https://unpkg.com/senangwebs-loading@latest/examples/index.html](https://unpkg.com/senangwebs-loading@latest/examples/index.html)
## Installation
### Using npm
```bash
npm install senangwebs-loading
```
### Using a CDN
Include SenangWebs Loading in your HTML file's head section with the defer attribute:
```html
```
## Usage
1. Include the SWL JavaScript file in your HTML's head section with defer:
```html
```
2. Add a div element with the `data-swl` attribute and any customization options:
```html
```
## Configuration Options
You can customize the loader using the following data attributes:
- `data-swl-type`: Set the loader type ("spinner", "pulse", or "image")
- `data-swl-color="#RRGGBB"`: Set the color of the loader (for spinner and pulse types)
- `data-swl-image="URL"`: Set the URL for a custom image loader (when type is "image")
- `data-swl-duration="2000"`: Set the minimum duration (in milliseconds) to display the loader
- `data-swl-bg-color="#RRGGBB"`: Set the background color of the overlay
- `data-swl-bg-opacity="0.8"`: Set the opacity of the overlay background (0 to 1)
- `data-swl-bg-blur="5"`: Set the blur effect for the background (in pixels)
- `data-swl-z-index="9999"`: Set the z-index of the loader overlay
## Performance Best Practices
1. Place the script in the head with defer attribute:
```html
```
2. Preload custom loader images:
```html
```
3. Use appropriate minimum duration:
- For small pages: 500-1000ms
- For medium pages: 1000-2000ms
- For content-heavy pages: 2000-3000ms
4. Optimize z-index values:
- Priority loader: 99999 (highest)
- Normal loaders: 9999 (high)
- Modal overlays: 1000-9998
- Regular content: < 1000
## Examples
### Default Spinner
```html
```
### Pulsing Loader with Custom Color
```html
```
### Custom Image Loader
```html
```
### Customized Overlay
```html
```
### Custom Loader Content
```html
Loading...
```
## Browser Support
SenangWebs Loading works on all modern browsers, including:
- Chrome
- Firefox
- Safari
- Edge
- Opera
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
## Acknowledgments
- Inspired by various loading screen libraries in the web development community
- Thanks to all contributors who have helped to improve this library
## Support
If you encounter any issues or have questions, please file an issue on the GitHub repository.