feat(md-progress-bar): Create initial ProgressBar implementation.

[josephperrott]

For #40

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.

---

• If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
• If you signed the CLA as a corporation, please let us know the company's name.

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.

---

• If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
• If you signed the CLA as a corporation, please let us know the company's name.

[josephperrott]

I signed it!

[jelbourn]

Looks like you need to rebase again, since these changes came from an earlier commit.

[jelbourn]

Finished first pass of comments.

[hansl]

Could you point to the resource you used to get those percentage for animations? They seem like magic numbers without context.

[josephperrott]

Ack

[jelbourn]

Is it possible at all to go into more detail about what each keyframe animation is actually doing?
Perhaps @traviskaufman could add more info

[traviskaufman]

Sure can 😃

The indeterminate state is essentially made up of two progress bars, one primary (the one that is shown in both the determinate and indeterminate states) and one auxiliary, which essentially mirrors the primary progress bar in appearance but is only shown to assist with the indeterminate animations.

Given the mocks for the indeterminate APIs, you essentially have 4 animations being performed in tandem:

Keyframe Block	Description
primary-indeterminate-translate	Translation of the primary progressbar across the screen
primary-indeterminate-scale	Scaling of the primary progressbar as it's being translated across the screen
auxiliary-indeterminate-translate	Translation of the auxiliary progressbar across the screen
auxiliary-indeterminate-scale	Scaling of the auxiliary progressbar as it's being translated across the screen

Because two different transform animations need to be applied at once, the translation is applied to the outer element and the scaling is applied to the inner element, which provides the illusion necessary to make the animation work.

[josephperrott]

added. I just copied the description you gave into the comment.

[googlebot]

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for the commit author(s). If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.

[googlebot]

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for the commit author(s). If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.

[jelbourn]

The @Input() decorator should go on the getter, otherwise angular is going to directly set the private property (and not use the setter).

[josephperrott]

Not sure I understand what you are saying here.

I dont think it makes sense to put @Input on a getter.

It currently is:

@Input('value') _value: number = 0;
@HostBinding('attr.aria-valuenow') get value_() { return this._value; }

[jelbourn]

It should be

private _value: number = 0;
...
@Input()
get value(): number {
  ...
}

set value(v: number) {
  ...
}

When the @Input is on the private member, the setter is not called when Angular updates value, which isn't what you want. Angular is smart enough to know that putting @Input on a getter or a setter means to simply treat that as the bound property.

[jelbourn]

Needs a fresh rebase

[josephperrott]

Rebased, PTAL

[googlebot]

CLAs look good, thanks!

[googlebot]

CLAs look good, thanks!

[jelbourn]

LGTM

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}