[Feat] Toaster: support progress bars

[undefined-moe]

Environment

N/A

Feature request

Are there any future plans for creating a progress bar under the a toast?
There are two use cases:

1. Loading items (showing a persistent toast, only changing the progress bar, instead of emitting lots of toasts)
2. Indicating how long the toast are going to close (a decreasing progress)

Examples

const toaster = Toaster.create(...);
const id = toaster.show({ ..., progress: 0.1 });
toaster.get(id).setProgress(0.2); // In some callbacks

[rafaellichen]

It's possible to implement a toast with progress bar element inside yourself; reference the example here.
You can try it out here by clicking the "Upload file" button.

[adidahiya]

@rafaellichen is right, it's even demonstrated in our own docs-app. Check out those links above.

[undefined-moe]

Oh it might be mistaken.
I'd like to have a progress bar at the bottom of the toaster, instead of displaying a progress inside the body section, which makes it hard to display progress with some text.

and here's a demo: https://stackblitz.com/edit/angular-snack-bar-with-progress-bar-dmxhfy?file=app/snack-bar/snack-bar.component.ts

[adidahiya]

"Snack bar" from your stackblitz:

This is just a slight difference in styling. If you want to render a progress bar like this, you can do so with a few lines of custom CSS. The Blueprint design system doesn't really support visuals like that progress bar on the edge of a container out-of-the-box, so you'll have to write some CSS to get there, but there's nothing stopping you from doing so.