Анимированные прелоадеры: как создать эффектные индикаторы загрузки

.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-left-color: #09f;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

// Показать прелоадер
document.querySelector('.spinner').style.display = 'block';

// Скрыть прелоадер после загрузки страницы
window.addEventListener('load', () => {
document.querySelector('.spinner').style.display = 'none';
});

// Создание прогресс-бара
const progressBar = document.querySelector('.progress-bar');
let width = 0;

// Имитация процесса загрузки
const interval = setInterval(() => {
if (width >= 100) {
clearInterval(interval);
document.querySelector('.preloader').style.display = 'none';
} else {
width++;
progressBar.style.width = width + '%';
progressBar.textContent = width + '%';
}
}, 50);

.pulse {
width: 50px;
height: 50px;
background: #3498db;
border-radius: 50%;
animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
0% { transform: scale(0.8); opacity: 0.7; }
50% { transform: scale(1); opacity: 1; }
100% { transform: scale(0.8); opacity: 0.7; }
}

.skeleton-text {
height: 20px;
margin-bottom: 10px;
border-radius: 4px;
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e0e0e0 50%,
#f0f0f0 75%
);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

.dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #3498db;
margin: 0 3px;
}

.dot:nth-child(1) { animation: jump 1.5s infinite 0s; }
.dot:nth-child(2) { animation: jump 1.5s infinite 0.2s; }
.dot:nth-child(3) { animation: jump 1.5s infinite 0.4s; }

@keyframes jump {
0%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
}

<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" 
stroke="#3498db" stroke-width="8" fill="none" 
stroke-dasharray="251" stroke-dashoffset="251"
stroke-linecap="round">
<animate attributeName="stroke-dashoffset" 
from="251" to="0" dur="2s" repeatCount="indefinite" />
</circle>
</svg>

// Пример простой мини-игры для прелоадера
const canvas = document.getElementById('game-loader');
const ctx = canvas.getContext('2d');
let score = 0;
let character = { x: 50, y: 50 };

canvas.addEventListener('mousemove', (e) => {
character.x = e.offsetX;
character.y = e.offsetY;
});

function drawFrame() {
// Очищаем холст
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Рисуем персонажа
ctx.fillStyle = '#3498db';
ctx.beginPath();
ctx.arc(character.x, character.y, 10, 0, Math.PI * 2);
ctx.fill();

// Отображаем счет
ctx.fillStyle = '#333';
ctx.font = '16px Arial';
ctx.fillText(`Score: ${score}`, 10, 20);

requestAnimationFrame(drawFrame);
}

drawFrame();

.mobile-preloader {
width: 40px;
height: 40px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}

/* Оптимизация для экранов меньше 768px */
@media (max-width: 768px) {
.mobile-preloader {
width: 30px;
height: 30px;
}

/* Упрощаем анимацию для экономии ресурсов */
@keyframes mobileSpinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.mobile-preloader .spinner {
animation: mobileSpinner 1.2s linear infinite;
will-change: transform; /* Оптимизирует GPU-ускорение */
}
}

/* Адаптация для слабых устройств или медленного соединения */
.low-performance {
animation-duration: 2s !important; /* Более медленная анимация */
opacity: 0.8 !important; /* Менее интенсивные визуальные эффекты */
}

// Проверка производительности устройства
function checkPerformance() {
const startTime = performance.now();
let iterations = 0;

while (performance.now() – startTime < 5) {
iterations++;
}

// Если количество итераций меньше порогового значения,
// считаем устройство маломощным
if (iterations < 10000) {
document.querySelector('.mobile-preloader').classList.add('low-performance');
}
}

// Определение качества соединения
if ('connection' in navigator) {
if (navigator.connection.effectiveType === 'slow-2g' || 
navigator.connection.effectiveType === '2g') {
document.querySelector('.mobile-preloader').classList.add('low-performance');
}
}

<!-- Включаем библиотеку -->
<script src="nprogress.js"></script>
<link rel="stylesheet" href="nprogress.css">

