Update linear progress to new NTC guidelines

[aksdog]

Description

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

• New animations
• Rounded corners
• A dot at the end of the bar.

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]

@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]

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]

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:

mpi_handbrake.mp4