Hi,
is there a loading animation for the datatable available in the ultima theme, like in the default primeng theme?
Regards
Benny
Datatable loading animation
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.
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
As far as I see, the problem is that datatable, tree and autocomplete use the fa-circle-o-notch icon from Font Awesome by default, which does not exist in Material Icons. So you need to replace this with an existing icon like ui-icon-replay with the setting loadingIcon. The other problem is that the classes fa-spin and fa-2x defined by Font Awesome also do not exist in Ultima, but they are used by PrimeNG. So you need to copy them over to Ultima, in order to show the icon spinning and enlarged.
I'm going to post a solution for you that you're free to use if you'd like. I personally like the splash screen loading bar so I devised a way to use that for loading.
First thing is assuming you're using 4.3.0 with the latest CSS. lf you're using an older version this might be easier as I've used this for a while and it took slight more modification on 4.3.0. Either way you'll need to do a few slight modifications to _splash.scss. You will need to remove width: 100%; & position: fixed; from the .splash-screen. (you'll need to revisit this in the index.html. I have this explained below as well) Then remove margin-top:20px from .load-bar. Since you're removing 20px from the load bar you'll need to add padding-bottom: 20px to the .logo. Those are all you need to do to have the splash screen work and display above the datatable during loading. Below is my splash but I have additional changes as my logo is a different size than Ultima and I also changed the colors to reflect the blue-grey theme colors
Once you have that done it'll slightly jack up the initial splash loading screen so in index.html change
to
Everything is good now for the splash screen and load bar so go ahead and create this component.
Then I put this in my component.html
component.ts
First thing is assuming you're using 4.3.0 with the latest CSS. lf you're using an older version this might be easier as I've used this for a while and it took slight more modification on 4.3.0. Either way you'll need to do a few slight modifications to _splash.scss. You will need to remove width: 100%; & position: fixed; from the .splash-screen. (you'll need to revisit this in the index.html. I have this explained below as well) Then remove margin-top:20px from .load-bar. Since you're removing 20px from the load bar you'll need to add padding-bottom: 20px to the .logo. Those are all you need to do to have the splash screen work and display above the datatable during loading. Below is my splash but I have additional changes as my logo is a different size than Ultima and I also changed the colors to reflect the blue-grey theme colors
Code: Select all
.splash-screen {
background-color: #607D8B;
height: 100%;
.splash-container {
padding-top: 250px;
width: 250px;
margin: 0 auto;
text-align: center
}
.logo {
display: inline-block;
vertical-align: middle;
width: 200px;
height: 60px;
background: url("../images/logo2x.png") top left no-repeat;
background-size: 200px 60px;
padding-bottom: 20px;
}
.load-bar {
position: relative;
width: 100%;
height: 6px;
background-color: #ffffff;
}
.bar {
content: "";
display: inline;
position: absolute;
width: 0;
height: 100%;
left: 50%;
text-align: center;
}
.bar:nth-child(1) {
background-color: #558B2F;
animation: loading 3s linear infinite;
}
.bar:nth-child(2) {
background-color: #8BC34A;
animation: loading 3s linear 1s infinite;
}
.bar:nth-child(3) {
background-color: #C5E1A5;
animation: loading 3s linear 2s infinite;
}
@keyframes loading {
from {
left: 50%;
width: 0;
z-index: 100;
}
33.3333% {
left: 0;
width: 100%;
z-index: 10;
}
to {
left: 0;
width: 100%;
}
}
}
Code: Select all
<div class="splash-screen">
Code: Select all
<div class="splash-screen" style="width:100%;position:fixed">
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 AppLoadBarComponent {
@Input() visible = true;
}
Code: Select all
<load-bar [visible]="loading"></load-bar>
<p-dataTable #exportCSV #dt [value]="acknowledgements" [rows]="25" [paginator]="true" [rowsPerPageOptions]="[25,50,100]" [globalFilter]="globalFilter" reorderableColumns="true" expandableRows="true" [responsive]="true" sortField="DataChangePrimaryID"
sortOrder="-1" selectionMode="single" (onRowSelect)="onRowSelect($event)" [(selection)]="selectedAcknowledgement">
Code: Select all
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);
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Ultima overrides the default loader icon to be a material one so [loading]="loading" where loading is true will display it.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 3 guests