{"id":49823440,"url":"https://github.com/a-hakim/senangwebs-loading","last_synced_at":"2026-05-13T13:55:52.870Z","repository":{"id":258233524,"uuid":"872858679","full_name":"a-hakim/senangwebs-loading","owner":"a-hakim","description":"Customizable loading screens for web applications.","archived":false,"fork":false,"pushed_at":"2026-05-10T02:32:29.000Z","size":720,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-13T13:55:47.489Z","etag":null,"topics":["loading-indicator","loading-screen","senangwebs-library","website"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/a-hakim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-10-15T07:41:41.000Z","updated_at":"2026-05-10T02:32:28.000Z","dependencies_parsed_at":"2024-10-26T23:32:23.113Z","dependency_job_id":null,"html_url":"https://github.com/a-hakim/senangwebs-loading","commit_stats":null,"previous_names":["a-hakim/senangwebs_loading"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/a-hakim/senangwebs-loading","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-hakim%2Fsenangwebs-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-hakim%2Fsenangwebs-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-hakim%2Fsenangwebs-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-hakim%2Fsenangwebs-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a-hakim","download_url":"https://codeload.github.com/a-hakim/senangwebs-loading/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-hakim%2Fsenangwebs-loading/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32985763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"ssl_error","status_checked_at":"2026-05-13T13:14:51.610Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["loading-indicator","loading-screen","senangwebs-library","website"],"created_at":"2026-05-13T13:55:51.095Z","updated_at":"2026-05-13T13:55:52.861Z","avatar_url":"https://github.com/a-hakim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SenangWebs Loading (SWL)\n\nSenangWebs 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.\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE.md)\n\n## Features\n\n- Instant loading indicator before DOM loads\n- Easy to integrate with existing projects\n- Multiple loader types: spinner, pulsing, and custom image\n- Customizable colors for loaders and overlay\n- Backdrop blur effect option\n- Minimum duration setting to ensure visibility of the loading screen\n- Priority loading - shows immediately before page content\n- Smooth fade-out transitions\n- Image preloading support\n- No dependencies, pure vanilla JavaScript\n- Compatible with Tailwind CSS\n- Responsive and works on all modern browsers\n\n## Examples\n[https://unpkg.com/senangwebs-loading@latest/examples/index.html](https://unpkg.com/senangwebs-loading@latest/examples/index.html)\n\n## Installation\n\n### Using npm\n\n```bash\nnpm install senangwebs-loading\n```\n\n### Using a CDN\n\nInclude SenangWebs Loading in your HTML file's head section with the defer attribute:\n\n```html\n\u003chead\u003e\n  \u003cscript src=\"https://unpkg.com/senangwebs-loading@latest/dist/swl.js\" defer\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n## Usage\n\n1. Include the SWL JavaScript file in your HTML's head section with defer:\n\n```html\n\u003c!-- If installed via npm --\u003e\n\u003chead\u003e\n  \u003cscript src=\"path/to/swl.js\" defer\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n\u003c!-- Or if using unpkg --\u003e\n\u003chead\u003e\n  \u003cscript src=\"https://unpkg.com/senangwebs-loading@latest/dist/swl.js\" defer\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n2. Add a div element with the `data-swl` attribute and any customization options:\n\n```html\n\u003cdiv \n  data-swl \n  data-swl-type=\"spinner\" \n  data-swl-color=\"#007bff\" \n  data-swl-duration=\"2000\"\n  data-swl-bg-color=\"#ffffff\"\n  data-swl-bg-opacity=\"0.8\"\n  data-swl-bg-blur=\"5\"\n  data-swl-z-index=\"9999\"\n\u003e\n  \u003c!-- Optional: Custom loader content --\u003e\n\u003c/div\u003e\n```\n\n## Configuration Options\n\nYou can customize the loader using the following data attributes:\n\n- `data-swl-type`: Set the loader type (\"spinner\", \"pulse\", or \"image\")\n- `data-swl-color=\"#RRGGBB\"`: Set the color of the loader (for spinner and pulse types)\n- `data-swl-image=\"URL\"`: Set the URL for a custom image loader (when type is \"image\")\n- `data-swl-duration=\"2000\"`: Set the minimum duration (in milliseconds) to display the loader\n- `data-swl-bg-color=\"#RRGGBB\"`: Set the background color of the overlay\n- `data-swl-bg-opacity=\"0.8\"`: Set the opacity of the overlay background (0 to 1)\n- `data-swl-bg-blur=\"5\"`: Set the blur effect for the background (in pixels)\n- `data-swl-z-index=\"9999\"`: Set the z-index of the loader overlay\n\n## Performance Best Practices\n\n1. Place the script in the head with defer attribute:\n```html\n\u003chead\u003e\n  \u003cscript src=\"path/to/swl.js\" defer\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n2. Preload custom loader images:\n```html\n\u003chead\u003e\n  \u003clink rel=\"preload\" href=\"path/to/loader.gif\" as=\"image\"\u003e\n\u003c/head\u003e\n```\n\n3. Use appropriate minimum duration:\n- For small pages: 500-1000ms\n- For medium pages: 1000-2000ms\n- For content-heavy pages: 2000-3000ms\n\n4. Optimize z-index values:\n- Priority loader: 99999 (highest)\n- Normal loaders: 9999 (high)\n- Modal overlays: 1000-9998\n- Regular content: \u003c 1000\n\n## Examples\n\n### Default Spinner\n\n```html\n\u003cdiv data-swl data-swl-color=\"#007bff\" data-swl-duration=\"2000\"\u003e\u003c/div\u003e\n```\n\n### Pulsing Loader with Custom Color\n\n```html\n\u003cdiv data-swl data-swl-type=\"pulse\" data-swl-color=\"#ff0000\" data-swl-duration=\"3000\"\u003e\u003c/div\u003e\n```\n\n### Custom Image Loader\n\n```html\n\u003cdiv data-swl data-swl-type=\"image\" data-swl-image=\"/path/to/your/loader.gif\" data-swl-duration=\"2500\"\u003e\u003c/div\u003e\n```\n\n### Customized Overlay\n\n```html\n\u003cdiv \n  data-swl\n  data-swl-type=\"spinner\"\n  data-swl-color=\"#00ff00\" \n  data-swl-duration=\"3000\" \n  data-swl-bg-color=\"#000000\"\n  data-swl-bg-opacity=\"0.5\"\n  data-swl-bg-blur=\"5\"\n  data-swl-z-index=\"10000\"\u003e\n\u003c/div\u003e\n```\n\n### Custom Loader Content\n\n```html\n\u003cdiv data-swl data-swl-duration=\"2000\"\u003e\n  \u003cdiv class=\"custom-loader\"\u003eLoading...\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Browser Support\n\nSenangWebs Loading works on all modern browsers, including:\n\n- Chrome\n- Firefox\n- Safari\n- Edge\n- Opera\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.\n\n## Acknowledgments\n\n- Inspired by various loading screen libraries in the web development community\n- Thanks to all contributors who have helped to improve this library\n\n## Support\n\nIf you encounter any issues or have questions, please file an issue on the GitHub repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-hakim%2Fsenangwebs-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa-hakim%2Fsenangwebs-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-hakim%2Fsenangwebs-loading/lists"}