показать загрузку / прогресс / счетчик на столе во время загрузки данных

Question

Есть таблица, которая заполнена ng_repeat, я собираюсь показать загрузку / прогресс / спиннер на ней во время загрузки данных

 <div class="panel-body panel-success">

                <div class="col-lg-12">
                    <table class="table table-bordered" >
                        <tr>
                            <th>Name</th>
                            <th>Family</th>
                            <th>Age</th>

                        </tr>
                        <tr ng-repeat="r in results  track by r.ID">
                            <td>
                                {{r.Name}}
                            </td>
                            <td>
                                {{r.Family}}
                            </td>
                            <td>
                                {{r.Gender}}
                            </td>

                        </tr>
                        <tfoot>
                            <tr>
                                <td align="center" colspan="8">
                                    <div class="pull-center">
                                        <ul uib-pagination total-items="totalCount" ng-change="pageChanged()"
                                            items-per-page="pageSizeSelected"
                                            direction-links="true" ng-model="pageIndex"
                                            max-size="maxSize"
                                            class="pagination"
                                            boundary-links="true"
                                            rotate="false" num-pages="numPages"></ul>
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

Как показать загрузку / прогресс / спиннер внутри таблицы dusringЗагрузка данных?Я хочу показать счетчик внутри таблицы (вместо строк я имею в виду сохранить имя столбца таблицы)

Answer 1

Показывать счетчик, пока данные не загружены ... после загрузки скрыть их !!

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="soQuestion">
  <div class="panel-body panel-success" ng-controller="soController">
{{results.length}}
    <div class="col-lg-12">
      <table class="table table-bordered">
        <tr>
          <th>Name</th>
          <th>Family</th>
          <th>Age</th>
        </tr>
          <tr ng-if="results.length<1">
            <td>
              //insert the spinner image here
            </td>
            <td>
              //insert the spinner image here
            </td>
            <td>
              //insert the spinner image here
            </td>

          </tr>
        

        <ng-container ng-if="results.length>0">
          <tr ng-repeat="r in results  track by r.ID">
            <td>
              {{r.Name}}
            </td>
            <td>
              {{r.Family}}
            </td>
            <td>
              {{r.Gender}}
            </td>

          </tr>
        </ng-container>


        <tfoot>
          <tr>
            <td align="center" colspan="8">
              <div class="pull-center">
                <ul uib-pagination total-items="totalCount" ng-change="pageChanged()" items-per-page="pageSizeSelected" direction-links="true" ng-model="pageIndex" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
              </div>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>