mirror/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2026-06-21 14:49:59 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
39cdbfcc189f1d763b6a170dbb31a0ab7cdc1f81
NetAlertX/front/php/templates/skel_devices.php
Jokob @NetAlertX 12d5991505 Add skeleton templates for various sections 
- Created skeleton templates for events, notifications, plugins, presence, report, settings, and workflows to enhance loading states.
- Implemented structured skeletons for tab details, tab events, maintenance backup, database tools, logging, multi-edit, presence, sessions, and system info.
- Each template includes shimmer effects for loading indicators, improving user experience during data fetching.
2026-06-20 11:53:00 +00:00

302 lines
13 KiB
PHP
Raw Blame History

<!-- Devices Loading Skeleton ============================================== -->
<div id="devices-skeleton">
<!-- Tile cards row -------------------------------------------------------- -->
<div class="row">
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
</div>
<!-- /Tile cards row ------------------------------------------------------- -->
<!-- Chart section --------------------------------------------------------- -->
<div class="row">
<div class="col-xs-12">
<div class="skel-chart-box">
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:220px"></span>
<span class="skel-line skel-shimmer" style="width:80px; margin-left:auto"></span>
</div>
<div class="skel-chart-body skel-shimmer"></div>
</div>
</div>
</div>
<!-- /Chart section -------------------------------------------------------- -->
<!-- Table section --------------------------------------------------------- -->
<div class="row">
<div class="col-xs-12">
<div class="skel-table-box">
<!-- Box header -->
<div class="skel-box-header">
<span class="skel-line skel-shimmer" style="width:180px"></span>
<span class="skel-line skel-shimmer" style="width:110px; margin-left:auto"></span>
</div>
<!-- Column headers -->
<div class="skel-table-header-row">
<span class="skel-th skel-shimmer" style="flex:0.5"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:2"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:1.5"></span>
<span class="skel-th skel-shimmer" style="flex:1"></span>
</div>
<!-- Data rows -->
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
<div class="skel-tr">
<span class="skel-td skel-shimmer" style="flex:0.5"></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
<span class="skel-td skel-shimmer" ></span>
</div>
</div>
</div>
</div>
<!-- /Table section -------------------------------------------------------- -->
</div>
<!-- /Devices Loading Skeleton ============================================= -->
Reference in New Issue View Git Blame Copy Permalink