Cannot get loading indicator to appear

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 😄

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

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

[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 😄