Profectus / features/bars/bar
features/bars/bar ​
This is a feature that represents some sort of progress. This could be progress towards a goal, a cooldown, a countdown, etc. They are rendered as either horizontal or vertical bars that fill in to represent that progres as a percentage. The direction represents which side the fill will expand to. For example, using Direction.Right means at 50% the left half will be filled, and it'll reach the right side only at 100%. That is to say, it fills to the right.
ts
const points = createResource("points");
const bar = createBar(() => ({
direction: Direction.Right,
width: 100,
height: 20,
progress: computed(() => Decimal.div(points.value, 100))
}));This is a highly customizable feature with separate CSS styling for the entire bar, the outline, the fill, and the text (if there's a label over the bar). They're all optional, but a common use case is customizing the colors of the bar:
ts
const bar = createBar(() => ({
...,
fillStyle: {
background: "green"
}
}));