<table class="table table-hover is-processing">
    <thead>
        <tr>
            <th>Name</th>
            <th>Role</th>
            <th>Username</th>
            <th>Status</th>
            <th>Last Login Date</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let user of users">
            <td>Bob</td>
            <td>Janitor</td>
            <td>bobthecleaner</td>
            <td>Sleeping</td>
            <td>Today</td>
            <td>
              <button>Delete</button>
            </td>
        </tr>
    </tbody>
</table>
$loader-width: 20%;

table.is-processing {
  position: relative;
  width: 80%;
  margin: 0 10%;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background-color: rgba(255, 255, 255, 0.6);
    cursor: progress;
  }
  
  thead::after {
    content: '';
    position: absolute;
    //left: ($loader-width * -1);
    left: 0;
    display: block;
    height: 2px;
    width: $loader-width;
    background-color: blue;
    margin-top: -2px;
    animation: loading-bar 1s infinite linear;
  }
}

@keyframes loading-bar {
    0% {
        width: 0;
        left: 0%;
    }
    23% {
        width: 30%;
        left: 0%;
    }
    61.9% {
        width: 30%;
        left: 70%;
    }
    100% {
        width: 0;
        left: 100%;
    }
}
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.