Ngx-datatable: Is there anyway of using custom progress bar class for loading indicator?

[xyrintech]

Currently, making loadingIndicator to true loads ProgressBarComponent.

Is there anyway we can assign out own temple or class for progress bar?

[carlosleopoldo]

I did it with those SCSS styles:

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

[paritosh64ce]

If you want to use material theme colours with this progress bar.

TL;DL
I just extracted two variables, used theme colours mat-color($primary, lighter)

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