diff --git a/README.md b/README.md index b94e26f..86b41e8 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,9 @@ A modern web service to generate and embed customizable progress bars anywhere! Create beautiful progress bars with our intuitive UI and embed them in your projects. -🌐 **[Try it live](https://progress-bars-eight.vercel.app)** +🌐 **[Try it live](https://progress-bars.entcheneric.com)** -![Progress Bar Generator](https://progress-bars-eight.vercel.app/bar?progress=75&color=%232563eb&height=20&width=200&borderRadius=10) +![Progress Bar Generator](https://progress-bars.entcheneric.com/bar?progress=75&color=%232563eb&backgroundColor=%23f3f4f6&height=50&width=800&borderRadius=10&striped=false&animated=false&animationSpeed=1&initialAnimationSpeed=1&colorGradient=linear-gradient%2890deg%2C+%23ec4899%2C+%23d946ef%2C+%23a855f7%29) ## Features @@ -21,73 +21,81 @@ A modern web service to generate and embed customizable progress bars anywhere! Simply use our URL with query parameters to create your progress bar: ``` -https://progress-bars-eight.vercel.app/bar?progress=75&color=%232563eb +https://progress-bars.entcheneric.com/bar?progress=75&color=%232563eb&width=800&height=50 ``` -Or visit our [web interface](https://progress-bars-eight.vercel.app) to customize your progress bar visually. +Or visit our [web interface](https://progress-bars.entcheneric.com) to customize your progress bar visually. ## Usage Examples -### Basic Progress Bar (75% Complete) +### Basic Progress Bar (75% Complete, Animated Gradient) ``` -https://progress-bars-eight.vercel.app/bar?progress=75 +https://progress-bars.entcheneric.com/bar?progress=75&width=800&height=50&colorGradient=linear-gradient(90deg,%20%230ea5e9,%20%232563eb,%20%234f46e5)&striped=true&animated=true&animationSpeed=1.5 ``` +![Awesome Progress](https://progress-bars.entcheneric.com/bar?progress=75&width=800&height=50&colorGradient=linear-gradient(90deg,%20%230ea5e9,%20%232563eb,%20%234f46e5)&striped=true&animated=true&animationSpeed=1.5) + ### Custom Styled Progress Bar ``` -https://progress-bars-eight.vercel.app/bar?progress=80&color=%232563eb&backgroundColor=%23f8fafc&height=30&width=200&borderRadius=10&striped=true&animated=true&animationSpeed=1.5 +https://progress-bars.entcheneric.com/bar?progress=80&color=%232563eb&backgroundColor=%23f8fafc&height=50&width=800&borderRadius=10&striped=true&animated=true&animationSpeed=1.5 ``` +![Custom Style](https://progress-bars.entcheneric.com/bar?progress=80&color=%232563eb&backgroundColor=%23f8fafc&height=50&width=800&borderRadius=10&striped=true&animated=true&animationSpeed=1.5) + ### Use in Markdown ```markdown -![Progress](https://progress-bars-eight.vercel.app/bar?progress=75&color=%2316a34a) +![Progress](https://progress-bars.entcheneric.com/bar?progress=75&color=%2316a34a&width=800&height=50) ``` ### Use in HTML ```html -Progress Bar +Progress Bar ``` ## Customization Parameters All parameters are optional and have sensible defaults: -| Parameter | Default | Description | Example | -| --------------- | ------- | ---------------------------- | --------------------------- | -| progress | 0 | Progress value (0-100) | `progress=75` | -| color | #2563eb | Color of the progress bar | `color=%232563eb` | -| backgroundColor | #f3f4f6 | Background color of the bar | `backgroundColor=%23f8fafc` | -| height | 20 | Height in pixels | `height=30` | -| width | 200 | Width in pixels | `width=200` | -| borderRadius | 10 | Border radius in pixels | `borderRadius=20` | -| striped | false | Add striped effect | `striped=true` | -| animated | false | Add animation to the bar | `animated=true` | -| animationSpeed | 1 | Speed multiplier (0.1-5) | `animationSpeed=2.5` | +| Parameter | Default | Description | Example | +| --------------------- | ------- | ------------------------------------------------------ | ----------------------------------------------------------------------------------- | +| progress | 0 | Progress value (0-100) | `progress=75` | +| color | #2563eb | Color of the progress bar | `color=%232563eb` | +| colorGradient | - | Custom gradient for the progress bar | `colorGradient=linear-gradient(90deg%2C%20%230ea5e9%2C%20%232563eb%2C%20%234f46e5)` | +| backgroundColor | #f3f4f6 | Background color of the bar | `backgroundColor=%23f8fafc` | +| height | 20 | Height in pixels (5-500) | `height=30` | +| width | 200 | Width in pixels (10-3000) | `width=200` | +| borderRadius | 10 | Border radius in pixels (0-1000) | `borderRadius=20` | +| striped | false | Add striped effect | `striped=true` | +| animated | false | Add animation to stripes or pulse effect | `animated=true` | +| animationSpeed | 1 | Speed multiplier for stripe/pulse animation | `animationSpeed=2.5` | +| initialAnimationSpeed | 1 | Speed of initial progress fill animation (0 = instant) | `initialAnimationSpeed=0.5` | ## Common Use Cases ### GitHub README Progress ```markdown -![Project Status](https://progress-bars-eight.vercel.app/bar?progress=80&color=%2316a34a) +![Project Status](https://progress-bars.entcheneric.com/bar?progress=80&color=%2316a34a&width=800&height=50) ``` ### Documentation Status ```markdown -Documentation: ![60% Complete](https://progress-bars-eight.vercel.app/bar?progress=60&color=%23ea580c) +Documentation: ![60% Complete](https://progress-bars.entcheneric.com/bar?progress=60&color=%23ea580c&width=800&height=50) ``` ### Project Milestones ```markdown -Phase 1: ![Complete](https://progress-bars-eight.vercel.app/bar?progress=100&color=%2316a34a) -Phase 2: ![In Progress](https://progress-bars-eight.vercel.app/bar?progress=45&color=%232563eb) -Phase 3: ![Not Started](https://progress-bars-eight.vercel.app/bar?progress=0&color=%236b7280) +Phase 1: ![Complete](https://progress-bars.entcheneric.com/bar?progress=100&color=%2316a34a&width=800&height=50) +Phase 2: ![In Progress](https://progress-bars.entcheneric.com/bar?progress=45&color=%232563eb&width=800&height=50) +Phase 3: ![Not Started](https://progress-bars.entcheneric.com/bar?progress=0&color=%236b7280&width=800&height=50) ``` ## Tips - Use URL encoding for special characters in colors (e.g., `%232563eb` for `#2563eb`) +- For gradients, encode spaces as `%20` and commas as `%2C` - The service is stateless - perfect for dynamic content - Works in any environment that can display images from URLs - Use the web interface to visually design your perfect progress bar +- Large widths (>1000px) may require horizontal scrolling in some containers ## Contributing @@ -96,3 +104,62 @@ Feel free to contribute! Open issues and PRs are welcome. ## License MIT License - Use it anywhere you like! + +## Advanced Features + +### Gradient Colors +You can use gradients instead of solid colors for more dynamic progress bars: +```markdown +![Gradient Progress](https://progress-bars.entcheneric.com/bar?progress=80&width=800&height=50&colorGradient=linear-gradient(90deg,%20%230ea5e9,%20%232563eb,%20%234f46e5)) +``` + +Example: +![Gradient Progress](https://progress-bars.entcheneric.com/bar?progress=80&width=800&height=50&colorGradient=linear-gradient(90deg,%20%230ea5e9,%20%232563eb,%20%234f46e5)) + +### Initial Animation +Control how the progress bar fills initially: +- Set `initialAnimationSpeed=0` for instant fill +- Use higher values for faster fill animation +- Use lower values for slower fill animation +```markdown +![Animated Fill](https://progress-bars.entcheneric.com/bar?progress=75&initialAnimationSpeed=0.5&width=800&height=50) +``` + +Example: +![Animated Fill](https://progress-bars.entcheneric.com/bar?progress=75&initialAnimationSpeed=0.5&width=800&height=50) + +### Animation Effects +The progress bar can have animated stripes that move from right to left: +1. First enable stripes with `striped=true` +2. Then add animation with `animated=true` +3. Control the animation speed with `animationSpeed` (default: 1) + +```markdown +![Striped Animated](https://progress-bars.entcheneric.com/bar?progress=75&striped=true&animated=true&animationSpeed=1.5&width=800&height=50) +``` + +Example: +![Striped Animated](https://progress-bars.entcheneric.com/bar?progress=75&striped=true&animated=true&animationSpeed=1.5&width=800&height=50) + +Note: The `animated` parameter only affects the stripe animation and requires `striped=true` to work. + +### Size Constraints +- Height: 5px to 500px +- Width: 10px to 3000px +- Border Radius: 0px to 1000px (automatically adjusted for height) + +### Different Styles + +Here are some example combinations: + +High contrast: +![High Contrast](https://progress-bars.entcheneric.com/bar?progress=60&color=%23000000&backgroundColor=%23ffffff&width=800&height=50) + +Extra rounded: +![Extra Rounded](https://progress-bars.entcheneric.com/bar?progress=85&borderRadius=30&width=800&height=50) + +Thin line: +![Thin Line](https://progress-bars.entcheneric.com/bar?progress=45&height=50&width=800&borderRadius=2) + +Sunset gradient with stripes: +![Sunset Gradient](https://progress-bars.entcheneric.com/bar?progress=90&width=800&height=50&colorGradient=linear-gradient(90deg,%20%23f97316,%20%23db2777,%20%237c3aed)&striped=true) diff --git a/__tests__/page.test.jsx b/__tests__/page.test.jsx index 97cd948..3c61cd3 100644 --- a/__tests__/page.test.jsx +++ b/__tests__/page.test.jsx @@ -116,7 +116,7 @@ describe('Progress Bar Generator', () => { describe('URL Generation and Copying', () => { it('generates correct URL with current parameters', () => { render() - const urlInput = screen.getByDisplayValue(/^https:\/\/progress-bars-eight\.vercel\.app\/bar\?/) + const urlInput = screen.getByDisplayValue(/^https:\/\/progress-bars\.entcheneric\.com\/bar\?/) expect(urlInput.value).toContain('progress=75') expect(urlInput.value).toContain('color=%232563eb') }) @@ -130,7 +130,7 @@ describe('Progress Bar Generator', () => { }) expect(navigator.clipboard.writeText).toHaveBeenCalledWith( - expect.stringMatching(/^https:\/\/progress-bars-eight\.vercel\.app\/bar\?/) + expect.stringMatching(/^https:\/\/progress-bars\.entcheneric\.com\/bar\?/) ) }) diff --git a/app/layout.tsx b/app/layout.tsx index 20145f3..872fe57 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -23,7 +23,7 @@ export const metadata: Metadata = { openGraph: { title: 'Progress Bar Generator', description: 'Create beautiful, customizable progress bars for your projects with just a few clicks', - url: 'https://progress-bars-eight.vercel.app', + url: 'https://progress-bars.entcheneric.com', siteName: 'Progress Bar Generator', type: 'website', images: [ diff --git a/app/page.tsx b/app/page.tsx index 3b4d018..1c01af9 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -63,7 +63,7 @@ export default function Home() { colorGradient: params.colorGradient || undefined, }; - const baseUrl = 'https://progress-bars-eight.vercel.app/bar' + const baseUrl = 'https://progress-bars.entcheneric.com/bar' const queryParams = new URLSearchParams({ progress: safeValues.progress.toString(), color: safeValues.color, diff --git a/package-lock.json b/package-lock.json index b2599b4..078d729 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.476.0", - "next": "15.2.0", + "next": "15.2.4", "node-mocks-http": "^1.16.2", "react": "^19.0.0", "react-dom": "^19.0.0", @@ -1711,9 +1711,10 @@ } }, "node_modules/@next/env": { - "version": "15.2.0", - "resolved": "https://registry.npmjs.org/@next/env/-/env-15.2.0.tgz", - "integrity": "sha512-eMgJu1RBXxxqqnuRJQh5RozhskoNUDHBFybvi+Z+yK9qzKeG7dadhv/Vp1YooSZmCnegf7JxWuapV77necLZNA==" + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/env/-/env-15.2.4.tgz", + "integrity": "sha512-+SFtMgoiYP3WoSswuNmxJOCwi06TdWE733D+WPjpXIe4LXGULwEaofiiAy6kbS0+XjM5xF5n3lKuBwN2SnqD9g==", + "license": "MIT" }, "node_modules/@next/eslint-plugin-next": { "version": "15.2.0", @@ -1725,12 +1726,13 @@ } }, "node_modules/@next/swc-darwin-arm64": { - "version": "15.2.0", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.2.0.tgz", - "integrity": "sha512-rlp22GZwNJjFCyL7h5wz9vtpBVuCt3ZYjFWpEPBGzG712/uL1bbSkS675rVAUCRZ4hjoTJ26Q7IKhr5DfJrHDA==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.2.4.tgz", + "integrity": "sha512-1AnMfs655ipJEDC/FHkSr0r3lXBgpqKo4K1kiwfUf3iE68rDFXZ1TtHdMvf7D0hMItgDZ7Vuq3JgNMbt/+3bYw==", "cpu": [ "arm64" ], + "license": "MIT", "optional": true, "os": [ "darwin" @@ -1740,12 +1742,13 @@ } }, "node_modules/@next/swc-darwin-x64": { - "version": "15.2.0", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.2.0.tgz", - "integrity": "sha512-DiU85EqSHogCz80+sgsx90/ecygfCSGl5P3b4XDRVZpgujBm5lp4ts7YaHru7eVTyZMjHInzKr+w0/7+qDrvMA==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.2.4.tgz", + "integrity": "sha512-3qK2zb5EwCwxnO2HeO+TRqCubeI/NgCe+kL5dTJlPldV/uwCnUgC7VbEzgmxbfrkbjehL4H9BPztWOEtsoMwew==", "cpu": [ "x64" ], + "license": "MIT", "optional": true, "os": [ "darwin" @@ -1755,12 +1758,13 @@ } }, "node_modules/@next/swc-linux-arm64-gnu": { - "version": "15.2.0", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.2.0.tgz", - "integrity": "sha512-VnpoMaGukiNWVxeqKHwi8MN47yKGyki5q+7ql/7p/3ifuU2341i/gDwGK1rivk0pVYbdv5D8z63uu9yMw0QhpQ==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.2.4.tgz", + "integrity": "sha512-HFN6GKUcrTWvem8AZN7tT95zPb0GUGv9v0d0iyuTb303vbXkkbHDp/DxufB04jNVD+IN9yHy7y/6Mqq0h0YVaQ==", "cpu": [ "arm64" ], + "license": "MIT", "optional": true, "os": [ "linux" @@ -1770,12 +1774,13 @@ } }, "node_modules/@next/swc-linux-arm64-musl": { - "version": "15.2.0", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.2.0.tgz", - "integrity": "sha512-ka97/ssYE5nPH4Qs+8bd8RlYeNeUVBhcnsNUmFM6VWEob4jfN9FTr0NBhXVi1XEJpj3cMfgSRW+LdE3SUZbPrw==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.2.4.tgz", + "integrity": "sha512-Oioa0SORWLwi35/kVB8aCk5Uq+5/ZIumMK1kJV+jSdazFm2NzPDztsefzdmzzpx5oGCJ6FkUC7vkaUseNTStNA==", "cpu": [ "arm64" ], + "license": "MIT", "optional": true, "os": [ "linux" @@ -1785,12 +1790,13 @@ } }, "node_modules/@next/swc-linux-x64-gnu": { - "version": "15.2.0", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.2.0.tgz", - "integrity": "sha512-zY1JduE4B3q0k2ZCE+DAF/1efjTXUsKP+VXRtrt/rJCTgDlUyyryx7aOgYXNc1d8gobys/Lof9P9ze8IyRDn7Q==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.2.4.tgz", + "integrity": "sha512-yb5WTRaHdkgOqFOZiu6rHV1fAEK0flVpaIN2HB6kxHVSy/dIajWbThS7qON3W9/SNOH2JWkVCyulgGYekMePuw==", "cpu": [ "x64" ], + "license": "MIT", "optional": true, "os": [ "linux" @@ -1800,12 +1806,13 @@ } }, "node_modules/@next/swc-linux-x64-musl": { - "version": "15.2.0", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.2.0.tgz", - "integrity": "sha512-QqvLZpurBD46RhaVaVBepkVQzh8xtlUN00RlG4Iq1sBheNugamUNPuZEH1r9X1YGQo1KqAe1iiShF0acva3jHQ==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.2.4.tgz", + "integrity": "sha512-Dcdv/ix6srhkM25fgXiyOieFUkz+fOYkHlydWCtB0xMST6X9XYI3yPDKBZt1xuhOytONsIFJFB08xXYsxUwJLw==", "cpu": [ "x64" ], + "license": "MIT", "optional": true, "os": [ "linux" @@ -1815,12 +1822,13 @@ } }, "node_modules/@next/swc-win32-arm64-msvc": { - "version": "15.2.0", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.2.0.tgz", - "integrity": "sha512-ODZ0r9WMyylTHAN6pLtvUtQlGXBL9voljv6ujSlcsjOxhtXPI1Ag6AhZK0SE8hEpR1374WZZ5w33ChpJd5fsjw==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.2.4.tgz", + "integrity": "sha512-dW0i7eukvDxtIhCYkMrZNQfNicPDExt2jPb9AZPpL7cfyUo7QSNl1DjsHjmmKp6qNAqUESyT8YFl/Aw91cNJJg==", "cpu": [ "arm64" ], + "license": "MIT", "optional": true, "os": [ "win32" @@ -1830,12 +1838,13 @@ } }, "node_modules/@next/swc-win32-x64-msvc": { - "version": "15.2.0", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.2.0.tgz", - "integrity": "sha512-8+4Z3Z7xa13NdUuUAcpVNA6o76lNPniBd9Xbo02bwXQXnZgFvEopwY2at5+z7yHl47X9qbZpvwatZ2BRo3EdZw==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.2.4.tgz", + "integrity": "sha512-SbnWkJmkS7Xl3kre8SdMF6F/XDh1DTFEhp0jRTj/uB8iPKoU2bb2NDfcu+iifv1+mxQEd1g2vvSxcZbXSKyWiQ==", "cpu": [ "x64" ], + "license": "MIT", "optional": true, "os": [ "win32" @@ -8251,11 +8260,12 @@ } }, "node_modules/next": { - "version": "15.2.0", - "resolved": "https://registry.npmjs.org/next/-/next-15.2.0.tgz", - "integrity": "sha512-VaiM7sZYX8KIAHBrRGSFytKknkrexNfGb8GlG6e93JqueCspuGte8i4ybn8z4ww1x3f2uzY4YpTaBEW4/hvsoQ==", + "version": "15.2.4", + "resolved": "https://registry.npmjs.org/next/-/next-15.2.4.tgz", + "integrity": "sha512-VwL+LAaPSxEkd3lU2xWbgEOtrM8oedmyhBqaVNmgKB+GvZlCy9rgaEc+y2on0wv+l0oSFqLtYD6dcC1eAedUaQ==", + "license": "MIT", "dependencies": { - "@next/env": "15.2.0", + "@next/env": "15.2.4", "@swc/counter": "0.1.3", "@swc/helpers": "0.5.15", "busboy": "1.6.0", @@ -8270,14 +8280,14 @@ "node": "^18.18.0 || ^19.8.0 || >= 20.0.0" }, "optionalDependencies": { - "@next/swc-darwin-arm64": "15.2.0", - "@next/swc-darwin-x64": "15.2.0", - "@next/swc-linux-arm64-gnu": "15.2.0", - "@next/swc-linux-arm64-musl": "15.2.0", - "@next/swc-linux-x64-gnu": "15.2.0", - "@next/swc-linux-x64-musl": "15.2.0", - "@next/swc-win32-arm64-msvc": "15.2.0", - "@next/swc-win32-x64-msvc": "15.2.0", + "@next/swc-darwin-arm64": "15.2.4", + "@next/swc-darwin-x64": "15.2.4", + "@next/swc-linux-arm64-gnu": "15.2.4", + "@next/swc-linux-arm64-musl": "15.2.4", + "@next/swc-linux-x64-gnu": "15.2.4", + "@next/swc-linux-x64-musl": "15.2.4", + "@next/swc-win32-arm64-msvc": "15.2.4", + "@next/swc-win32-x64-msvc": "15.2.4", "sharp": "^0.33.5" }, "peerDependencies": { diff --git a/package.json b/package.json index d230a39..7563fb1 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.476.0", - "next": "15.2.0", + "next": "15.2.4", "node-mocks-http": "^1.16.2", "react": "^19.0.0", "react-dom": "^19.0.0",