mirror of
https://github.com/jokob-sk/NetAlertX.git
synced 2026-06-21 14:49:59 -04:00
12d5991505
- 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.
46 lines
1.3 KiB
PHP
46 lines
1.3 KiB
PHP
<div id="presence-skeleton">
|
|
|
|
<!-- 6 stat tiles -->
|
|
<div class="row">
|
|
<?php for ($i = 0; $i < 6; $i++): ?>
|
|
<div class="col-lg-2 col-sm-4 col-xs-6">
|
|
<div class="skel-tile">
|
|
<div class="skel-tile-inner">
|
|
<span class="skel-tile-num skel-shimmer"></span>
|
|
<span class="skel-tile-label skel-shimmer"></span>
|
|
</div>
|
|
<div class="skel-tile-icon-area">
|
|
<span class="skel-tile-icon-shape skel-shimmer"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endfor; ?>
|
|
</div>
|
|
|
|
<!-- activity chart -->
|
|
<div class="row" style="margin-top:12px">
|
|
<div class="col-md-12">
|
|
<div class="skel-chart-box">
|
|
<div class="skel-box-header">
|
|
<span class="skel-line skel-shimmer" style="width:160px"></span>
|
|
</div>
|
|
<div class="skel-chart-body skel-shimmer" style="height:160px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- presence calendar -->
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="skel-chart-box">
|
|
<div class="skel-box-header">
|
|
<span class="skel-line skel-shimmer" style="width:100px"></span>
|
|
<span class="skel-line skel-shimmer" style="width:180px; margin-left:auto;"></span>
|
|
</div>
|
|
<div class="skel-chart-body skel-shimmer" style="height:380px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|