{"id":16419406,"url":"https://github.com/devmahmud/next-transition-bar","last_synced_at":"2025-10-05T05:15:05.943Z","repository":{"id":207812109,"uuid":"719661655","full_name":"devmahmud/next-transition-bar","owner":"devmahmud","description":"Effortlessly enhance Next.js apps with next-progress-bar – an npm package for smooth page transition progress. Customizable, lightweight, and visually appealing, it adds a top loader and progress bar. Elevate user experience seamlessly.","archived":false,"fork":false,"pushed_at":"2024-11-30T19:00:11.000Z","size":2026,"stargazers_count":4,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-16T12:15:43.138Z","etag":null,"topics":["app-router","indicator","loading","next-nprogress","nextjs","nprogress","progressbar","react-nprogress","top","topbar-progress"],"latest_commit_sha":null,"homepage":"https://next-transition-bar.vercel.app","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/devmahmud.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,"zenodo":null}},"created_at":"2023-11-16T16:31:12.000Z","updated_at":"2025-02-14T09:29:18.000Z","dependencies_parsed_at":"2024-07-13T08:29:21.139Z","dependency_job_id":"a261f0be-c7da-459d-890c-69cbb2615b64","html_url":"https://github.com/devmahmud/next-transition-bar","commit_stats":null,"previous_names":["devmahmud/next-progress-bar","devmahmud/next-transition-bar"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/devmahmud/next-transition-bar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devmahmud%2Fnext-transition-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devmahmud%2Fnext-transition-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devmahmud%2Fnext-transition-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devmahmud%2Fnext-transition-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devmahmud","download_url":"https://codeload.github.com/devmahmud/next-transition-bar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devmahmud%2Fnext-transition-bar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278411261,"owners_count":25982368,"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","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["app-router","indicator","loading","next-nprogress","nextjs","nprogress","progressbar","react-nprogress","top","topbar-progress"],"created_at":"2024-10-11T07:24:16.064Z","updated_at":"2025-10-05T05:15:05.908Z","avatar_url":"https://github.com/devmahmud.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next Transition Bar\n\nElevate the user experience in your Next.js applications effortlessly with **next-transition-bar** – a versatile npm package designed to seamlessly enhance page transition progress. This lightweight and customizable solution adds a top loader and progress bar, delivering both visual appeal and a smooth transition experience.\n\n[Live Demo](https://next-transition-bar.vercel.app)\n\n## Installation\n\nYou can install the package using npm:\n\n```bash\nnpm install next-transition-bar\n```\n\nOr if you prefer using yarn:\n\n```bash\nyarn add next-transition-bar\n```\n\n## Usage\n\nStart by importing the package:\n\n```js\nimport NextTransitionBar from 'next-transition-bar';\n```\n\n### Integration with `app/layout.js` (for `app` folder structure)\n\nInclude `\u003cNextTransitionBar /\u003e` within the `return()` statement inside the `\u003cbody\u003e\u003c/body\u003e` of your `RootLayout()`:\n\n```js\nimport NextTransitionBar from 'next-transition-bar';\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody\u003e\n        \u003cNextTransitionBar /\u003e\n        {children}\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n### Integration with `pages/_app.js` (for `pages` folder structure)\n\nTo render, add `\u003cNextTransitionBar /\u003e` within the `return()` statement in `MyApp()`:\n\n```js\nimport NextTransitionBar from 'next-transition-bar';\n\nexport default function MyApp({ Component, pageProps }) {\n  return (\n    \u003c\u003e\n      \u003cNextTransitionBar /\u003e\n      \u003cComponent {...pageProps} /\u003e;\n    \u003c/\u003e\n  );\n}\n```\n\n### Importing nprogress instance\n\nTo import `nprogress` from 'next-transition-bar':\n\n```js\nimport { nprogress } from 'next-transition-bar';\n```\n\nor both\n\n```js\nimport NextTransitionBar, { nprogress } from 'next-transition-bar';\n```\n\n### Default Configuration\n\nIf no props are passed to `\u003cNextTransitionBar /\u003e`, the package applies the following default configuration:\n\n```jsx\n\u003cNextTransitionBar\n  color=\"#29d\"\n  initialPosition={0.08}\n  trickleSpeed={200}\n  height={3}\n  trickle={true}\n  showSpinner={true}\n  easing=\"ease\"\n  speed={200}\n  shadow=\"0 0 10px #29d, 0 0 5px #29d\"\n  template='\u003cdiv class=\"bar\" role=\"bar\"\u003e\u003cdiv class=\"peg\"\u003e\u003c/div\u003e\u003c/div\u003e\n            \u003cdiv class=\"spinner\" role=\"spinner\"\u003e\u003cdiv class=\"spinner-icon\"\u003e\u003c/div\u003e\u003c/div\u003e'\n  zIndex={1600}\n  showAtBottom={false}\n  isRTL={false}\n  nonce={undefined}\n  transformCSS={(css) =\u003e \u003cstyle nonce={undefined}\u003e{css}\u003c/style\u003e}\n/\u003e\n```\n\n- `color`: Change the default color of the top loader.\n- `initialPosition`: Adjust the initial position of the top loader (in percentage, e.g., `0.08 = 8%`).\n- `trickleSpeed`: Incremental delay speed in milliseconds.\n- `speed`: Animation speed for the top loader in milliseconds.\n- `easing`: Animation settings using easing (a CSS easing string).\n- `height`: Height of the top loader in pixels.\n- `trickle`: Auto-incrementing behavior for the top loader.\n- `showSpinner`: Toggle spinner visibility.\n- `shadow`: A smooth shadow for the top loader (set to `false` to disable it).\n- `template`: Include custom HTML attributes for the top loader.\n- `zIndex`: Define zIndex for the top loader.\n- `showAtBottom`: Display the top loader at the bottom (increase height to ensure visibility on mobile devices).\n- `isRTL`: Change the direction of the loader.\n- `nonce`: The nonce attribute to use for the `style` tag.\n- `transformCSS`: This is useful if you want to use a different style or minify the CSS.\n\nExperience a sleek and visually appealing progress bar with **next-transition-bar**. Customize it to suit your application's unique style and provide users with a delightful journey through your Next.js app.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevmahmud%2Fnext-transition-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevmahmud%2Fnext-transition-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevmahmud%2Fnext-transition-bar/lists"}