<script>
// Запустить прелоадер
NProgress.start();

// Имитируем загрузку
setTimeout(function() {
NProgress.set(0.4); // 40% загрузки
}, 1000);

setTimeout(function() {
NProgress.set(0.7); // 70% загрузки
}, 2000);

// Завершить загрузку
setTimeout(function() {
NProgress.done();
}, 3000);
</script>

.circles-loader {
position: relative;
width: 60px;
height: 60px;
}

.circles-loader div {
position: absolute;
width: 100%;
height: 100%;
border: 3px solid transparent;
border-top-color: #3498db;
border-radius: 50%;
animation: circles-spin 1.2s linear infinite;
}

.circles-loader div:nth-child(2) {
border-top-color: transparent;
border-right-color: #e74c3c;
animation-delay: -0.3s;
}

.circles-loader div:nth-child(3) {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #2ecc71;
animation-delay: -0.6s;
}

@keyframes circles-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.percent-loader {
position: relative;
width: 100px;
height: 100px;
}

.percent-loader .circle {
width: 100%;
height: 100%;
border: 6px solid #f3f3f3;
border-top: 6px solid #3498db;
border-radius: 50%;
animation: percent-spin 2s linear infinite;
}

.percent-loader .percent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: bold;
color: #333;
}

@keyframes percent-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* JavaScript для обновления процентов */
let percent = 0;
const interval = setInterval(() => {
percent += 1;
document.querySelector('.percent').textContent = percent + '%';
if (percent >= 100) {
clearInterval(interval);
document.querySelector('.percent-loader').style.display = 'none';
}
}, 50);

// HTML структура
<div class="preloader">
<div class="loader"></div>
<div class="progress">
<div class="progress-bar"></div>
<div class="progress-text">0%</div>
</div>
<div class="loading-text">Загружаем ресурсы...</div>
</div>

<script>
// Получаем элементы прелоадера
const preloader = document.querySelector('.preloader');
const progressBar = document.querySelector('.progress-bar');
const progressText = document.querySelector('.progress-text');
const loadingText = document.querySelector('.loading-text');

// Общее количество ресурсов для загрузки
const totalResources = document.images.length + 
document.querySelectorAll('video, audio, iframe').length;
let loadedResources = 0;

// Функция обновления прогресса
function updateProgress() {
const percentage = Math.round((loadedResources / totalResources) * 100);
progressBar.style.width = percentage + '%';
progressText.textContent = percentage + '%';

// Изменяем текст в зависимости от прогресса
if (percentage < 30) {
loadingText.textContent = 'Загружаем ресурсы...';
} else if (percentage < 60) {
loadingText.textContent = 'Почти готово...';
} else if (percentage < 90) {
loadingText.textContent = 'Завершающие штрихи...';
} else {
loadingText.textContent = 'Запускаем!';
}

// Скрываем прелоадер, когда всё загружено
if (percentage === 100) {
setTimeout(() => {
preloader.style.opacity = '0';
setTimeout(() => {
preloader.style.display = 'none';
}, 500);
}, 1000);
}
}

// Отслеживаем загрузку изображений
Array.from(document.images).forEach(img => {
if (img.complete) {
loadedResources++;
updateProgress();
} else {
img.addEventListener('load', () => {
loadedResources++;
updateProgress();
});
img.addEventListener('error', () => {
loadedResources++;
updateProgress();
});
}
});

// Отслеживаем другие ресурсы
document.querySelectorAll('video, audio, iframe').forEach(elem => {
elem.addEventListener('loadeddata', () => {
loadedResources++;
updateProgress();
});
elem.addEventListener('error', () => {
loadedResources++;
updateProgress();
});
});

// Если загрузка длится слишком долго или нет ресурсов,
// показываем полную загрузку через 5 секунд
setTimeout(() => {
if (progressText.textContent !== '100%') {
loadedResources = totalResources;
updateProgress();
}
}, 5000);
</script>