search

taiga-family / taiga-ui

Angular UI Kit and components library for awesome people
https://taiga-ui.dev
Apache License 2.0
3.1k stars 408 forks source link

🚀 - New `tuiProgressGradient` for `ProgressBar` #7088

Open nsbarsukov opened 3 months ago

nsbarsukov commented 3 months ago

Description

Open: https://taiga-ui.dev/components/progress-bar#multicolor

<progress
    color="linear-gradient(to right, var(--tui-support-02), var(--tui-support-14), var(--tui-support-12))"
    max="100"
    tuiProgressBar
    class="progress"
    [value]="fastValue$ | async"
></progress>

https://github.com/taiga-family/taiga-ui/assets/35179038/b6e1712f-6e17-4d56-8608-fb68bd7caf03

It demonstrates the first type of possible gradient progress-gradient-types

This task requires to add the second type too.

Probably, we can add optional pipe/directive (the similar to already existing tuiProgressColorSegments). For example, tuiProgressGradient.

waterplea commented 3 months ago

What we can try to do is make the internal bar full width with CSS: width: 100% !important (works with Chrome, needs to be checked in other browsers) so that gradient and segmented fill is stretched across the entire width of the component. Then we can cut it using clip-path: inset(0 calc(100% - var(--t-progress) 0 0 round var(--tui-radius)) This way we will only need to update the % of the fill through --t-progress CSS variable. The downside is border-radius no longer inherited on the bar and would require a public CSS variable.