Spinner
How do I make an spinner?
A little infinite spinner made in pure canvas.. What is a spinner? How do you make a spinner? This script and codes were developed by Sylvain Reucherand on 07 November 2022, Monday.
Spinner - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spinner</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://facebook.github.io/rebound-js/rebound.js'></script> <script src="js/index.js"></script>
</body>
</html>
Spinner - Script Codes CSS Codes
canvas { left: 50%; margin-left: -80px; margin-top: -80px; position: fixed; top: 50%;
}
Spinner - Script Codes JS Codes
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var easeInOutQuart = function easeInOutQuart(t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b; return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
};
var Wheel = function () { function Wheel(s) { _classCallCheck(this, Wheel); this.canvas = document.createElement('canvas'); this.context = this.canvas.getContext('2d'); this.width = s; this.height = s; this.radius = s / 2; this.started = 0; this.elapsed = 0; this.duration = 1500; } Wheel.prototype.init = function init() { this.canvas.width = this.width; this.canvas.height = this.height; this.canvas.style.width = this.width; this.canvas.style.height = this.height; this.started = Date.now(); }; Wheel.prototype.update = function update(dt) { this.elapsed += dt; this.progress = this.elapsed / this.duration; this.progress = this.progress > 1 && 1 || this.progress; }; Wheel.prototype.render = function render() { var progress = easeInOutQuart(this.progress, 0, 1, 1); this.context.clearRect(0, 0, this.width, this.height); var offsetX = this.width / 2; var offsetY = this.height / 2; var radius = Math.max(0, progress * this.radius); var angle = progress * Math.PI * 2; var x = Math.cos(angle - Math.PI) * (this.radius - radius) + offsetX; var y = Math.sin(angle - Math.PI) * (this.radius - radius) + offsetY; this.context.fillStyle = '#af3063'; this.context.strokeStyle = '#af3063'; this.context.save(); this.context.beginPath(); this.context.arc(offsetX, offsetY, this.radius, 0, 2 * Math.PI); this.context.fill(); this.context.globalCompositeOperation = 'source-in'; var x2 = Math.cos(-angle) * radius; var y2 = Math.sin(-angle) * radius; this.context.beginPath(); this.context.arc(offsetX + x2, offsetY - y2, this.radius, angle, angle + Math.PI); this.context.lineWidth = radius * 2; this.context.stroke(); this.context.restore(); this.context.beginPath(); this.context.arc(x, y, radius, 0, 2 * Math.PI); this.context.fill(); }; return Wheel;
}();
var Spinner = function () { function Spinner(s) { _classCallCheck(this, Spinner); this.canvas = document.createElement('canvas'); this.context = this.canvas.getContext('2d'); this.width = s; this.height = s; this.wheels = []; this.update = this.update.bind(this); document.body.appendChild(this.canvas); this.time = 0; } Spinner.prototype.init = function init() { this.canvas.width = this.width; this.canvas.height = this.height; this.canvas.style.width = this.width; this.canvas.style.height = this.height; this.time = Date.now(); }; Spinner.prototype.start = function start() { this.tick(); this.update(); }; Spinner.prototype.tick = function tick() { var wheel = new Wheel(this.width); wheel.init(); this.wheels.push(wheel); }; Spinner.prototype.update = function update() { window.requestAnimationFrame(this.update); var now = Date.now(); var dt = now - this.time; if (this.wheels.slice(-1)[0].progress === 1) { if (this.wheels.length + 1 > 4) { this.wheels = []; } this.tick(); } for (var i = 0, wheel; i < this.wheels.length; i++) { wheel = this.wheels[i]; wheel.update(dt); } this.time = now; this.render(); }; Spinner.prototype.render = function render() { this.context.clearRect(0, 0, this.width, this.height); this.context.globalCompositeOperation = 'source-over'; for (var i = 0, wheel; i < this.wheels.length; i++) { wheel = this.wheels[i]; wheel.render(); this.context.save(); if (!!(i % 2)) { this.context.globalCompositeOperation = 'destination-out'; } this.context.drawImage(wheel.canvas, 0, 0, this.width, this.height); this.context.restore(); } this.context.globalCompositeOperation = 'destination-in'; this.context.beginPath(); this.context.arc(this.width / 2, this.height / 2, this.width / 2 - 3, 0, 2 * Math.PI); this.context.fill(); }; return Spinner;
}();
var spinner = new Spinner(160);
spinner.init();
spinner.start();
Developer | Sylvain Reucherand |
Username | sreucherand |
Uploaded | November 07, 2022 |
Rating | 4.5 |
Size | 4,080 Kb |
Views | 44,528 |
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 |
UI Buttons animation | 6,420 Kb |
A Pen by Sylvain Reucherand | 3,847 Kb |
Mousewheel indicator animation | 4,740 Kb |
Flower expansion | 3,425 Kb |
Closest point of a polygon to another point | 3,203 Kb |
Blurred text | 3,500 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 |
Nav Test -- cats 1 | Payls | 4,735 Kb |
A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
STIKHOI | Denmch | 7,122 Kb |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
Email Marketing Mock | Kristenzirkler | 8,224 Kb |
Day 1 - Portfolio | Chpecson | 3,532 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Wrap_Test | Mscfourn | 7,503 Kb |
Resume | Rottingroom | 5,483 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!