Circular canvas loader

Developer
Pimskie
Size
3,921 Kb
Views
64,768
  1. Circular canvas loader Previews
  2. Circular canvas loader HTML Codes
  3. Circular canvas loader CSS Codes
  4. Circular canvas loader JS Codes

How do I make an circular canvas loader?

A canvas showing loading progress in a circle. Here it's faked and animated on requestAnimationFrame. But you get the idea.. What is a circular canvas loader? How do you make a circular canvas loader? This script and codes were developed by Pimskie on 13 June 2022, Monday.

Circular canvas loader Previews
IQ Test

Circular canvas loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Circular canvas 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> <h1>Circular canvas loader</h1>
<div class="loader-holder" id="loader-holder"> <div class="percent"></div> <canvas id="loader"></canvas>
</div>
<button id="btn-reload">Do it!</button> <script src="js/index.js"></script>
</body>
</html>

Circular canvas loader - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Roboto:700,300);
* { box-sizing: border-box;
}
body { font-family: 'Roboto', sans-serif; font-weight: 300; padding: 2em; text-align: center;
}
h1 { font-size: 1.5em;
}
button { background: #00a5ff; border: none; color: #fff; padding: 10px 15px; border-radius: 10px; cursor: pointer; -webkit-transition: background 0.1s ease-in; -moz-transition: background 0.1s ease-in; transition: background 0.1s ease-in;
}
button:hover { background: #006399;
}
.loader-holder { width: 200px; height: 200px; position: relative; margin: 30px auto;
}
.loader-holder.loading-done { -webkit-animation: loading-done 0.5s cubic-bezier(0.99, 0.27, 0.99, 1.01) forwards; -moz-animation: loading-done 0.5s cubic-bezier(0.99, 0.27, 0.99, 1.01) forwards; animation: loading-done 0.5s cubic-bezier(0.99, 0.27, 0.99, 1.01) forwards;
}
.loader-holder.loading-done .percent { opacity: 0;
}
.loader-holder .percent { position: absolute; z-index: 10; text-align: center; width: 100%; top: 50%; font-weight: 700; font-size: 1.5em; line-height: 0; color: #262626; opacity: 1; -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out;
}
.loader-holder > canvas { width: 100%; height: 100%; border-radius: 100%;
}
@-webkit-keyframes loading-done { 0% { -webkit-transform: scale(1); } 20% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(0); }
}
@-moz-keyframes loading-done { 0% { -moz-transform: scale(1); } 20% { -moz-transform: scale(1.2); } 100% { -moz-transform: scale(0); }
}
@keyframes loading-done { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 20% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); }
}

Circular canvas loader - Script Codes JS Codes

;(function () { // request animation frame window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)}}() var Loader = function (options) { this.options = options; this.options.completeCallback = this.options.completeCallback || function () {}; this.options.progressCallback = this.options.progressCallback || function () {}; this.options.borderColor = options.borderColor || '#0000000'; this.canvas = document.querySelector(options.canvas); this.ctx = this.canvas.getContext('2d'); this.loaded = 0; var parent = this.canvas.parentNode; this.canvas.width = parent.offsetWidth; this.canvas.height = parent.offsetHeight; this.canvasR = parent.offsetWidth >> 1; this.draw(); } Loader.prototype.init = function() { this.loaded = 0; this.load(); } Loader.prototype.load = function() { var me = this; me.draw(); me.options.progressCallback(me.loaded); if (me.loaded < 100) { requestAnimFrame(function () { me.load(); }); } else { me.loadingComplete(); } me.loaded += .5; } Loader.prototype.loadingComplete = function() { this.options.completeCallback(); } Loader.prototype.draw = function () { var fillRadian = 360 / 100 * this.loaded * Math.PI / 180, midX = this.canvas.width * .5, midY = this.canvas.height * .5; this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // draw arc this.ctx.beginPath(); this.ctx.arc(midX, midY, this.canvasR, 0, fillRadian, false); this.ctx.lineWidth = this.options.arcWidth, this.ctx.strokeStyle = this.options.arcColor, this.ctx.stroke(); // draw border if (this.options.borderWidth !== 'undefined') { this.ctx.beginPath(); this.ctx.arc(midX, midY, this.canvasR, 0, Math.PI * 2, false); this.ctx.arc(midX, midY, this.canvasR - this.options.borderWidth, 0, Math.PI * 2, true); this.ctx.fillStyle = this.options.borderColor, this.ctx.fill(); } } var holder = document.getElementById('loader-holder'); var loadingProgress = function (percent) { var percentHolder = document.querySelector('.percent'); percentHolder.innerHTML = Math.round(percent) + '%'; } var loadingDone = function () { holder.classList.add('loading-done'); } var loader = new Loader({ canvas: '#loader', arcWidth: 100, arcColor: 'rgb(0, 165, 255)', borderWidth: 20, borderColor: 'rgb(53, 138, 185)', progressCallback: loadingProgress, completeCallback: loadingDone }); var button = document.getElementById('btn-reload'); button.addEventListener('mousedown', function() { holder.classList.remove('loading-done'); loader.init(); }, false);
})();
Circular canvas loader - Script Codes
Circular canvas loader - Script Codes
Home Page Home
Developer Pimskie
Username pimskie
Uploaded June 13, 2022
Rating 3
Size 3,921 Kb
Views 64,768
Do you need developer help for Circular canvas 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!

Pimskie (pimskie) Script Codes
Name
Neon spring trails
Duplicate geometry
Apollonian gasket
Snow
Particles Clifford attractor
Planet attractors
SVG animation test
Rainbow particles
Flowing transforming circle
Aizawa Attractor
Create amazing blog posts 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!