{"id":20821859,"url":"https://github.com/aidanaden/solid-top-loading-bar","last_synced_at":"2025-05-07T16:25:08.079Z","repository":{"id":40525818,"uuid":"507617912","full_name":"aidanaden/solid-top-loading-bar","owner":"aidanaden","description":"A very simple, highly customisable youtube/githhub-like solid loader component (inspired by react-top-loading-bar)","archived":false,"fork":false,"pushed_at":"2024-11-17T01:01:40.000Z","size":481,"stargazers_count":11,"open_issues_count":8,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-22T01:39:24.360Z","etag":null,"topics":["loader","loading","loading-bar","loading-indicator","progress-bar","solid-indicator","solid-loader","solid-loading-bar","solid-progress-bar","solidjs","solidjs-indicator","solidjs-loading-bar","solidjs-progress-bar","top-bar"],"latest_commit_sha":null,"homepage":"https://solid-top-loading-bar.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aidanaden.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2022-06-26T15:52:46.000Z","updated_at":"2024-11-08T06:15:59.000Z","dependencies_parsed_at":"2023-12-15T06:45:59.168Z","dependency_job_id":"3339df72-4a7d-4c4c-8e34-eb0b805a0494","html_url":"https://github.com/aidanaden/solid-top-loading-bar","commit_stats":{"total_commits":48,"total_committers":1,"mean_commits":48.0,"dds":0.0,"last_synced_commit":"5b8a55eb642d2f902d10d7f0766811cbdb4191c4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidanaden%2Fsolid-top-loading-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidanaden%2Fsolid-top-loading-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidanaden%2Fsolid-top-loading-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidanaden%2Fsolid-top-loading-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aidanaden","download_url":"https://codeload.github.com/aidanaden/solid-top-loading-bar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252913959,"owners_count":21824286,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["loader","loading","loading-bar","loading-indicator","progress-bar","solid-indicator","solid-loader","solid-loading-bar","solid-progress-bar","solidjs","solidjs-indicator","solidjs-loading-bar","solidjs-progress-bar","top-bar"],"created_at":"2024-11-17T22:13:17.028Z","updated_at":"2025-05-07T16:25:08.056Z","avatar_url":"https://github.com/aidanaden.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# solid-top-loading-bar\n\n\u003e\n\n[![size](https://img.shields.io/bundlephobia/minzip/solid-top-loading-bar?style=for-the-badge)](https://bundlephobia.com/package/solid-top-loading-bar)\n[![size](https://img.shields.io/npm/v/solid-top-loading-bar?style=for-the-badge)](https://www.npmjs.com/package/solid-top-loading-bar)\n![npm](https://img.shields.io/npm/dw/solid-top-loading-bar?style=for-the-badge)\n\n[download-image]: https://img.shields.io/npm/dm/solid-top-loading-bar.svg\n[download-url]: https://npmjs.org/package/solid-top-loading-bar\n\n[![solid-top-loading-bar](https://nodei.co/npm/solid-top-loading-bar.png)](https://npmjs.org/package/solid-top-loading-bar)\n\nThis package was ported to Solid from the [react-top-loading-bar](https://github.com/klendi/react-top-loading-bar) package made by [Klendi Gocci](https://klendi.dev/)\n\n## Install\n\n- using npm\n\n```bash\nnpm install --save solid-top-loading-bar\n```\n\n- using yarn\n\n```bash\nyarn add solid-top-loading-bar\n```\n\n- CDN\n\n```\nhttps://unpkg.com/solid-top-loading-bar\n```\n\n## Usage\n\n### With ref\n\n```jsx\nimport LoadingBar, { LoadingBarRef } from \"solid-top-loading-bar\";\n\nconst App = () =\u003e {\n const [loadingBar, setLoadingBar] = createSignal\u003cLoadingBarRef\u003e()\n\n return (\n \u003cdiv\u003e\n \u003cLoadingBar color=\"#f11946\" loadingBar={loadingBar()} setLoadingBar={setLoadingBar} /\u003e\n \u003cbutton onClick={() =\u003e loadingBar()?.continuousStart()}\u003e\n Start Continuous Loading Bar\n \u003c/button\u003e\n \u003cbutton onClick={() =\u003e loadingBar()?.staticStart()}\u003e\n Start Static Loading Bar\n \u003c/button\u003e\n \u003cbutton onClick={() =\u003e loadingBar()?.complete()}\u003eComplete\u003c/button\u003e\n \u003cbr /\u003e\n \u003c/div\u003e\n );\n};\n\nexport default App;\n```\n\n### With state\n\n```jsx\nimport { createSignal } from \"solid\";\nimport LoadingBar from \"solid-top-loading-bar\";\n\nconst App = () =\u003e {\n const [progress, setProgress] = createSignal(0);\n\n return (\n \u003cdiv\u003e\n \u003cLoadingBar\n color=\"#f11946\"\n progress={progress()}\n onLoaderFinished={() =\u003e setProgress(0)}\n /\u003e\n \u003cbutton onClick={() =\u003e setProgress((p) =\u003e p + 10)}\u003eAdd 10%\u003c/button\u003e\n \u003cbutton onClick={() =\u003e setProgress((p) =\u003e p + 20)}\u003eAdd 20%\u003c/button\u003e\n \u003cbutton onClick={() =\u003e setProgress(100)}\u003eComplete\u003c/button\u003e\n \u003cbr /\u003e\n \u003c/div\u003e\n );\n};\n\nexport default App;\n```\n\n## Demo\n\n[Click here for demo](https://solid-top-loading-bar.vercel.app/)\n\n## Built-in Methods\n\n| Methods | Parameters | Descriptions |\n| ------------------------------------------- | :---------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| add(value) | Number | Adds a value to the loading indicator. |\n| decrease(value) | Number | Decreases a value to the loading indicator. |\n| continuousStart(startingValue, refreshRate) | Number (optional), Number(optional) | Starts the loading indicator with a random starting value between 20-30, then repetitively after an refreshRate, increases it by a random value between 2-10. This continues until it reaches 90% of the indicator's width. |\n| staticStart(startingValue) | Number (optional) | Starts the loading indicator with a random starting value between 30-50. |\n| complete() | | Makes the loading indicator reach 100% of his width and then fade. |\n\n## Properties\n\n| Property | Type | Default | Description |\n| :----------------- | :------------ | :------ | :-------------------------------------------------------------------------------------------------------------------------------- |\n| progress | Number | `0` | The progress/width indicator, progress prop varies from `0` to `100`. |\n| color | String | `red` | The color of the loading bar, color take values like css property `background:` do, for example `red`, `#000` `rgb(255,0,0)` etc. |\n| shadow | Boolean | `true` | Enables / Disables shadow underneath the loader. |\n| height | Number | `2` | The height of the loading bar in pixels. |\n| background | String | `3` | The loader parent background color. |\n| style | CSSProperties | | The style attribute to loader's div |\n| containerStyle | CSSProperties | | The style attribute to loader's container |\n| shadowStyle | CSSProperties | | The style attribute to loader's shadow |\n| transitionTime | Number | `300` | Fade transition time in miliseconds. |\n| loaderSpeed | Number | `500` | Loader transition speed in miliseconds. |\n| waitingTime | Number | `1000` | The delay we wait when bar reaches 100% before we proceed fading the loader out. |\n| className | String | | You can provide a class you'd like to add to the loading bar to add some styles to it |\n| containerClassName | String | | You can provide a class you'd like to add to the loading bar container to add some css styles |\n| onLoaderFinished | Function | | This is called when the loading bar completes, reaches 100% of his width. |\n\n## Projects using solid-top-loading-bar\n\nAdd your own project. Make a PR\n\n## Code Style\n\n[![js-standard-style](https://cdn.rawgit.com/standard/standard/master/badge.svg)](http://standardjs.com)\n\n## License\n\nMIT © aidanaden\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faidanaden%2Fsolid-top-loading-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faidanaden%2Fsolid-top-loading-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faidanaden%2Fsolid-top-loading-bar/lists"}