Skip to content

Instantly share code, notes, and snippets.

@ryanzec
Created June 11, 2026 18:55
Show Gist options
  • Select an option

  • Save ryanzec/2b756f28b9d1d6642d40f9d61c35e9a3 to your computer and use it in GitHub Desktop.

Select an option

Save ryanzec/2b756f28b9d1d6642d40f9d61c35e9a3 to your computer and use it in GitHub Desktop.
You are tasked to create the new progress bar component in @projects/shared-ui/src/lib/core/progress-bar/ the feature are:
# Color
the main / unfill background must be fixed to using the neutral colors but ther filled part will be controlled by a `color` input that can be any of the AllComponentsColors (defaulting to primary)
# Shape
there needs to be a `shape` input that can either be `pill` (default) or `rounded`. when `pill`, the entire component needs the pill border radius, when `rounded` is should use the xs radius.
# Size
While the width should always be 100% to let the parent control it, the height needs to be controlled by a `size` input that can be either `base` (default), `sm`, or `lg`. When `base`, the height should use the `--sizing-13xs`, when `sm` it should use the `--sizing-14xs`, and when `lg`, it should be `--sizing-12xs`
# Fill
the fill percentage it to be controlled by a `percentage` input that is a number between 0 and 100, you should clamp the effective value to that range.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment