Bootstrap 5
Prerender
Performance
Loading
Seo
Système de préchargement intelligent avec indicateur de progression et chargement asynchrone des ressources. Optimisation SEO et performances.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippet Loading Prerender Bootstrap 5 202604210103 | AngularForAll</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.shimmer {
animation: shimmer 2s infinite linear;
background: linear-gradient(to right, #f3f4f6 4%, #e5e7eb 25%, #f3f4f6 36%);
background-size: 1000px 100%;
}
.skeleton-text {
height: 1rem;
border-radius: 0.25rem;
}
.skeleton-circle {
border-radius: 50%;
}
.skeleton-image {
background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
}
</style>
</head>
<body class="bg-gray-50">
<div class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
<!-- Loading Indicator -->
<div class="fixed top-4 right-4 z-50 bg-white rounded-lg shadow-lg px-4 py-2 flex items-center space-x-2">
<div class="animate-spin rounded-full h-4 w-4 border-2 border-indigo-600 border-t-transparent"></div>
<span class="text-sm text-gray-600">Chargement en cours...</span>
</div>
<!-- Skeleton Breadcrumb -->
<div class="flex mb-8 space-x-2">
<div class="skeleton-text shimmer w-16 h-4"></div>
<div class="w-4 h-4 bg-gray-200 rounded"></div>
<div class="skeleton-text shimmer w-20 h-4"></div>
<div class="w-4 h-4 bg-gray-200 rounded"></div>
<div class="skeleton-text shimmer w-32 h-4"></div>
</div>
<!-- Skeleton Product Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Skeleton Gallery -->
<div class="space-y-4">
<!-- Main Image Skeleton -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="skeleton-image w-full h-96 shimmer"></div>
</div>
<!-- Thumbnails Skeleton -->
<div class="grid grid-cols-4 gap-2">
<div class="skeleton-image h-24 rounded-lg shimmer"></div>
<div class="skeleton-image h-24 rounded-lg shimmer"></div>
<div class="skeleton-image h-24 rounded-lg shimmer"></div>
<div class="skeleton-image h-24 rounded-lg shimmer"></div>
</div>
</div>
<!-- Skeleton Product Info -->
<div class="space-y-6">
<!-- Badges Skeleton -->
<div class="flex space-x-2">
<div class="skeleton-text shimmer w-16 h-6 rounded-full"></div>
<div class="skeleton-text shimmer w-24 h-6 rounded-full"></div>
</div>
<!-- Title Skeleton -->
<div>
<div class="skeleton-text shimmer w-3/4 h-8 rounded-lg mb-2"></div>
<div class="skeleton-text shimmer w-1/2 h-6 rounded-lg"></div>
</div>
<!-- Rating Skeleton -->
<div class="flex items-center space-x-2">
<div class="flex space-x-1">
<div class="skeleton-text shimmer w-5 h-5 rounded"></div>
<div class="skeleton-text shimmer w-5 h-5 rounded"></div>
<div class="skeleton-text shimmer w-5 h-5 rounded"></div>
<div class="skeleton-text shimmer w-5 h-5 rounded"></div>
<div class="skeleton-text shimmer w-5 h-5 rounded"></div>
</div>
<div class="skeleton-text shimmer w-20 h-4"></div>
</div>
<!-- Price Skeleton -->
<div class="border-t border-b border-gray-200 py-4">
<div class="flex items-center space-x-3">
<div class="skeleton-text shimmer w-32 h-10 rounded"></div>
<div class="skeleton-text shimmer w-20 h-6 rounded"></div>
<div class="skeleton-text shimmer w-16 h-6 rounded-full"></div>
</div>
</div>
<!-- Description Skeleton -->
<div class="space-y-2">
<div class="skeleton-text shimmer w-full h-4"></div>
<div class="skeleton-text shimmer w-5/6 h-4"></div>
<div class="skeleton-text shimmer w-4/6 h-4"></div>
</div>
<!-- Features Skeleton -->
<div class="space-y-3">
<div class="skeleton-text shimmer w-40 h-5 rounded"></div>
<div class="space-y-2">
<div class="flex items-center space-x-2">
<div class="skeleton-circle shimmer w-5 h-5 rounded-full"></div>
<div class="skeleton-text shimmer w-48 h-4"></div>
</div>
<div class="flex items-center space-x-2">
<div class="skeleton-circle shimmer w-5 h-5 rounded-full"></div>
<div class="skeleton-text shimmer w-40 h-4"></div>
</div>
<div class="flex items-center space-x-2">
<div class="skeleton-circle shimmer w-5 h-5 rounded-full"></div>
<div class="skeleton-text shimmer w-44 h-4"></div>
</div>
<div class="flex items-center space-x-2">
<div class="skeleton-circle shimmer w-5 h-5 rounded-full"></div>
<div class="skeleton-text shimmer w-36 h-4"></div>
</div>
</div>
</div>
<!-- Quantity Selector Skeleton -->
<div class="space-y-3">
<div class="skeleton-text shimmer w-20 h-5 rounded"></div>
<div class="flex items-center space-x-3">
<div class="flex items-center border border-gray-200 rounded-lg">
<div class="skeleton-text shimmer w-10 h-10 rounded-l-lg"></div>
<div class="skeleton-text shimmer w-16 h-10"></div>
<div class="skeleton-text shimmer w-10 h-10 rounded-r-lg"></div>
</div>
</div>
</div>
<!-- Action Buttons Skeleton -->
<div class="flex space-x-4">
<div class="skeleton-text shimmer flex-1 h-12 rounded-lg"></div>
<div class="skeleton-text shimmer w-12 h-12 rounded-lg"></div>
</div>
<!-- Features Grid Skeleton -->
<div class="grid grid-cols-3 gap-4 pt-4 border-t border-gray-200">
<div class="text-center space-y-2">
<div class="skeleton-circle shimmer w-8 h-8 mx-auto rounded-full"></div>
<div class="skeleton-text shimmer w-16 h-3 mx-auto"></div>
<div class="skeleton-text shimmer w-12 h-3 mx-auto"></div>
</div>
<div class="text-center space-y-2">
<div class="skeleton-circle shimmer w-8 h-8 mx-auto rounded-full"></div>
<div class="skeleton-text shimmer w-16 h-3 mx-auto"></div>
<div class="skeleton-text shimmer w-12 h-3 mx-auto"></div>
</div>
<div class="text-center space-y-2">
<div class="skeleton-circle shimmer w-8 h-8 mx-auto rounded-full"></div>
<div class="skeleton-text shimmer w-16 h-3 mx-auto"></div>
<div class="skeleton-text shimmer w-12 h-3 mx-auto"></div>
</div>
</div>
</div>
</div>
<!-- Skeleton Tabs -->
<div class="mt-12">
<div class="bg-white rounded-xl shadow-sm">
<!-- Tab Headers Skeleton -->
<div class="border-b border-gray-200 px-6">
<div class="flex space-x-8">
<div class="skeleton-text shimmer w-24 h-12"></div>
<div class="skeleton-text shimmer w-28 h-12"></div>
<div class="skeleton-text shimmer w-24 h-12"></div>
</div>
</div>
<!-- Tab Content Skeleton -->
<div class="p-6 space-y-4">
<div class="skeleton-text shimmer w-full h-4"></div>
<div class="skeleton-text shimmer w-11/12 h-4"></div>
<div class="skeleton-text shimmer w-10/12 h-4"></div>
<div class="skeleton-text shimmer w-9/12 h-4"></div>
<div class="skeleton-text shimmer w-8/12 h-4"></div>
</div>
</div>
</div>
<!-- Skeleton Related Products -->
<div class="mt-12">
<div class="skeleton-text shimmer w-64 h-8 mb-6"></div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Product Card Skeletons -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="skeleton-image h-48 shimmer"></div>
<div class="p-4 space-y-3">
<div class="skeleton-text shimmer w-3/4 h-5"></div>
<div class="skeleton-text shimmer w-1/2 h-4"></div>
<div class="skeleton-text shimmer w-2/3 h-6"></div>
<div class="skeleton-text shimmer w-full h-10 rounded-lg"></div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="skeleton-image h-48 shimmer"></div>
<div class="p-4 space-y-3">
<div class="skeleton-text shimmer w-3/4 h-5"></div>
<div class="skeleton-text shimmer w-1/2 h-4"></div>
<div class="skeleton-text shimmer w-2/3 h-6"></div>
<div class="skeleton-text shimmer w-full h-10 rounded-lg"></div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="skeleton-image h-48 shimmer"></div>
<div class="p-4 space-y-3">
<div class="skeleton-text shimmer w-3/4 h-5"></div>
<div class="skeleton-text shimmer w-1/2 h-4"></div>
<div class="skeleton-text shimmer w-2/3 h-6"></div>
<div class="skeleton-text shimmer w-full h-10 rounded-lg"></div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<div class="skeleton-image h-48 shimmer"></div>
<div class="p-4 space-y-3">
<div class="skeleton-text shimmer w-3/4 h-5"></div>
<div class="skeleton-text shimmer w-1/2 h-4"></div>
<div class="skeleton-text shimmer w-2/3 h-6"></div>
<div class="skeleton-text shimmer w-full h-10 rounded-lg"></div>
</div>
</div>
</div>
</div>
</div>
<script>
// Simulate loading and then replace with actual content
setTimeout(() => {
// This would normally be replaced with actual product data
console.log('Loading complete - would replace with real product data');
// For demo purposes, we'll show a message
const container = document.querySelector('.max-w-7xl');
const loadingIndicator = document.querySelector('.fixed');
// Remove loading indicator
if (loadingIndicator) {
loadingIndicator.style.opacity = '0';
setTimeout(() => {
loadingIndicator.remove();
}, 300);
}
// Show success message
const successMessage = document.createElement('div');
successMessage.className = 'fixed bottom-4 right-4 bg-green-500 text-white rounded-lg shadow-lg px-4 py-2 transform transition-all duration-300';
successMessage.innerHTML = '<i class="fas fa-check-circle mr-2"></i>Contenu chargé avec succès !';
document.body.appendChild(successMessage);
setTimeout(() => {
successMessage.style.opacity = '0';
setTimeout(() => successMessage.remove(), 300);
}, 3000);
}, 3000); // Simulate 3 seconds loading time
</script>
<!-- Alternative: Loading spinner overlay -->
<div class="hidden">
<!-- This is an alternative loading overlay design -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white rounded-xl p-8 flex flex-col items-center space-y-4">
<div class="animate-spin rounded-full h-12 w-12 border-4 border-indigo-600 border-t-transparent"></div>
<p class="text-gray-700 font-medium">Chargement du produit...</p>
<div class="w-48 bg-gray-200 rounded-full h-2 overflow-hidden">
<div class="bg-indigo-600 h-2 rounded-full animate-pulse" style="width: 60%"></div>
</div>
</div>
</div>
</div>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur