Skip to content

Comments

Make progress bar's styling customizable via CSS properties#1506

Open
eelcoj wants to merge 1 commit intohotwired:mainfrom
Rails-Designer:custom-progress-bar
Open

Make progress bar's styling customizable via CSS properties#1506
eelcoj wants to merge 1 commit intohotwired:mainfrom
Rails-Designer:custom-progress-bar

Conversation

@eelcoj
Copy link

@eelcoj eelcoj commented Feb 16, 2026

Add CSS custom properties to control the progress bar's appearance instead of overriding. All properties default to the original values to maintain backwards compatibility.

Example:

:root {
  /* Customize appearance with rounded corners and shadow */
  --progress-bar-top: 1rem;
  --progress-bar-height: 4px;
  --progress-bar-background-color: #6366f1; /* an indigo color instead */
  --progress-bar-border-radius: 2px;
  --progress-bar-box-shadow: 0 1px 2px rgba(99 102 241 / .1);
}

Add CSS custom properties to control the progress bar's appearance instead of
overriding. All properties default to the original values to maintain backwards compatibility.

Example:
```css
:root {
  /* Customize appearance with rounded corners and shadow */
  --progress-bar-top: 1rem;
  --progress-bar-height: 4px;
  --progress-bar-background-color: #6366f1; /* an indigo color instead */
  --progress-bar-border-radius: 2px;
  --progress-bar-box-shadow: 0 1px 2px rgba(99 102 241 / .1);
}
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant