{"id":31055265,"url":"https://github.com/camera-2018/vitepress-plugin-bprogress","last_synced_at":"2025-09-15T04:41:10.739Z","repository":{"id":309030148,"uuid":"1034940133","full_name":"camera-2018/vitepress-plugin-bprogress","owner":"camera-2018","description":"vitepress-plugin-bprogress","archived":false,"fork":false,"pushed_at":"2025-08-09T11:38:54.000Z","size":43,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-09T12:14:32.303Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/camera-2018.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,"zenodo":null}},"created_at":"2025-08-09T10:01:55.000Z","updated_at":"2025-08-09T11:38:57.000Z","dependencies_parsed_at":"2025-08-09T12:14:45.584Z","dependency_job_id":"9918ed8c-9d66-450b-ac35-9f3d7551e63a","html_url":"https://github.com/camera-2018/vitepress-plugin-bprogress","commit_stats":null,"previous_names":["camera-2018/vitepress-plugin-bprogress"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/camera-2018/vitepress-plugin-bprogress","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camera-2018%2Fvitepress-plugin-bprogress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camera-2018%2Fvitepress-plugin-bprogress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camera-2018%2Fvitepress-plugin-bprogress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camera-2018%2Fvitepress-plugin-bprogress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/camera-2018","download_url":"https://codeload.github.com/camera-2018/vitepress-plugin-bprogress/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camera-2018%2Fvitepress-plugin-bprogress/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275207329,"owners_count":25423891,"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-09-15T02:00:09.272Z","response_time":75,"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":[],"created_at":"2025-09-15T04:41:09.269Z","updated_at":"2025-09-15T04:41:10.724Z","avatar_url":"https://github.com/camera-2018.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vitepress-plugin-bprogress\n\nA beautiful loading progress bar plugin for VitePress that integrates seamlessly with VitePress themes using [@bprogress/core](https://bprogress.dev).\n\n## ✨ Features\n\n- 🚀 **Fast \u0026 Lightweight** - Minimal bundle size with optimal performance\n- 🎨 **Theme Integration** - Automatically uses VitePress theme colors\n- 🌗 **Dark Mode Support** - Seamlessly adapts to light/dark themes\n- 📱 **Mobile Friendly** - Works perfectly on all devices\n- ⚙️ **Highly Configurable** - Customize speed, easing, and appearance\n- 🔧 **Easy Setup** - Simple one-line installation\n\n## 📦 Installation\n\n```bash\nnpm install vitepress-plugin-bprogress\n# or\npnpm add vitepress-plugin-bprogress\n# or\nbun add vitepress-plugin-bprogress\n```\n\n## 🚀 Quick Start\n\n### Method 1: Theme Integration (Recommended)\n\nCreate or update your theme file at `.vitepress/theme/index.ts`:\n\n```ts\nimport DefaultTheme from 'vitepress/theme'\nimport vitepressBprogress from 'vitepress-plugin-bprogress'\n// Import CSS styles (both imports work)\nimport 'vitepress-plugin-bprogress/style.css'\n// or\n// import 'vitepress-plugin-bprogress/style'\nimport type { Theme } from 'vitepress'\n\nexport default {\n  extends: DefaultTheme,\n  enhanceApp(ctx) {\n    vitepressBprogress(ctx)\n  }\n} satisfies Theme\n```\n\n### Method 2: VitePress Config + Theme\n\nConfigure VitePress in `.vitepress/config.ts`:\n\n```ts\n// .vitepress/config.ts\nimport { defineConfig } from 'vitepress'\n\nexport default defineConfig({\n  // ... your config\n  ssr: {\n    noExternal: ['vitepress-plugin-bprogress']\n  }\n})\n```\n\nAnd setup in your theme file `.vitepress/theme/index.ts`:\n\n```ts\nimport DefaultTheme from 'vitepress/theme'\nimport vitepressBprogress from 'vitepress-plugin-bprogress'\n// Import CSS styles (both imports work)\nimport 'vitepress-plugin-bprogress/style.css'\n// or\n// import 'vitepress-plugin-bprogress/style'\nimport type { Theme } from 'vitepress'\n\nexport default {\n  extends: DefaultTheme,\n  enhanceApp(ctx) {\n    vitepressBprogress(ctx)\n  }\n} satisfies Theme\n```\n\nThat's it! The progress bar will automatically show during route changes in your VitePress site.\n\n## ⚙️ Configuration\n\nThe plugin comes with sensible defaults but can be customized:\n\n### Default Settings\n\n```ts\n{\n  showSpinner: false,     // No spinner for clean look\n  speed: 400,            // Smooth 400ms animations\n  easing: 'linear',      // Linear easing\n  parent: '.Layout'      // Mounted on VitePress Layout\n}\n```\n\n### Custom Configuration\n\n```ts\nimport DefaultTheme from 'vitepress/theme'\nimport vitepressBprogress from 'vitepress-plugin-bprogress'\n// Import CSS styles (both imports work)\nimport 'vitepress-plugin-bprogress/style.css'\n// or\n// import 'vitepress-plugin-bprogress/style'\nimport type { Theme } from 'vitepress'\n\nexport default {\n  extends: DefaultTheme,\n  enhanceApp(ctx) {\n    const bProgress = vitepressBprogress(ctx)\n    \n    // Custom configuration (optional)\n    if (bProgress) {\n      bProgress.configure({\n        showSpinner: true,      // Show loading spinner\n        speed: 300,            // Animation speed in ms\n        easing: 'ease-out',    // CSS easing function\n        minimum: 0.1,          // Minimum progress (0-1)\n        trickle: true,         // Auto increment\n        trickleSpeed: 200,     // Trickle speed\n        direction: 'ltr'       // Progress direction\n      })\n    }\n  }\n} satisfies Theme\n```\n\n## 🎨 Theme Integration\n\nThe plugin automatically integrates with VitePress themes:\n\n- **🎨 Colors**: Uses `--vp-c-brand-1` for progress bar color\n- **🌗 Dark Mode**: Automatically adapts to theme changes  \n- **📐 Z-Index**: Uses `--vp-z-index-layout-top` for proper layering\n\n## 🎯 Custom Styling\n\nOverride CSS variables for further customization:\n\n```css\n:root {\n  --bprogress-color: #ff6b6b;     /* Custom color */\n  --bprogress-height: 4px;        /* Thicker progress bar */\n}\n\n/* Fine-grained control */\n.bprogress .bar {\n  background: linear-gradient(90deg, #ff6b6b, #4ecdc4) !important;\n}\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamera-2018%2Fvitepress-plugin-bprogress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcamera-2018%2Fvitepress-plugin-bprogress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamera-2018%2Fvitepress-plugin-bprogress/lists"}