Crash Loader

Developer
Elliot Geno
Size
2,615 Kb
Views
30,360
  1. Crash Loader Previews
  2. Crash Loader HTML Codes
  3. Crash Loader CSS Codes
  4. Crash Loader JS Codes

How do I make an crash loader?

What is a crash loader? How do you make a crash loader? This script and codes were developed by Elliot Geno on 20 November 2022, Sunday.

Crash Loader Previews
IQ Test

Crash Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Crash Loader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 50 600 450" opacity="0"> <line x1="150" x2="450" y1="300" y2="300" fill="none" stroke="#333" stroke-width="48" stroke-linecap="round"/> <line x1="150" x2="450" y1="300" y2="300" fill="none" stroke="#222" stroke-width="30" stroke-linecap="round"/> <path stroke-dashoffset="833" stroke-dasharray="834 834" stroke-linecap="round" fill="none" fill-rule="evenodd" stroke="#8ADB2C" stroke-width="18" d="M150,300c0,0,138,0,198,0c112,0,66-122,15-165c-43.9-37-92-10-79,33c7.7,25.5,51.6,47.6,99,36c139-34,67,96,67,96" /> <text fill="#FFF" transform="translate(145.615 266.265)" font-family="sans-serif" font-size="31"> loading... </text> <polygon fill="#FFA06C" points="434 278 424 205 459 286 498 234 479 298 538 275 484 320 542 349 462 335 462 394 439 318 372 356 427 299 372 260" /> <polygon fill="#FFE45F" points="414 252 440 299 497 233 479 287 529 283 498 315 539 334 476 329 503 382 448 329 432 382 426 317 372 333 420 299" /> <polygon fill="#FFF" points="434.1 303.9 428.3 261.2 451.7 290.5 457.6 265.4 468.5 296.4 528 252 481.9 303.9 517.1 312.3 469.3 316.5 509.6 341.6 462.6 336.6 458.4 376 443.3 319.8 417.4 357.6 426.6 314 383 298.9" />
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Crash Loader - Script Codes CSS Codes

body{	margin:0;	background:#222;
}
svg{	width:100%;	height:100%;	position:fixed;
}

Crash Loader - Script Codes JS Codes

var path = document.querySelector("path");
var length = path.getTotalLength();
// create timeline
var timeline = new TimelineMax({	repeat: -1,	repeatDelay: 1
});
// initial animation of svg
TweenMax.to("svg", 0.5, {	opacity: 1
});
// set up looping text animation
TweenMax.to("text", 0.5, {	opacity: .2,	yoyo: true,	repeat: -1,	ease: Sine.easeInOut
});
// path animation
timeline.from(path, 1, {	autoAlpha: 0,	ease: Power2.easeOut
});
timeline.to(path, 2, {	attr: {	"stroke-dashoffset": 0	},	ease: Quint.easeIn
}, 0);
// Explosion
timeline.staggerFrom("polygon", .2, {	scale: 0,	transformOrigin: "center",	ease: Back.easeOut	}, .05, 2);	timeline.staggerTo("polygon", 0.5, {	cycle: {	rotation: [-90, 90]	},	transformOrigin: "center"	}, 0, 2);	timeline.staggerTo("polygon", .5, {	autoAlpha: 0,	transformOrigin: "center",	ease: Back.easeOut	}, -.05, 2 + "+=.4");
// remove path
timeline.to(path, 2, {	attr: {	"stroke-dashoffset": -length	},	autoAlpha: 0,	ease: Quint.easeInOut
}, 2);
Crash Loader - Script Codes
Crash Loader - Script Codes
Home Page Home
Developer Elliot Geno
Username pyrografix
Uploaded November 20, 2022
Rating 3
Size 2,615 Kb
Views 30,360
Do you need developer help for Crash 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!

Elliot Geno (pyrografix) Script Codes
Name
A Pen by Elliot Geno
Calendar
TweenMax animating array object
Gnat Attack
Prism
Purple Nurple
Alternate Tween Properties - TweenMax
Iris
One Percent
Following a Path
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!