Canvas Sparkly Circle Loader
How do I make an canvas sparkly circle loader?
What is a canvas sparkly circle loader? How do you make a canvas sparkly circle loader? This script and codes were developed by Jack Rugile on 11 August 2022, Thursday.
Canvas Sparkly Circle Loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas Sparkly Circle Loader</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="js/index.js"></script>
</body>
</html>
Canvas Sparkly Circle Loader - Script Codes CSS Codes
body { background: #111; overflow: hidden;
}
canvas { bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; -webkit-transform: translateZ(0); transform: translateZ(0);
}
Canvas Sparkly Circle Loader - Script Codes JS Codes
var $ = {};
$.Particle = function( opt ) { this.radius = 7; this.x = opt.x; this.y = opt.y; this.angle = opt.angle; this.speed = opt.speed; this.accel = opt.accel; this.decay = 0.01; this.life = 1;
};
$.Particle.prototype.step = function( i ) { this.speed += this.accel; this.x += Math.cos( this.angle ) * this.speed; this.y += Math.sin( this.angle ) * this.speed; this.angle += $.PI / 64; this.accel *= 1.01; this.life -= this.decay; if( this.life <= 0 ) { $.particles.splice( i, 1 ); }
};
$.Particle.prototype.draw = function( i ) { $.ctx.fillStyle = $.ctx.strokeStyle = 'hsla(' + ( $.tick + ( this.life * 120 ) ) + ', 100%, 60%, ' + this.life + ')'; $.ctx.beginPath(); if( $.particles[ i - 1 ] ) { $.ctx.moveTo( this.x, this.y ); $.ctx.lineTo( $.particles[ i - 1 ].x, $.particles[ i - 1 ].y ); } $.ctx.stroke(); $.ctx.beginPath(); $.ctx.arc( this.x, this.y, Math.max( 0.001, this.life * this.radius ), 0, $.TWO_PI ); $.ctx.fill(); var size = Math.random() * 1.25; $.ctx.fillRect( ~~( this.x + ( ( Math.random() - 0.5 ) * 35 ) * this.life ), ~~( this.y + ( ( Math.random() - 0.5 ) * 35 ) * this.life ), size, size );
}
$.step = function() { $.particles.push( new $.Particle({ x: $.width / 2 + Math.cos( $.tick / 20 ) * $.min / 2, y: $.height / 2 + Math.sin( $.tick / 20 ) * $.min / 2, angle: $.globalRotation + $.globalAngle, speed: 0, accel: 0.01 })); $.particles.forEach( function( elem, index ) { elem.step( index ); }); $.globalRotation += $.PI / 6; $.globalAngle += $.PI / 6;
};
$.draw = function() { $.ctx.clearRect( 0, 0, $.width, $.height ); $.particles.forEach( function( elem, index ) { elem.draw( index ); });
};
$.init = function() { $.canvas = document.createElement( 'canvas' ); $.ctx = $.canvas.getContext( '2d' ); $.width = $.canvas.width = 300; $.height = $.canvas.height = 300; $.min = $.width * 0.5; $.particles = []; $.globalAngle = 0; $.globalRotation = 0; $.tick = 0; $.PI = Math.PI; $.TWO_PI = $.PI * 2; $.ctx.globalCompositeOperation = 'lighter'; document.body.appendChild( $.canvas ); $.loop();
};
$.loop = function() { requestAnimationFrame( $.loop ); $.step(); $.draw(); $.tick++;
};
$.init();
Developer | Jack Rugile |
Username | jackrugile |
Uploaded | August 11, 2022 |
Rating | 4.5 |
Size | 2,446 Kb |
Views | 18,216 |
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!
Name | Size |
Light Loader | 2,738 Kb |
Bubble Sketch.js Test | 3,437 Kb |
Canvas Wave | 2,902 Kb |
Canvas Orbital Trails v2 | 3,421 Kb |
Canvas Swarming Bugs | 4,599 Kb |
Glowing Pulse Form | 2,542 Kb |
Canvas Orbital Trails | 3,697 Kb |
Canvas Simple Circle Loader | 2,946 Kb |
Snake Game - CSS Renderer | 7,412 Kb |
Canvas Waterfall | 3,324 Kb |
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!
Name | Username | Size |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
Simple search using AngularJS | Haykou | 1,802 Kb |
Preloader | Rikki_Sixx | 2,815 Kb |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
Wave Lines | Mikehobizal | 4,023 Kb |
Hello People | Danburrows | 2,365 Kb |
Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
Toggle menu | Seyedi | 2,279 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!