search

material-components / material-web

Material Design Web Components
https://material-web.dev
Apache License 2.0
8.94k stars 842 forks source link

Update linear progress to new NTC guidelines #5451

Open aksdog opened 4 months ago

aksdog commented 4 months ago

Description

The new linear progress bar implemented in Material Design 3 is not yet present in material-web. It contains:

This is needed to ensure material-web is fully compliant with Material Design specs.

For more details: https://github.com/material-components/material-web/assets/136392184/51822daf-7c43-4295-a0be-56f18cb30c29

palexdev commented 3 weeks ago

@asyncLiz May I ask why there is such a discrepancy? The guidelines show a specific animation for the indeterminate bar, but every single implementation (flutter, web, etc.) show a completely different one It's quite hard to replicate the original animation without having its specifics, and of course the guidelines do not mention anything about animations I've also tried using the values here, but they make no sense, the resulting animation is broken, but I may be doing something wrong.

asyncLiz commented 3 weeks ago

why there is such a discrepancy?

Some components were recently re-designed, so most implementations are still on the old one, including this project.

the guidelines do not mention anything about animations

Unfortunately there's no published component specs for motion (yet!). Internally we work closely with motion designers for the values, but that isn't formally published outside of the CSS you see here.

palexdev commented 3 weeks ago

why there is such a discrepancy?

Some components were recently re-designed, so most implementations are still on the old one, including this project.

the guidelines do not mention anything about animations

Unfortunately there's no published component specs for motion (yet!). Internally we work closely with motion designers for the values, but that isn't formally published outside of the CSS you see here.

I see, I hope the specs will come out soon I tried my best to replicate the animation and this was the closest attempt so far:

https://github.com/material-components/material-web/assets/16880178/e19a99e6-df33-4830-af76-a9e0c4dd3656