Add loading bar to UltimaNG

[centai]

Hello,

I want to add a loading bar on the very top of the page, which is shown when data is loaded.

Basically like on angular.io website:



Do you have an approach how to achieve that or is there any plan to add such a function as a standard feature to UltimaNG?

[DarthMaul]

Hi,

We are not planning to add some loader to UltimaNG but you can add it according to your project. You can add it to top of your topbar component.

This can be helpfull

https://medium.com/beautiful-angular/sh ... 0fca86afef

Regards

[centai]

Thank you. This helps me a lot already!

[DarthMaul]

Great glad to hear that.

Regards

[tengel92]

This may be of help to you as well. I created a load-bar component that is exactly the same as the splash screen. I use this when making an HTTP request to a REST API and it's loading. When it's loading it'll show the load bar until the request completes it'll stop being visible.

My load-bar.component.ts

Code: Select all

import { Component, Input } from '@angular/core';

@Component({
    selector: 'load-bar',
    template: `
        <div *ngIf="visible">
            <div class="splash-screen">   
                <div class="load-bar">
                    <div class="bar"></div>
                    <div class="bar"></div>
                    <div class="bar"></div>
                </div>
            </div>
        </div>
    `
})
export class LoadBarComponent { 
    @Input() visible = true; 
}

acknowledgement.component.html

Code: Select all

<load-bar [visible]="loading"></load-bar>
<!--there is a datatable below-->

acknowledgement.component.ts

Code: Select all

    ngOnInit() {
        this.loading = true;
        this._service.getAcknowledgementUrl(this.selectedAPIendpoint, this.selectedShowAcknowledged)
            .subscribe(
                //successfully get and map data to variable
                acknowledgements => { this.acknowledgements = acknowledgements; },
                //error
                error => { this.errorMessage = <any>error; this.loading = false; },
                //completion of request. In this stops loading icon
                () => this.loading = false);
    }

[DarthMaul]

Thank you for sharing cheers!