Datatable loading animation

Post Reply
benny739
Posts: 6
Joined: 03 Jan 2017, 18:42

15 Aug 2017, 10:30

Hi,

is there a loading animation for the datatable available in the ultima theme, like in the default primeng theme?

Regards
Benny

User avatar
optimus.prime
Prime
Posts: 17686
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

15 Aug 2017, 17:28

There is;

Image

benny739
Posts: 6
Joined: 03 Jan 2017, 18:42

15 Aug 2017, 17:39

Super, but how do I get this to work?

cito
Posts: 8
Joined: 12 Aug 2017, 13:43

25 Oct 2017, 16:35

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.

tengel92
Posts: 26
Joined: 15 Sep 2016, 20:04

27 Oct 2017, 17:33

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

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%;
        }
    }
}
Once you have that done it'll slightly jack up the initial splash loading screen so in index.html change

Code: Select all

<div class="splash-screen">
to

Code: Select all

<div class="splash-screen" style="width:100%;position:fixed">
Everything is good now for the splash screen and load bar so go ahead and create this component.

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; 
}
Then I put this in my component.html

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">
component.ts

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);

User avatar
optimus.prime
Prime
Posts: 17686
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

01 Dec 2017, 13:56

Ultima overrides the default loader icon to be a material one so [loading]="loading" where loading is true will display it.

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest