157 lines
4.1 KiB
PHP
157 lines
4.1 KiB
PHP
{{-- Skeleton Loader Component --}}
|
|
<style>
|
|
.skeleton {
|
|
background: linear-gradient(90deg, var(--skeleton-bg1, #e0e0e0) 25%, var(--skeleton-bg2, #f0f0f0) 50%, var(--skeleton-bg1, #e0e0e0) 75%);
|
|
background-size: 200% 100%;
|
|
animation: loading 1.5s infinite;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
html.dark-mode .skeleton {
|
|
--skeleton-bg1: #3a3a3a;
|
|
--skeleton-bg2: #4a4a4a;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
.skeleton-text {
|
|
height: 16px;
|
|
margin-bottom: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.skeleton-text.short {
|
|
width: 60%;
|
|
}
|
|
|
|
.skeleton-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.skeleton-card {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.skeleton-card-image {
|
|
width: 100%;
|
|
height: 200px;
|
|
margin-bottom: 15px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.skeleton-card-body {
|
|
padding: 15px;
|
|
}
|
|
|
|
.skeleton-table-row {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.skeleton-table-cell {
|
|
flex: 1;
|
|
height: 20px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.skeleton-button {
|
|
height: 40px;
|
|
width: 100px;
|
|
border-radius: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.skeleton-chart {
|
|
height: 300px;
|
|
border-radius: 8px;
|
|
margin-bottom: 15px;
|
|
}
|
|
</style>
|
|
|
|
{{-- Card Skeleton Loader --}}
|
|
@if($type === 'card')
|
|
<div class="card border-0 shadow-sm skeleton-card">
|
|
<div class="skeleton skeleton-card-image" style="margin-bottom: 0;"></div>
|
|
<div class="skeleton-card-body">
|
|
<div class="skeleton skeleton-text" style="width: 80%; margin-bottom: 10px;"></div>
|
|
<div class="skeleton skeleton-text short" style="margin-bottom: 15px;"></div>
|
|
<div class="skeleton skeleton-button"></div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Table Row Skeleton Loader --}}
|
|
@if($type === 'table-row')
|
|
<tr>
|
|
<td>
|
|
<div class="skeleton skeleton-table-cell" style="width: 20px; height: 20px;"></div>
|
|
</td>
|
|
<td>
|
|
<div class="skeleton skeleton-text" style="width: 70%;"></div>
|
|
</td>
|
|
<td>
|
|
<div class="skeleton skeleton-text" style="width: 50%;"></div>
|
|
</td>
|
|
<td>
|
|
<div class="skeleton skeleton-text short"></div>
|
|
</td>
|
|
<td>
|
|
<div class="skeleton skeleton-text short"></div>
|
|
</td>
|
|
</tr>
|
|
@endif
|
|
|
|
{{-- Stats Card Skeleton --}}
|
|
@if($type === 'stats')
|
|
<div class="card border-0 shadow-sm" style="border-radius: 12px;">
|
|
<div class="card-body p-4">
|
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
|
<div style="flex-grow: 1;">
|
|
<div class="skeleton skeleton-text short" style="width: 70%;"></div>
|
|
<div class="skeleton skeleton-text" style="width: 40%; height: 28px;"></div>
|
|
<div class="skeleton skeleton-text short" style="width: 50%;"></div>
|
|
</div>
|
|
<div class="skeleton skeleton-avatar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Chart Skeleton --}}
|
|
@if($type === 'chart')
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white border-0 py-3">
|
|
<div class="skeleton skeleton-text" style="width: 200px;"></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="skeleton skeleton-chart"></div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Text Lines Skeleton --}}
|
|
@if($type === 'text-lines')
|
|
<div class="mb-3">
|
|
<div class="skeleton skeleton-text"></div>
|
|
<div class="skeleton skeleton-text"></div>
|
|
<div class="skeleton skeleton-text short"></div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Minimal --}}
|
|
@if($type === 'minimal')
|
|
<div class="skeleton skeleton-text" style="width: {{ $width ?? '100%' }}; height: {{ $height ?? '20px' }};"></div>
|
|
@endif
|