Loading bar in jQuery DataTable

Question

I trying development a loading bar in DataTable, but in styles not working for me. I use material-design-lite.

My html

<div class="mdl-cell mdl-cell--11-col mdl-cell--8-col-tablet mdl-cell--4-col-phone mdl-shadow--8dp">
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone" style="min-height: 300px; margin-top: 10px; cursor:pointer">
      <table id="tabela">
        <thead>
          <tr>
            <th>Id.</th>
            <th>Name</th>
            <th>Age</th>
            <th>Phone</th>
            <th>Actions</th>
          </tr>
        </thead>
      </table>
    </div>
    <div class="preloader">
      Carregando...
    </div>
  </div>
</div>

In my css, i use

.preloader {
  background-color: rgba(55, 55, 55, .5);
  width: 100%;
  position: absolute;
  
}

but my preloader expand out root div

My link with jsfiddle test

It's possible make div preloader not expand out root div?