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.
To use the svelte-achievements-bar
component in your project, you need to install it along with its dependencies:
npm install svelte-achievements-bar lucide-svelte
Here is a basic example of how to use the svelte-achievements-bar
component in your Svelte application.
<script>
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
</script>
<AchievementsBar {achievements} {progress} />
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)
.<script>
import AchievementsBar from 'svelte-achievements-bar';
let achievements = [
{ icon: 'skull', text: 'Start' },
{ icon: 'album', text: 'Intermediate' },
{ icon: 'usb', text: 'Advanced' }
];
let progress = 2;
</script>
<AchievementsBar
{achievements}
{progress}
barHeight="30px"
iconSize="50px"
textSize="18px"
iconStroke="2"
iconColor="#ffffff"
bgColor="#333"
mainColor="#ff6347"
/>
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.<style>
.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);
}
</style>
Contributions are welcome! Please open an issue or submit a pull request on GitHub.
If you encounter any issues or have any questions, feel free to open an issue on GitHub.