60 lines
2.5 KiB
HTML
60 lines
2.5 KiB
HTML
|
{{define "skeleton-loader"}}
|
||
|
|
<!-- Skeleton Loader Overlay - Shown during language transitions -->
|
||
|
|
<div id="skeleton-loader">
|
||
|
|
<div class="skeleton-container">
|
||
|
|
<!-- Skeleton Page 1 -->
|
||
|
|
<div class="skeleton-page">
|
||
|
|
<!-- Header skeleton -->
|
||
|
|
<div class="skeleton skeleton-header"></div>
|
||
|
|
|
||
|
|
<!-- Badges skeleton -->
|
||
|
|
<div class="skeleton skeleton-badges"></div>
|
||
|
|
|
||
|
|
<!-- Grid layout with sidebars -->
|
||
|
|
<div class="skeleton-grid">
|
||
|
|
<!-- Left sidebar skeleton -->
|
||
|
|
<div class="skeleton-sidebar">
|
||
|
|
<div class="skeleton skeleton-sidebar-item"></div>
|
||
|
|
<div class="skeleton skeleton-sidebar-item"></div>
|
||
|
|
<div class="skeleton skeleton-sidebar-item"></div>
|
||
|
|
<div class="skeleton skeleton-sidebar-item"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Main content skeleton -->
|
||
|
|
<div class="skeleton-main">
|
||
|
|
<!-- Section 1 -->
|
||
|
|
<div class="skeleton-section">
|
||
|
|
<div class="skeleton skeleton-title"></div>
|
||
|
|
<div class="skeleton skeleton-content long"></div>
|
||
|
|
<div class="skeleton skeleton-content medium"></div>
|
||
|
|
<div class="skeleton skeleton-content short"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Section 2 -->
|
||
|
|
<div class="skeleton-section">
|
||
|
|
<div class="skeleton skeleton-title"></div>
|
||
|
|
<div class="skeleton skeleton-content medium"></div>
|
||
|
|
<div class="skeleton skeleton-content long"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Experience items -->
|
||
|
|
<div class="skeleton-section">
|
||
|
|
<div class="skeleton skeleton-title"></div>
|
||
|
|
<div class="skeleton skeleton-experience-item"></div>
|
||
|
|
<div class="skeleton skeleton-experience-item"></div>
|
||
|
|
<div class="skeleton skeleton-experience-item"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Right sidebar skeleton -->
|
||
|
|
<div class="skeleton-sidebar">
|
||
|
|
<div class="skeleton skeleton-sidebar-item"></div>
|
||
|
|
<div class="skeleton skeleton-sidebar-item"></div>
|
||
|
|
<div class="skeleton skeleton-sidebar-item"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{{end}}
|