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?
Add loading bar to UltimaNG
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
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
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
Great glad to hear that.
Regards
Regards
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
acknowledgement.component.html
acknowledgement.component.ts
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;
}
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);
}
Thank you for sharing cheers!
-
- Information
-
Who is online
Users browsing this forum: No registered users and 5 guests