Light Loader

Developer
Jack Rugile
Size
2,738 Kb
Views
20,240
  1. Light Loader Previews
  2. Light Loader HTML Codes
  3. Light Loader CSS Codes
  4. Light Loader JS Codes

How do I make an light loader?

A canvas loader that sparks light from red to green.. What is a light loader? How do you make a light loader? This script and codes were developed by Jack Rugile on 11 August 2022, Thursday.

Light Loader Previews
IQ Test

Light Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Light Loader</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body {	background: #000;
}
canvas {	background: #181818;	box-shadow: 0 0 0 1px #282828;	bottom: 0;	left: 0;	margin: auto;	position: absolute;	right: 0;	top: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <script src="js/index.js"></script>
</body>
</html>

Light Loader - Script Codes CSS Codes

body {	background: #000;
}
canvas {	background: #181818;	box-shadow: 0 0 0 1px #282828;	bottom: 0;	left: 0;	margin: auto;	position: absolute;	right: 0;	top: 0;
}

Light Loader - Script Codes JS Codes

var canvas = document.createElement( 'canvas' ),	ctx = canvas.getContext( '2d' ),	width = 400,	height = 100,	loaded = 0,	loaderSpeed = 0.6,	loaderWidth = 310,	loaderHeight = 16,	loaderX = width / 2 - loaderWidth / 2,	loaderY = height / 2 - loaderHeight / 2,	particles = [],	particleLift = 180,	particleRate = 4,	hueStart = 0,	hueEnd = 120,	hue = 0,	gravity = 0.12,	dpr = window.devicePixelRatio;
document.body.appendChild( canvas );
canvas.width = width;
canvas.height = height;
canvas.style.width = ( width / dpr ) + 'px';
canvas.style.height = ( height / dpr ) + 'px';
ctx.globalCompositeOperation = 'lighter';
function rand( rMi, rMa ) {	return ~~((Math.random()*(rMa-rMi+1))+rMi);
}
function updateLoader() {	if( loaded < 100 ) {	loaded += loaderSpeed;	} else {	loaded = 0;	}
}
function renderLoader() {	ctx.fillStyle = '#000';	ctx.fillRect( loaderX, loaderY, loaderWidth, loaderHeight );	hue = hueStart + ( loaded / 100 ) * ( hueEnd - hueStart );	var newWidth = ( loaded / 100 ) * loaderWidth;	ctx.fillStyle = 'hsla(' + hue + ', 100%, 40%, 1)';	ctx.fillRect( loaderX, loaderY, newWidth, loaderHeight );	ctx.fillStyle = '#444';	ctx.fillRect( loaderX, loaderY, newWidth, loaderHeight / 2 );
}
function Particle() {	this.x = loaderX + ( ( loaded / 100 ) * loaderWidth ) - rand( 0, 1 );	this.y = height / 2 + rand( 0, loaderHeight ) - loaderHeight / 2;	this.vx = ( rand( 0, 4 ) - 2 ) / 100;	this.vy = ( rand( 0, particleLift ) - particleLift * 2 ) / 100;	this.width = rand( 1, 4 ) / 2;	this.height = rand( 1, 4 ) / 2;	this.hue = hue;
}
Particle.prototype.update = function( i ) {	this.vx += ( rand( 0, 6 ) - 3 ) / 100;	this.vy += gravity;	this.x += this.vx;	this.y += this.vy;	if( this.y > height ) {	particles.splice( i, 1 );	}
};
Particle.prototype.render = function() {	ctx.fillStyle = 'hsla(' + this.hue + ', 100%, ' + rand( 50, 70 ) + '%, ' + rand( 20, 100 ) / 100 + ')';	ctx.fillRect( this.x, this.y, this.width, this.height );
};
function createParticles() {	var i = particleRate;	while( i-- ) {	this.particles.push( new Particle() );	}
}
function updateParticles() {	var i = particles.length;	while( i-- ) {	var p = particles[ i ];	p.update( i );	};
}
function renderParticles() {	var i = particles.length;	while( i-- ) {	var p = particles[ i ];	p.render();	}
}
function clearCanvas() {	ctx.clearRect( 0, 0, width, height );
}
function loop() {	requestAnimationFrame( loop );	clearCanvas();	createParticles();	updateLoader();	updateParticles();	renderLoader();	renderParticles();
}
loop();
Light Loader - Script Codes
Light Loader - Script Codes
Home Page Home
Developer Jack Rugile
Username jackrugile
Uploaded August 11, 2022
Rating 4.5
Size 2,738 Kb
Views 20,240
Do you need developer help for Light 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!

Jack Rugile (jackrugile) Script Codes
Name
Rainbow Grid
Canvas Color Smoke
Scroll Progress as Canvas to Favicon
Canvas Swarming Bugs
Canvas Wave
Canvas Radar
CSS3 Pseudo Sound Bars
Develop Denver Logo
CSS Vinyl Record
Bouncing Ball Animation
Create amazing video scripts 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!