Free Photos
WordPress Themes

Fake JS Preloader

HTML
<div class="loader"> <div class="loader-inner"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/logo-empathia.png" width="25" height="33" alt="Empathia logo"/> <div class="canvas-wrapper"> <canvas class="loader-canvas"></canvas> <div> <svg viewBox="0 0 32 32" id="reload"> <path d="M28,16c-1.219,0-1.797,0.859-2,1.766C25.269,21.03,22.167,26,16,26c-5.523,0-10-4.478-10-10S10.477,6,16,6 c2.24,0,4.295,0.753,5.96,2H20c-1.104,0-2,0.896-2,2s0.896,2,2,2h6c1.104,0,2-0.896,2-2V4c0-1.104-0.896-2-2-2s-2,0.896-2,2v0.518 C21.733,2.932,18.977,2,16,2C8.268,2,2,8.268,2,16s6.268,14,14,14c9.979,0,14-9.5,14-11.875C30,16.672,28.938,16,28,16z"/> </svg> </div> </div> </div> </div>
SCSS
body { background-color: #171723; color: #fff; overflow: hidden; } .loader { display: flex; height: 100vh; align-items: center; } .loader-inner { flex: 1; padding: 2rem 0; text-align: center; } #reload { width: 16px; height: 16px; margin-top: 1rem; fill: #fff; opacity: .6; cursor: pointer; transform: scale(0); transition: transform 300ms ease; } #reload:hover { opacity: 1; } #reload.active { transform: scale(1); } canvas { transition: opacity 300ms ease; } .canvas-wrapper { position: relative; padding: 2rem 20px 0; }
ES6
/* * Noel Delgado | @pixelia_me * Logo: empathia.agency */ const ctx = document.getElementsByTagName('canvas')[0].getContext('2d'); const reloadElementButton = document.getElementById('reload'); const COLOURS = ['#6bd0e4', '#604eb1', '#c88e66', '#c955a9']; const INTERVAL = 60; const H = 10; const CY = (H / 2); const PROGRESS_MAX = 100; const MAX_WIDTH = 400; const WIDTH_OFFSET = 40; let W; let CX; let gradient; let then = Date.now(); let progress = 0; let _requestID; function loaded() { progress -= 1; const progress_pixels = (progress * W / 100); const inversed_progress_pixels = (W - progress_pixels); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.beginPath(); ctx.moveTo(0, CY); ctx.globalAlpha = 0.07; ctx.strokeStyle = '#fff'; ctx.lineTo((W - inversed_progress_pixels), CY); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.globalAlpha = 1; ctx.strokeStyle = gradient; ctx.moveTo(W - inversed_progress_pixels, CY); ctx.lineTo(inversed_progress_pixels, CY); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.globalAlpha = 0.07; ctx.strokeStyle = '#fff'; ctx.moveTo(progress_pixels, CY); ctx.lineTo(W, CY); ctx.stroke(); ctx.closePath(); _requestID = requestAnimationFrame(loaded); if (progress <= 50) { cancelAnimationFrame(_requestID); reloadElementButton.classList.add('active'); } } function loading() { const progress_pixels = (progress * W / 100); const half_progress_pixels = (progress_pixels / 2); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.beginPath(); ctx.globalAlpha = 0.5; ctx.strokeStyle = gradient; ctx.moveTo(0, CY); ctx.lineTo(CX - half_progress_pixels, CY); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.globalAlpha = 1; ctx.moveTo(CX - half_progress_pixels, CY); ctx.strokeStyle = gradient; for (var i = 0; i < (progress_pixels / 2); i++) { const x = (CX - half_progress_pixels) + (i * 2); const r = Math.floor(Math.random() * H) + 1; ctx.quadraticCurveTo(x, r, x, r); } ctx.quadraticCurveTo(CX + half_progress_pixels, CY, CX + half_progress_pixels, CY); ctx.stroke(); ctx.closePath(); ctx.beginPath(); ctx.globalAlpha = 0.5; ctx.moveTo(CX + half_progress_pixels, CY); ctx.strokeStyle = gradient; ctx.lineTo(W, CY); ctx.stroke(); ctx.closePath(); _requestID = requestAnimationFrame(handleLoading); } function handleLoading() { if (_requestID % 2) progress += 0.5; if (progress >= PROGRESS_MAX) return loaded(); const now = Date.now(); const delta = (now - then); if (delta > INTERVAL) { then = (now - (delta % INTERVAL)); return loading(); } _requestID = requestAnimationFrame(handleLoading); } function startLoading() { progress = 0; reloadElementButton.classList.remove('active'); _requestID = requestAnimationFrame(handleLoading); } function rescale() { const w = window.innerWidth; const ratio = window.devicePixelRatio; if (w > (MAX_WIDTH + WIDTH_OFFSET)) { W = MAX_WIDTH; } else { W = (w - WIDTH_OFFSET); } if (ratio) { ctx.canvas.width = (W * ratio); ctx.canvas.height = (H * ratio); ctx.canvas.style.width = `${W}px`; ctx.canvas.style.height = `${H}px`; ctx.scale(ratio, ratio); } else { ctx.canvas.width = W; ctx.canvas.height = H; } CX = (W / 2); gradient = ctx.createLinearGradient(0, 0, W, 0); gradient.addColorStop(0.2, COLOURS[0]); gradient.addColorStop(0.4, COLOURS[1]); gradient.addColorStop(0.6, COLOURS[2]); gradient.addColorStop(0.8, COLOURS[3]); } function setup() { startLoading(); reloadElementButton.addEventListener('click', startLoading); window.addEventListener('resize', rescale); rescale(); } window.onload = setup();
Expand for more options Login