{"id":17033970,"url":"https://github.com/yisibell/trickling","last_synced_at":"2025-04-12T12:51:53.473Z","repository":{"id":168960652,"uuid":"644775235","full_name":"yisibell/trickling","owner":"yisibell","description":"A modern progress bar for web APP. Featuring realistic trickle animations to convince your users that something is happening!","archived":false,"fork":false,"pushed_at":"2024-01-19T01:28:06.000Z","size":441,"stargazers_count":18,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-07T16:14:28.556Z","etag":null,"topics":["modern","next-nprogress","nprogress","progress-bar","trickle","trickling","web"],"latest_commit_sha":null,"homepage":"https://hongwenqing.com/trickling/","language":"TypeScript","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/yisibell.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2023-05-24T08:26:25.000Z","updated_at":"2025-03-16T10:33:22.000Z","dependencies_parsed_at":"2023-05-27T20:00:30.005Z","dependency_job_id":"469b9965-46b1-4ff3-9683-44e8f09e027e","html_url":"https://github.com/yisibell/trickling","commit_stats":{"total_commits":77,"total_committers":2,"mean_commits":38.5,"dds":"0.038961038961038974","last_synced_commit":"41bff15b3c141ce23b78db51e5f1e7b740907d49"},"previous_names":["yisibell/oprogress","yisibell/trickling"],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibell%2Ftrickling","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibell%2Ftrickling/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibell%2Ftrickling/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yisibell%2Ftrickling/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yisibell","download_url":"https://codeload.github.com/yisibell/trickling/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248571490,"owners_count":21126518,"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":["modern","next-nprogress","nprogress","progress-bar","trickle","trickling","web"],"created_at":"2024-10-14T08:36:57.886Z","updated_at":"2025-04-12T12:51:53.455Z","avatar_url":"https://github.com/yisibell.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.org/package/trickling\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/trickling.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmcharts.com/compare/trickling?minimal=true\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/trickling.svg\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n# Trickling\n\nA modern progress bar for web APP. Featuring realistic trickle animations to convince your users that something is happening!\n\n- [See Example here](https://hongwenqing.com/trickling/).\n- [Release Notes](./CHANGELOG.md).\n\n# Features\n\n- Support **programmatically** modify the style of the progress bar.\n- Support **RTL** languages.\n- Support **Typescript**.\n\n# Installation\n\n```bash\n# pnpm\n$ pnpm add trickling\n\n# yarn\n$ yarn add trickling\n\n# npm\n$ npm i trickling\n```\n\n# Usage\n\n1. Imports style.\n\n```ts\nimport 'trickling/lib/style.css'\n```\n\n2. Create a trickling progress instance in a single file.\n\n```ts\n// @/plugins/trickling-progress.ts\n\nimport { createTrickling } from 'trickling'\n\n// Create a Trickling progress instance\nconst tricklingProgress = createTrickling({\n  // Options\n  // ...\n})\n\n// You can also change options after creating a Trickling progress instance\ntricklingProgress.setOptions({\n  // ...\n})\n\n// Export the instance\nexport { tricklingProgress }\n```\n\n3. Using it where needed.\n\n```ts\nimport { tricklingProgress } from '@/plugins/trickling-progress.ts'\n\n// ...\n// shows the Trickling progress bar\ntricklingProgress.start()\n\n// ...\n// Then, completes the Trickling progress\ntricklingProgress.done()\n```\n\n# Options\n\n| Key | Type | Default value | Description |\n| :---: | :---: | :---: | :---: |\n| `minimum` | `number` | `0.08` | Changes the minimum percentage used upon starting. |\n| `maximum` | `number` | `0.994` | Changes the maximum percentage used upon ending. |\n| `easing` | `string` | `ease` | Adjust animation settings using easing (a CSS easing string). |\n| `speed` | `number` | `200` | Adjust animation settings using speed (in ms). |\n| `trickle` | `boolean` | `true` | Turn off the automatic incrementing behavior by setting this to `false`. |\n| `trickleSpeed` | `number` | `1000` | Adjust how often to trickle/increment (in ms). |\n| `showSpinner` | `boolean` | `true` | Turn off **loading spinner** by setting it to `false`. |\n| `appendTo` | `string`, `HTMLElement` | `body` | Specify this to change the **parent container**. |\n| `customWrapperClassName` | `string` | `''` | Specify this to add a class name into the parent container. |\n| `color` | `string` | `#2299dd` | Specify this to change **color** of the progress bar and spinner. |\n| `progressBarHeight` | `string` | `2px` | Specify this to change **height** of the progress bar. |\n| `spinnerOpacity` | `number` | `1` | Specify this to change **opacity** of the loading spinner. |\n| `spinnerSize` | `string` | `18px` | Specify this to change **size** of the loading spinner. |\n| `spinnerStrokeWidth` | `string` | `2px` | Specify this to change **stroke width** of the loading spinner. |\n| `rtl` \u003cbr /\u003e (Added in v1.6.0) | `boolean` | `false` | Change the progress direction to right-to-left. |\n| `removeFromDOMWhenDone` \u003cbr /\u003e (Added in v1.9.0) | `boolean` | `true` | Remove the component from the DOM when done, re-add when needed. This can have performance implications on complex apps as style calculations are slow. If set to `false`, just hidden the DOM via `display: none` when progress done. |\n| `zIndex` \u003cbr /\u003e (Added in v1.8.0) | `number/string` | `1031` | Specify this to change progress bar **z-index**. |\n| [trickleIncrementalCurve](https://github.com/yisibell/trickling#trickle-incremental-curve) \u003cbr /\u003e (Added in v1.10.0) | `function/Array` | See below | You can use this option to configure the **incremental curve** of the trickle. |\n\n\n# Trickle Incremental Curve\n\nUsing this configuration allows you to easily change the default trickle increasing curve. Thus, each Progress bar has different incremental expressions.\n\n1. Default value\n\n```ts\n[\n  { from: 0, to: 0.2, value: 0.1 },\n  { from: 0.2, to: 0.5, value: 0.04 },\n  { from: 0.5, to: 0.8, value: 0.02 },\n  { from: 0.8, to: 0.99, value: 0.005 },\n]\n```\n\n- **from**: This represents the starting range of the current progress status (including).\n- **to**: This represents the end range of the current progress status (excluding).\n- **value**: This represents the progress increment value of the current range.\n\n2. Type definition see [here](./src/lib/interfaces/core.ts).\n\n- **Function**: If you use it as a function, should returns a `number` or `array`.\n- **Array**: Just set it via a `array`.\n\n# Advanced usage\n\n1. **Percentages**: To set a progress percentage, call `.set(n)`, where n is a number between `0..1`.\n\n```ts\ntrickling.set(0.0);     // Just same as .start()\ntrickling.set(0.4);\ntrickling.set(1.0);     // Just same as .done()\n```\n\n2. **Incrementing**: To increment the progress bar, just use `.inc()`. This increments it with a random amount. This will never get to `100%`: use it for every image load (or similar).\n\n```ts\ntrickling.inc();\n```\n\n3. If you want to increment by a specific value, you can pass that as a parameter:\n\n```ts\ntrickling.inc(0.2);    // This will get the current status value and adds 0.2 until status is 0.994\n```\n\n4. **Force-done**: By passing true to `done()`, it will show the progress bar even if it's not being shown. (The default behavior is that `.done()` will not do anything if `.start()` isn't called).\n\n```ts\ntrickling.done(true);\n```\n\n5. Get the status value: To get the status value, use `.status`.\n\n```ts\ntrickling.status\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyisibell%2Ftrickling","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyisibell%2Ftrickling","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyisibell%2Ftrickling/lists"}