NetAlertX/front/php/templates/skel_settings.php

<!-- Settings Loading Skeleton --------------------------------------------- -->
<div id="settings-skeleton">

  <!-- Overview panel skeleton -->
  <div class="skel-overview-panel">
    <div class="skel-overview-heading">
      <span class="skel-icon-block skel-shimmer"></span>
      <span class="skel-line skel-shimmer" style="width:180px"></span>
    </div>
    <div class="skel-overview-body col-xs-12">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px">
        <div class="skel-overview-card skel-shimmer"></div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px">
        <div class="skel-overview-card skel-shimmer"></div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px">
        <div class="skel-overview-card skel-shimmer"></div>
      </div>
    </div>
    <div class="skel-overview-heading">
      <span class="skel-icon-block skel-shimmer"></span>
      <span class="skel-line skel-shimmer" style="width:180px"></span>
    </div>
    <div class="skel-overview-body col-xs-12">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px">
        <div class="skel-overview-card skel-shimmer"></div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px">
        <div class="skel-overview-card skel-shimmer"></div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px">
        <div class="skel-overview-card skel-shimmer"></div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 padding-5px">
        <div class="skel-overview-card skel-shimmer"></div>
      </div>
    </div>
  </div>

  <!-- Core section (open, with a plugin block) -->
  <div class="skel-section">
    <div class="skel-section-header">
      <span class="skel-icon-block skel-shimmer"></span>
      <span class="skel-line skel-shimmer" style="width:60px"></span>
    </div>
    <div class="skel-plugin-block">
      <div class="skel-plugin-header">
        <span class="skel-icon-block skel-shimmer"></span>
        <span class="skel-line skel-shimmer" style="width:75px"></span>
        <span class="skel-line skel-shimmer" style="width:210px"></span>
      </div>
      <div class="skel-plugin-body">
        <div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer" style="height:75px"></span></div>
        <div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" ></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer" style="max-width:35px"></span></div>
        <div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" ></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer" style="max-width:35px"></span></div>
        <div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer" style="height:75px"></span></div>
        <div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" ></span><span class="skel-cell-desc skel-shimmer" ></span><span class="skel-cell-input skel-shimmer"></span></div>
      </div>
    </div>
  </div>

  <!-- System section (open) -->
  <div class="skel-section">
    <div class="skel-section-header">
      <span class="skel-icon-block skel-shimmer"></span>
      <span class="skel-line skel-shimmer" style="width:80px"></span>
    </div>
    <div class="skel-plugin-block">
      <div class="skel-plugin-header">
        <span class="skel-icon-block skel-shimmer"></span>
        <span class="skel-line skel-shimmer" style="width:90px"></span>
        <span class="skel-line skel-shimmer" style="width:185px"></span>
      </div>
      <div class="skel-plugin-body">
        <div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
        <div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
        <div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
        <div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer"></span><span class="skel-cell-input skel-shimmer"></span></div>
      </div>
    </div>
  </div>

  <!-- Device Scanners section (closed) -->
  <div class="skel-section">
    <div class="skel-section-header">
      <span class="skel-icon-block skel-shimmer"></span>
      <span class="skel-line skel-shimmer" style="width:140px"></span>
    </div>
  </div>

  <!-- Other Scanners section (open) -->
  <div class="skel-section">
    <div class="skel-section-header">
      <span class="skel-icon-block skel-shimmer"></span>
      <span class="skel-line skel-shimmer" style="width:120px"></span>
    </div>
    <div class="skel-plugin-block">
      <div class="skel-plugin-header">
        <span class="skel-icon-block skel-shimmer"></span>
        <span class="skel-line skel-shimmer" style="width:65px"></span>
        <span class="skel-line skel-shimmer" style="width:200px"></span>
      </div>
      <div class="skel-plugin-body">
        <div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" style="width:16%"></span><span class="skel-cell-desc skel-shimmer" style="width:40%"></span><span class="skel-cell-input skel-shimmer"></span></div>
        <div class="skel-setting-row"><span class="skel-cell-name skel-shimmer"></span><span class="skel-cell-desc skel-shimmer" style="width:33%"></span><span class="skel-cell-input skel-shimmer"></span></div>
        <div class="skel-setting-row"><span class="skel-cell-name skel-shimmer" style="width:19%"></span><span class="skel-cell-desc skel-shimmer" style="width:42%"></span><span class="skel-cell-input skel-shimmer"></span></div>
      </div>
    </div>
  </div>

  <!-- Publishers section (closed) -->
  <div class="skel-section">
    <div class="skel-section-header">
      <span class="skel-icon-block skel-shimmer"></span>
      <span class="skel-line skel-shimmer" style="width:100px"></span>
    </div>
  </div>

</div>
<!-- /Settings Loading Skeleton -------------------------------------------- -->