https://github.com/1boch1/svelte-achievements-bar
Svelte component that displays a progress bar with icons and texts, indicating the progress of various achievements
https://github.com/1boch1/svelte-achievements-bar
achievements-system progress-bar reward-bar reward-system svelte
Last synced: 7 months ago
JSON representation
Svelte component that displays a progress bar with icons and texts, indicating the progress of various achievements
- Host: GitHub
- URL: https://github.com/1boch1/svelte-achievements-bar
- Owner: 1boch1
- License: isc
- Created: 2024-07-23T15:12:41.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-09-23T21:22:32.000Z (9 months ago)
- Last Synced: 2024-11-29T23:35:12.169Z (7 months ago)
- Topics: achievements-system, progress-bar, reward-bar, reward-system, svelte
- Language: Svelte
- Homepage: https://www.npmjs.com/package/svelte-achievements-bar
- Size: 217 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-achievements-bar
`svelte-achievements-bar` is a customizable Svelte component that displays a progress bar with icons and text, indicating the progress of various achievements. The component utilizes the `lucide-svelte` library for icons.
## Result
## Technologies Used
- **Svelte**: The front-end framework for building the component.
- **lucide-svelte**: A library for using Lucide icons in Svelte components.
- **Vite**: For module bundling and handling dynamic imports.
## Installation
To use the `svelte-achievements-bar` component in your project, you need to install it along with its dependencies:
```bash
npm install svelte-achievements-bar lucide-svelte
```
## Usage
Here is a basic example of how to use the `svelte-achievements-bar` component in your Svelte application.
### App.svelte
```svelte
import AchievementsBar from 'svelte-achievements-bar';
let achievements = [
{ icon: 'skull', text: 'Start' },
{ icon: 'album', text: 'Intermediate' },
{ icon: 'usb', text: 'Advanced' }
];
let progress = 1.3; // This means the user has completed the first achievement
```
### Props
- `achievements`: An array of achievement objects. Each object should contain an `icon` and `text` property.
- `icon`: The name of the icon to display (from Lucide).
- `text`: The text to display under the icon.
- `barHeight`: The height of the progress bar. Default is `'20px'`.
- `iconSize`: The size of the icons. Default is `'40px'`.
- `textSize`: The size of the text under the icons. Default is `'16px'`.
- `iconStroke`: The stroke width of the icons. Default is `1.5`.
- `iconColor`: The color of the icons. Default is `'#050505'`.
- `iconLitColor`: The color of the lit icons (line color).
- `bgColor`: The background color of the progress bar. Default is `'#8C93A8'`.
- `mainColor`: The color of the progress bar and the lit icons. Default is `'#4CAF50'`.
- `progress`: The current progress as a number from 0 to `(achievements.length - 1)`.
## Examples
### Example with Custom Styling
```svelte
import AchievementsBar from 'svelte-achievements-bar';
let achievements = [
{ icon: 'skull', text: 'Start' },
{ icon: 'album', text: 'Intermediate' },
{ icon: 'usb', text: 'Advanced' }
];
let progress = 2;
```
## Explanation
- **Dynamic Icon Loading**: The icons are dynamically imported using Vite's module bundling. This allows for efficient loading and reduces the initial load time.
- **Progress Bar**: The progress bar visually represents the user's progress through the achievements.
- **Lit Icons**: Icons change their background color based on the user's progress to indicate completed achievements.
- **Customizable Styles**: You can customize the height of the bar, the size and color of the icons, the size of the text, and the colors used for the background and progress bar.
## Styling
The component uses CSS variables for styling, which allows for easy customization:
- `--bar-height`: Height of the progress bar.
- `--bg-color`: Background color of the progress bar and icons.
- `--main-color`: Color of the progress bar and lit icons.
- `--icon-size`: Size of the icons.
- `--text-size`: Size of the text.
```css
.progress-bar-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.progress-bar-wrapper {
width: 100%;
position: relative;
display: flex;
align-items: center;
}
.progress-bar {
background-color: var(--bg-color);
border-radius: 2vw;
height: var(--bar-height);
width: 100%;
position: relative;
}
.progress {
background-color: var(--main-color);
height: 100%;
width: 0;
transition: width 0.3s;
border-radius: 2vw;
}
.achievements {
display: flex;
justify-content: space-between;
width: 100%;
position: absolute;
}
.achievement {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
}
.icon {
padding: calc(var(--icon-size) / 2.5);
border-radius: 50%;
background-color: var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s;
}
.icon.lit {
background-color: var(--main-color);
}
.text {
font-size: var(--text-size);
position: absolute;
margin-top: calc(var(--icon-size) * 0.8);
}
```
## Contributions
Contributions are welcome! Please open an issue or submit a pull request on GitHub.
## Support
If you encounter any issues or have any questions, feel free to open an issue on GitHub.