Crown Loader Animation

Developer
Mark Peck
Size
2,331 Kb
Views
16,192
  1. Crown Loader Animation Previews
  2. Crown Loader Animation HTML Codes
  3. Crown Loader Animation CSS Codes
  4. Crown Loader Animation JS Codes

How do I make an crown loader animation?

What is a crown loader animation? How do you make a crown loader animation? This script and codes were developed by Mark Peck on 13 October 2022, Thursday.

Crown Loader Animation Previews
IQ Test

Crown Loader Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Crown Loader Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="crown" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><defs><style>.cls-1{fill:#0f74b5;}</style></defs><title>Untitled-1</title><polygon class="cls-1" points="12.7 50 87.5 50 100 0 75 25 50 0 25.6 25 0 0 12.7 50"/></svg> <script src='http://cdn.jsdelivr.net/mojs/0.147.3/mo.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Crown Loader Animation - Script Codes CSS Codes

#crown { position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -50px; width: 100px; height: 50px;
}

Crown Loader Animation - Script Codes JS Codes

 var crown = document.querySelector('#crown'); var container = document.querySelector('.container');	var squashCurve = mojs.easing.path('M0,100.004963 C0,100.004963 25,147.596355 25,100.004961 C25,70.7741867 32.2461944,85.3230873 58.484375,94.8579105 C68.9280825,98.6531013 83.2611815,99.9999999 100,100'); var angleEasing = mojs.easing.path('M0,100c1.2-1.1,25.8,0.4,34.8-8.5s25.1-72.6,34.5-82 S100,0,100,0');	moburst1 = new mojs.Burst({	parent: container,	duration: 970,	delay: 230, repeat: 9999,	shape : 'circle',	fill : [ '#514c91' ],	opacity: 0.6,	x: '50%',	y: '50%',	radius: {0:120},	count: 10,	isRunLess: true,	easing: mojs.easing.bezier(0.4, 1, 0.3, 1)	}).run();	new mojs.Tween({	duration : 1200, repeat: 999, delay: 0,	onUpdate: function(progress) {	var squashProgress = squashCurve(progress),	scaleX = 1 - 2*squashProgress,	scaleY = 1 + 2*squashProgress; var angleProgress = angleEasing(progress);	crown.style.WebkitTransform = crown.style.transform = 'rotate(' + (360*angleProgress) + 'deg) scale3d(' + scaleX + ',' + scaleY + ',1)';	}	}).run();
Crown Loader Animation - Script Codes
Crown Loader Animation - Script Codes
Home Page Home
Developer Mark Peck
Username doodlemarks
Uploaded October 13, 2022
Rating 3.5
Size 2,331 Kb
Views 16,192
Do you need developer help for Crown Loader Animation?

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!

Mark Peck (doodlemarks) Script Codes
Name
Bootstrap Styleguide
Very Simple Slider
Basic line animation vivus
Simple Accurate Counter
Colors
3D Styled CSS Browser Mockup
CSS Navigation Menu
JQuery UI Draggable Experiment
Automated Browser Mockup
Blockquote Auto Tweet Button
Create amazing captions 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!