(function () { let dpr = Math.min(window.devicePixelRatio, 2); const onResize = () => { dpr = Math.min(window.devicePixelRatio, 2); }; onResize(); window.addEventListener('resize', onResize); const width = window.innerWidth * dpr; const height = window.innerHeight * dpr; const container = document.getElementById('nextjs-preloader'); if (!container) return; container.innerHTML = `

0 %

Загрузка

`; const canvas = document.getElementById('preloader-canvas'); const ctx = canvas.getContext('2d'); const centerX = width / 2; const centerY = height / 2; const isMobile = window.innerWidth <= 768 const baseWidth = 1920; const dimension = Math.min(width, height) * (2 / dpr); const getResponsiveDimension = (value) => (value / baseWidth) * dimension; const r1 = (getResponsiveDimension(586) / 2) * dpr; const r2 = (getResponsiveDimension(472) / 2) * dpr; const largeRadius = (getResponsiveDimension(181) / 2) * dpr; const middleRadius = (getResponsiveDimension(90) / 2) * dpr; const drawCircle = (x, y, radius, strokeStyle = '#fff', fillStyle = null) => { ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI); ctx.lineWidth = 1; if (fillStyle) { ctx.fillStyle = fillStyle; ctx.fill(); } if (strokeStyle) { ctx.strokeStyle = strokeStyle; ctx.stroke(); } ctx.closePath(); }; const degToRad = (deg) => deg * Math.PI / 180; const easeInOutQuart = (t) => t < 0.5 ? 7.5 * t * t * t * t : 1 - 7.5 * Math.pow(1 - t, 4); let TOTAL_DURATION = 5000; if (window.navigator.connection) { const { effectiveType, downlink } = window.navigator.connection; TOTAL_DURATION = 12000 / downlink } const startTime = performance.now(); let progress = 0; let isComplete = false; const drawProgressLine = (angleInDegrees, offset, render = true) => { if (!ctx || progress === 0) return; const startRadius = largeRadius; const angle = degToRad(angleInDegrees); const startX = centerX + Math.cos(angle) * startRadius; const startY = centerY + Math.sin(angle) * startRadius; const a1 = width / 2; const c1 = a1 / Math.cos(degToRad(30)); const a2 = height / 2; const c2 = a2 / Math.cos(degToRad(60)); const finalRadius = Math.min(c1, c2); const endRadius = (offset + (1 - offset) * progress) * finalRadius; const endX = centerX + Math.cos(angle) * endRadius; const endY = centerY + Math.sin(angle) * endRadius; ctx.beginPath(); ctx.moveTo(startX, startY); ctx.lineTo(endX, endY); if (render) ctx.stroke(); }; let lastTime = performance.now(); const preloaderPercent = document.getElementById('preloader-percent'); const renderLoop = (t) => { if (t - lastTime < 24) { setTimeout(renderLoop, 0); return; } lastTime = t; const elapsed = performance.now() - startTime; const tNormalized = elapsed / TOTAL_DURATION; progress = Math.min(tNormalized, 1); if (!preloaderPercent) { preloaderPercent = document.getElementById('preloader-percent'); } if (preloaderPercent) { preloaderPercent.innerText = Math.round(progress * 100); } if (elapsed < TOTAL_DURATION) { const time = performance.now() * 0.0005; ctx.clearRect(0, 0, width, height); ctx.save(); ctx.lineWidth = dpr; ctx.strokeStyle = '#fff'; drawCircle(centerX, centerY, r1, '#fff'); drawCircle(centerX, centerY, r2, '#fff'); drawCircle(centerX, centerY, largeRadius, '#fff'); const middleX = centerX + Math.cos(time) * (largeRadius / 2); const middleY = centerY + Math.sin(time) * (largeRadius / 2); drawCircle(middleX, middleY, middleRadius, '#fff'); const offset = (r1 - r2) / 3; const startRadius = r2 + offset; const endRadius = r1 - offset; const LINES_COUNT = 24; for (let i = 0; i < LINES_COUNT; i++) { const angle = degToRad((i / LINES_COUNT) * 360) + time * 0.3; const startX = centerX + Math.cos(angle) * startRadius; const startY = centerY + Math.sin(angle) * startRadius; const endX = centerX + Math.cos(angle) * endRadius; const endY = centerY + Math.sin(angle) * endRadius; ctx.beginPath(); ctx.moveTo(startX, startY); ctx.lineTo(endX, endY); ctx.stroke(); } if (isMobile) { drawProgressLine(60, 0.25, true); drawProgressLine(120, 0.35, true); drawProgressLine(-60, 0.6, true); drawProgressLine(-120, 0.35, true); } else { drawProgressLine(180 + 30, 0.35, true); drawProgressLine(-30, 0.25, true); drawProgressLine(30, 0.35, true); drawProgressLine(180 - 30, 0.6, true); } ctx.stroke(); drawCircle( middleX + Math.cos(-time - Math.PI / 2) * middleRadius, middleY + Math.sin(-time - Math.PI / 2) * middleRadius, (getResponsiveDimension(21) / 2) * dpr, '#fff', '#000' ); drawCircle( centerX + Math.cos(-time) * largeRadius, centerY + Math.sin(-time) * largeRadius, (getResponsiveDimension(17) / 2) * dpr, '#fff', '#000' ); drawCircle( centerX + Math.cos(-time + (Math.PI / 4) * 3) * largeRadius, centerY + Math.sin(-time + (Math.PI / 4) * 3) * largeRadius, (getResponsiveDimension(12) / 2) * dpr, '#fff', '#000' ); drawCircle( centerX + Math.cos(-time - Math.PI / 2) * largeRadius, centerY + Math.sin(-time - Math.PI / 2) * largeRadius, (getResponsiveDimension(12) / 2) * dpr, '#fff', '#000' ); ctx.restore(); setTimeout(renderLoop, 0); } else { progress = 1; isComplete = true; setTimeout(() => { window.removeEventListener('resize', onResize); container.innerHTML = ""; }, 400); } }; renderLoop(performance.now()); })();

Алексей Помельников