Skip to content

Instantly share code, notes, and snippets.

@mgechev
Created December 12, 2020 15:46
Show Gist options
  • Save mgechev/89dd4ebdc3b7907936a510fcd46866dc to your computer and use it in GitHub Desktop.
Save mgechev/89dd4ebdc3b7907936a510fcd46866dc to your computer and use it in GitHub Desktop.
<link rel="shortcut icon" width=32px>
<canvas style="display: none" id="loader" width="16" height="16"></canvas>
<script>
class Loader {
constructor(link, canvas) {
this.link = link;
this.canvas = canvas;
this.context = canvas.getContext('2d');
this.context.lineWidth = 2;
this.context.strokeStyle = "white";
}
setProgress(progress) {
const startAngle = 1.5 * Math.PI;
this.context.clearRect(0, 0, 16, 16);
this.context.beginPath();
this.context.arc(8, 8, 5, startAngle, (progress * 2 * Math.PI) / 100 + startAngle);
this.context.stroke();
this.link.href = this.canvas.toDataURL("image/png"); // update favicon
}
}
const canvas = document.querySelector("#loader");
const link = document.querySelector('link[rel*="icon"]');
const loader = new Loader(link, canvas);
let progress = 0;
const loading = () => {
loader.setProgress(progress);
if (progress >= 100) {
return;
}
progress++;
requestAnimationFrame(loading);
}
loading();
</script>
@hongbo-miao
Copy link

Nice! Thanks for sharing!

@partharanjan
Copy link

Awesome ! I will implement this on my project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment