[Feature Request] Loading Methods for Loading Types

[Daeluse]

Do you want to request a feature or report a bug?

This is a Feature Request for the addition of loading methods to the loading types already presented.

Feature Request

The specifications for the Material Loading Indicators can be found at the following link.
https://material.google.com/components/progress-activity.html#progress-activity-types-of-indicators

For both types of loaders, two methods exist: Determinate and Indeterminate.

In addition to these main types, Linear has two extended types: Determinate Buffer and Indeterminate Query.

Indeterminate specifies that the animation of the loader is infinite and continues until the loader is resolved, this is the current method of the loaders.

Determinate specifies that the animation of the loader is based on data-bound values. If only a current value is specified, that value is a percentage out of 100. If two values are specified, one should be a current value and one should be a maximum value to calculate a percentage.

All methods specified are currently supported by the Angular 2 Material project.
https://www.npmjs.com/package/@angular2-material/progress-bar
https://www.npmjs.com/package/@angular2-material/progress-circle

What is the expected behavior?

The API for the loading service should be extended to allow for the method of loading for a particular context container to be changed as well as the progress value for the indicator.

This would allow for something similar to the following API.

constructor(private viewContainerRef: ViewContainerRef, private _loadingService: TdLoadingService) {
    if (!_loadingService.getContextContainer('pageLoader')) {
        let options: ILoadingOptions = {
            name: 'pageLoader',
            type: LoadingType.Circular,
            method: LoadingMethod.Determinate
        };
        this._loadingService.createOverlayComponent(options, viewContainerRef);
    }

    // The XHR Upload Allows Progress Polling Which Returns A Number
    this._fileUploadService.progress.subscribe(res => {
        this._loadingService.setValue('pageLoader', res)
    }
}

registerLoading() {
    this._loadingService.register('pageLoader')
}

resolveLoading() {
    this._loadingService.resolve('pageLoader')
}

fileUploadEvent(file: File){
    this._loadingService.setValue('pageLoader', 0)
    this.registerLoading();

    // Begin XHR Upload
            this.resolveLoading(); // On Completion
    // End XHR Upload
}

What is the motivation / use case for changing the behavior?

In many instances applications have enough information to provide an estimation of progress for a particular action. The current state of the loader does not allow us to display that progress.

[emoralesb05]

Hey @Daeluse,
Thanks for using covalent and thinking of ways to improve it. This is a really good idea for another iteration of tdLoading. After @covalent@0.7.0 is out which focuses in rc7 upgrades, we are going to start working on new components + improvements and going to take this one into account.

👍

[emoralesb05]

Added in #85