{"id":28497870,"url":"https://github.com/yesman93/bs-progressbar","last_synced_at":"2026-04-25T11:34:01.783Z","repository":{"id":294019154,"uuid":"985760792","full_name":"yesman93/bs-progressbar","owner":"yesman93","description":"Lightweight JavaScript overlay progress bar as a singleton utility","archived":false,"fork":false,"pushed_at":"2025-05-18T15:22:16.000Z","size":59,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-03T13:50:42.419Z","etag":null,"topics":["bootstrap","bootstrap5","frontend","javascript","loading","overlay","progressbar","singleton","ui-component","vanilla-js","web-utility"],"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/yesman93.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2025-05-18T13:25:36.000Z","updated_at":"2025-05-18T15:22:19.000Z","dependencies_parsed_at":"2025-07-03T13:48:07.774Z","dependency_job_id":null,"html_url":"https://github.com/yesman93/bs-progressbar","commit_stats":null,"previous_names":["yesman93/bs-progressbar"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/yesman93/bs-progressbar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yesman93%2Fbs-progressbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yesman93%2Fbs-progressbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yesman93%2Fbs-progressbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yesman93%2Fbs-progressbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yesman93","download_url":"https://codeload.github.com/yesman93/bs-progressbar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yesman93%2Fbs-progressbar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32261116,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T09:15:33.318Z","status":"ssl_error","status_checked_at":"2026-04-25T09:15:31.997Z","response_time":59,"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":["bootstrap","bootstrap5","frontend","javascript","loading","overlay","progressbar","singleton","ui-component","vanilla-js","web-utility"],"created_at":"2025-06-08T13:06:53.006Z","updated_at":"2026-04-25T11:34:01.769Z","avatar_url":"https://github.com/yesman93.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Progressbar Overlay\n\nA lightweight, zero-dependency JavaScript utility that displays a full-page overlay progress bar with optional caption, color customization, and a lazy-loaded singleton architecture. Ideal for blocking the UI during long-running tasks like data loading, form submission, or AJAX calls.\n\n---\n\n[Demo page](/example/index.html)\n\n---\n\n## 📦 Features\n\n- ✅ Full-screen overlay to prevent user interaction while loading\n- ✅ Lazy-loaded **singleton**: only initializes when first accessed\n- ✅ Fully customizable:\n  - Duration\n  - Caption label\n  - Overlay transparency\n  - Bootstrap-compatible progress bar color\n- ✅ Supports dynamic label updates mid-progress\n- ✅ Clean removal of overlay after progress completion\n- ✅ Zero dependencies – works in any modern browser\n\n---\n\n## 🌍 Browser Support\n\n| Browser       | Supported |\n|---------------|-----------|\n| Chrome        | ✅        |\n| Firefox       | ✅        |\n| Safari        | ✅        |\n| Edge          | ✅        |\n| Opera         | ✅        |\n| IE 11         | ⚠️ *untested, possibly partial* |\n\n---\n\n## 📥 Installation\n\n### 1. Download or Clone\n\n```bash\ngit clone https://github.com/yesman93/bs-progressbar.git\n```\n\n### 2. Include in Your HTML\n\n```html\n\u003cscript src=\"bs-progressbar.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"bs-progressbar.css\"\u003e\n```\n\nOr load via CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/yesman93/bs-progressbar/bs-progressbar.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/yesman93/bs-progressbar/bs-progressbar.css\"\u003e\n```\n\n---\n\n## 🚀 Quick Start\n\n```html\n\u003cscript src=\"bs-bs-progressbar.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  // Start the overlay progress bar\n  Progressbar.start(5000, 'Processing...', false, 'bg-primary');\n\n  // Update label after 2 seconds\n  setTimeout(() =\u003e {\n    Progressbar.update_label('Almost done...');\n  }, 2000);\n\n  // Stop and remove the progress bar after 4 seconds\n  setTimeout(() =\u003e {\n    Progressbar.stop(() =\u003e {\n      alert('Complete!');\n    });\n  }, 4000);\n\u003c/script\u003e\n```\n\n---\n\n## 📚 API Reference\n\nThe `Progressbar` is exposed as a **singleton** on the `window` object. Use `Progressbar` or `window.Progressbar` to access its methods. It can be accessed from e.g. inside of `\u003ciframe\u003e` using `parent.Progressbar`.\n\n### `Progressbar.start(duration, label, transparent, color)`\n\n**Description:** Starts the progress bar overlay.\n\n| Parameter    | Type     | Default   | Description                                                                 |\n|--------------|----------|-----------|-----------------------------------------------------------------------------|\n| `duration`   | Number   | 5000      | Total time in milliseconds to simulate progress from 0% to 100%             |\n| `label`      | String   | `\"\"`      | Optional caption text displayed above the progress bar                      |\n| `transparent`| Boolean  | `false`   | If true, uses a transparent overlay instead of a dark one                   |\n| `color`      | String   | `'bg-dark'` | Bootstrap-compatible class for the progress bar color (e.g., `bg-success`)  |\n\n**Example:**\n\n```javascript\nProgressbar.start(3000, 'Loading user data...', true, 'bg-warning');\n```\n\n---\n\n### `Progressbar.update_label(label)`\n\n**Description:** Dynamically updates the caption above the progress bar. Creates a label if it doesn’t already exist.\n\n| Parameter | Type   | Description                          |\n|-----------|--------|--------------------------------------|\n| `label`   | String | New caption to display               |\n\n**Example:**\n\n```javascript\nProgressbar.update_label('Validating credentials...');\n```\n\n---\n\n### `Progressbar.stop(on_complete)`\n\n**Description:** Stops and removes the progress overlay, optionally running a callback when the animation finishes.\n\n| Parameter       | Type       | Description                                |\n|-----------------|------------|--------------------------------------------|\n| `on_complete`   | Function   | A callback to run after overlay is removed |\n\n**Example:**\n\n```javascript\nProgressbar.stop(() =\u003e {\n  console.log('Progress completed.');\n});\n```\n\n---\n\n## 💡 Use Cases\n\n- Blocking UI while sending AJAX requests\n- Feedback for form submission\n- Delayed modal operations\n- Simulated loading for demo apps\n- Multi-step workflows or onboarding\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! If you find a bug or want to add a feature:\n\n1. Fork the repo\n2. Create a new branch\n3. Make your changes\n4. Open a Pull Request\n\nPlease follow the existing style and naming conventions. Include doc comments when adding new functionality.\n\n---\n\n## 📄 License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n---\n\n## 🙌 Author\n\nCreated by **TB**  \n2025-05-18\n\nIf you use this in your project, consider giving it a ⭐ or sharing it! Feedback and ideas welcome.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyesman93%2Fbs-progressbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyesman93%2Fbs-progressbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyesman93%2Fbs-progressbar/lists"}