senangwebs-loading
Advanced tools
Lightweight JavaScript library that provides customizable loading screens for web applications.
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.
https://unpkg.com/senangwebs-loading@latest/examples/index.html
npm install senangwebs-loading
Include SenangWebs Loading in your HTML file's head section with the defer attribute:
<head>
<script src="https://unpkg.com/senangwebs-loading@latest/dist/swl.js" defer></script>
</head>
<!-- If installed via npm -->
<head>
<script src="path/to/swl.js" defer></script>
</head>
<!-- Or if using unpkg -->
<head>
<script src="https://unpkg.com/senangwebs-loading@latest/dist/swl.js" defer></script>
</head>
data-swl attribute and any customization options:<div
data-swl
data-swl-type="spinner"
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"
>
<!-- Optional: Custom loader content -->
</div>
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 loaderdata-swl-bg-color="#RRGGBB": Set the background color of the overlaydata-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<head>
<script src="path/to/swl.js" defer></script>
</head>
<head>
<link rel="preload" href="path/to/loader.gif" as="image">
</head>
<div data-swl data-swl-color="#007bff" data-swl-duration="2000"></div>
<div data-swl data-swl-type="pulse" data-swl-color="#ff0000" data-swl-duration="3000"></div>
<div data-swl data-swl-type="image" data-swl-image="/path/to/your/loader.gif" data-swl-duration="2500"></div>
<div
data-swl
data-swl-type="spinner"
data-swl-color="#00ff00"
data-swl-duration="3000"
data-swl-bg-color="#000000"
data-swl-bg-opacity="0.5"
data-swl-bg-blur="5"
data-swl-z-index="10000">
</div>
<div data-swl data-swl-duration="2000">
<div class="custom-loader">Loading...</div>
</div>
SenangWebs Loading works on all modern browsers, including:
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE.md file for details.
If you encounter any issues or have questions, please file an issue on the GitHub repository.
FAQs
Lightweight JavaScript library that provides customizable loading screens for web applications.
We found that senangwebs-loading demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.