feat(progress-bar): add Progress Bar

[paulstelzer]

Short description of what this resolves:

Adds a progress bar component to Ionic 4. Animation is based on MD spec (https://material.io/design/components/progress-indicators.html#linear-progress-indicators )

Feature Request: #16558

BASIC

Preview

[manucorporat]

I like it a lot! we could definitely merge it after 4.0 final is released!

We try to avoid nested SCSS rules, could you try to flatten that to at most 1 level nested?

[brandyscarney]

Very nice! I'll review this soon.

[brandyscarney]

This is looking really good! I added some comments for places the docs could improve but it isn't critical. 🙂

My only concern with the API is using type, do you think we will have issues with this interfering with native? @manucorporat @adamdbradley. I believe we were calling it indicator in the v3 one.

[manucorporat]

@brandyscarney I like type because it's the "obvious" API, easier to remember imo.
We also use type in other components: ripple-effect, menu

While type is a property of button and input, it's not a global HTML attribute.

[paulstelzer]

@brandyscarney Thanks for your review! What about the css variables? @manucorporat and I discussed a lot of it yesterday, at the end, this is my favorite (it's not in this PR already):

* @prop --progress-bar-color: Color of the progress bar (foreground)
* @prop --buffer-bar-color: Color of the buffer bar (background)
* @prop --buffer-circle-color: Color of the buffer circles

[manucorporat]

@paulstelzer @brandyscarney I would:

1. remove --buffer-circle-color: start with a small API, does not seem like a common use case, we can add it later
2. Add --color, and --background:

  --color: #{ion-color(primary, base)};
  --background: #{ion-color(primary, base, 0.2)};
  --progress-bar-background: var(--color);
  --buffer-bar-background: var(--background);

[brandyscarney]

I think we should keep it simple like the following:

--background: #{ion-color(primary, base, 0.2)};

--progress-background:  #{ion-color(primary, base)};
--buffer-background: var(--background);

which would allow for things like this to come in later:

--progress-background-disabled
--buffer-background-disabled

Also, avoid using bar since material design also has a circular indicator and I think these could be shared with it.

[manucorporat]

LTGM!!!