Cannot get loading indicator to appear

[ScottSpittle]

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior Angular 4.x and 9.3.1, I copy and paste the example code as to be sure it is IDENTICAL and I am not missing anything, yet the loading bar indicator does not appear.

Expected behavior Loading indicator would appear while loading

Reproduction of the problem http://plnkr.co/edit/ct5UDsOOkoTmw3RzihCG?p=preview

What is the motivation / use case for changing the behavior? I would like a loading indicator :D

Please tell us about your environment: phpstorm@latest

• Table version: 0.8.x 9.3.1

• Angular version: 2.0.x 4.3.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome: Version 59.0.3071.115 (Official Build) (64-bit)

• Language: [all | TypeScript X.X | ES6/7 | ES5] TypeScript

[BrummbQ]

You need to include the material css theme or style your own loading indicator. It's working fine for me.

[wizarrc]

@ScottSpittle I agree with @BrummbQ. Do you have a plunker where it's not working giving the proper styling? The datatable was moved to css-less design. it's up to you to add a style or use the provided but separately added ones.

[MattMorrisDev]

Just a heads up, if you also include bootstrap css in your project, that might be the reason. Since the material loading indicator html looks like this:

<div class="progress-linear" role="progressbar">
      <div class="container">
        <div class="bar"></div>
      </div>
 </div>

The container class applies a bunch of a bootstrap styling that made it disappear for me.

[MattMorrisDev]

Actually, after further investigation, the bootstrap styling only messes with the width of the loader, it doesn't hide it.

I found what is hiding it though. There's a position: relative and a position: absolute on this css class seen in the image below. When I uncheck the absolute rule, it suddenly shows up again.

[tmfulton]

@MattMorrisDev How did you fix the issue of it hiding? Just remove bootstrap, or did you find another solution?

Thanks!

[MattMorrisDev]

In the component that hosts the <nxg-datable>, I basically added this scss:

::ng-deep {
  .progress-linear {
    position: relative !important;

    .container {
      max-width: 100% !important;
    }
  }
}

[Dekeyras]

Hi,

Is there any update on this issue. The above solution does not work in the latest version of angular. The component type does not apply to child components.

I have bootstrap styles imported to.

Thanks

[mgendre]

Same problem here with bootstrap the progress bar doesn't show.

[byhoratiss]

@mgendre With bootstrap there is no progress bar css styles included, but this will give you a hint:

.ngx-datatable.bootstrap .datatable-body .progress-linear {
  display: block;
  position: relative;
  width: 100%;
  height: 5px;
  padding: 0;
  margin: 0;
  position: absolute;
}
.ngx-datatable.bootstrap .datatable-body .progress-linear .container {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 5px;
  -webkit-transform: translate(0, 0) scale(1, 1);
  transform: translate(0, 0) scale(1, 1);
  background-color: #aad1f9;
}
.ngx-datatable.bootstrap .datatable-body .progress-linear .container .bar {
  transition: all .2s linear;
  -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
  animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: -webkit-transform .2s linear;
  transition: transform .2s linear;
  background-color: #106cc8;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
}
/**
 * Progress bar animations
 */
 @keyframes query {
  0% {
    opacity: 1;
    transform: translateX(35%) scale(0.3, 1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0, 1);
  }
}

[josemadev]

In bootstrap theme not include css for the progress bar. I make a scss for that based in @byhoratiss

`` .ngx-datatable.bootstrap` .datatable-body .progress-linear { display: block; position: relative; width: 100%; height: 5px; padding: 0; margin: 0; position: absolute;

.container { display: block; position: relative; overflow: hidden; width: 100%; height: 5px; -webkit-transform: translate(0, 0) scale(1, 1); transform: translate(0, 0) scale(1, 1); background-color: #aad1f9; margin: 0; max-width: 100%;

.bar {
  transition: all .2s linear;
  -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
  animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: -webkit-transform .2s linear;
  transition: transform .2s linear;
  background-color: #106cc8;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
}

} } ``

[haifahrul]

@mgendre With bootstrap there is no progress bar css styles included, but this will give you a hint:

.ngx-datatable.bootstrap .datatable-body .progress-linear {
  display: block;
  position: relative;
  width: 100%;
  height: 5px;
  padding: 0;
  margin: 0;
  position: absolute;
}
.ngx-datatable.bootstrap .datatable-body .progress-linear .container {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 5px;
  -webkit-transform: translate(0, 0) scale(1, 1);
  transform: translate(0, 0) scale(1, 1);
  background-color: #aad1f9;
}
.ngx-datatable.bootstrap .datatable-body .progress-linear .container .bar {
  transition: all .2s linear;
  -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
  animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: -webkit-transform .2s linear;
  transition: transform .2s linear;
  background-color: #106cc8;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
}
/**
 * Progress bar animations
 */
 @keyframes query {
  0% {
    opacity: 1;
    transform: translateX(35%) scale(0.3, 1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0, 1);
  }
}

It's worked for me,

and i added this code into my scss/css

::ng-deep {
  .progress-linear {
    position: relative !important;

    .container {
      max-width: 100% !important;
    }
  }
}

Thanks :smile:

[diegovidal27]

if you are using

<ngx-datatable class = "bootstrap" ....>

and the loading bar does not appear, try this:

1. Go to: node_modules@swimlane\ngx-datatable\themes
2. You will see that in the boostrap.scss file there are no default styles for the progress bar.
3. Look inside the boostrap.scss file for the datatable-body class and paste this code inside: (ngx-datatable.boostrap > datatable-body > progress-linear > ...)

 .progress-linear {
        display: block;
        position: sticky;
        width: 100%;
        height: 5px;
        padding: 0;
        margin: 0;
        top: 0;
        
        .container {
            display: block;
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 5px;
            -webkit-transform: translate(0, 0) scale(1, 1);
            transform: translate(0, 0) scale(1, 1);
            background-color: rgb(170, 209, 249);
            
            .bar {
                transition: all 0.2s linear;
                -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
                animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
                
                transition: -webkit-transform 0.2s linear;
                transition: transform 0.2s linear;
                background-color: #7367f0;
                // background-color: rgb(16, 108, 200);
                
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 5px;
            }
        }
    }

And don't forget to put the animations at the end of the file:

@keyframes query {
    0% {
        opacity: 1;
        transform: translateX(35%) scale(0.3, 1);
    }
    
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0, 1);
    }
}

4. The file should look like this:

• Tip:

If you check the material theme, this theme has the styles for the progress bar, you can check them in the material.scss file.

Hopefully help you

[abnerfilipe]

I tried the solutions explained here, but i can't get this damn thing work! Please can someone help me?

[dsebata]

Had the same challenge, fixed with below in a scss file for [email protected];

 @import '~bootstrap/scss/bootstrap';
  .progress-linear {
    .container {
      @extend .progress;
      max-width: 100%;
      --bs-progress-border-radius: 0;
      --bs-progress-height: 0.5rem;
  
      .bar {
        @extend .progress-bar;
        @extend .progress-bar-striped;
        @extend .progress-bar-animated;
        width: 100%;
      }
    }
  }