Canvas Spiral Loader

Developer
Kevin
Size
2,359 Kb
Views
26,312
  1. Canvas Spiral Loader Previews
  2. Canvas Spiral Loader HTML Codes
  3. Canvas Spiral Loader CSS Codes
  4. Canvas Spiral Loader JS Codes

How do I make an canvas spiral loader?

A simple quick canvas with rotating arcs.. What is a canvas spiral loader? How do you make a canvas spiral loader? This script and codes were developed by Kevin on 27 August 2022, Saturday.

Canvas Spiral Loader Previews
IQ Test

Canvas Spiral Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas Spiral Loader</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>

Canvas Spiral Loader - Script Codes CSS Codes

body { height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: black;
}
#canvas { height: 500px; width: 500px;
}

Canvas Spiral Loader - Script Codes JS Codes

function draw() { var canvas = document.getElementById("canvas"); canvas.height = 500; canvas.width = 500; var hh = canvas.height / 2; var hw = canvas.width / 2; if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.lineCap = "round"; var mods = { maxSize: 250, lineM: 30, fillColor: "rgba(0,0,0,.2)", arcColor: "rgb(0,255,255)", arcColor2: "rgb(0,120,205)" }; ctx.fillStyle = mods.fillColor; var arcs = []; var arcs2 = []; function ArcCreator(size, start, end) { this.size = size; this.start = start; this.end = end; } //Create Initial Arcs function initArcs() { for (var i = mods.lineM; i < mods.maxSize; i += mods.lineM) { var arcTemp = new ArcCreator( mods.maxSize - i, Math.PI * (0.5 + 0.05 * (i / mods.lineM)), Math.PI * (1.5 - 0.05 * (i / mods.lineM)) ); arcs.push(arcTemp); } for ( var i = mods.lineM; i < mods.maxSize - mods.lineM / 2; i += mods.lineM ) { var arcTemp = new ArcCreator( mods.maxSize - mods.lineM / 2 - i, Math.PI * (1.5 + 0.05 * (i / mods.lineM)), Math.PI * (2.5 - 0.05 * (i / mods.lineM)) ); arcs2.push(arcTemp); } ctx.lineWidth = mods.lineM / 4; animateArcs(); } initArcs(); //Draw the arcs function drawArcs(arr, color) { ctx.strokeStyle = color; for (var i = 0; i < arr.length; i++) { ctx.beginPath(); ctx.arc(hw, hh, arr[i].size, arr[i].start, arr[i].end); ctx.stroke(); arr[i].start += arr[i].size / 2000; arr[i].end += arr[i].size / 2000; } } //Animate function animateArcs() { ctx.fillRect(0, 0, canvas.width, canvas.height); drawArcs(arcs, mods.arcColor); drawArcs(arcs2, mods.arcColor2); requestAnimationFrame(animateArcs); } }
}
draw();
var Modular = (function(){
})();
Canvas Spiral Loader - Script Codes
Canvas Spiral Loader - Script Codes
Home Page Home
Developer Kevin
Username KevinBruland
Uploaded August 27, 2022
Rating 3
Size 2,359 Kb
Views 26,312
Do you need developer help for Canvas Spiral Loader?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin (KevinBruland) Script Codes
Name
Simon
A Pen by Kevin
Glossy Buttons
Pomodoro Clock
Local Weather
CSS Transform Sphere
Canvas Optical Illusion
Memory
Twitch
Canvas Circle Illusion
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!