<!DOCTYPE html>
<
html
lang="en">
<
head
>
<
meta
charset="UTF-8">
<
link
rel="shortcut icon" href="gfgFavicon.png"
width
=
32px
>
<
script
language="javascript">
onload = () => {
var canvas = document.getElementById("canvas");
context = canvas.getContext('2d');
if (!!context) {
var animateBtn = document.getElementById("animateBtn");
faviconVar = document.querySelector('link[rel*="icon"]');
// The styles used for the square which will
// be animated in place of favicon
let linerGradient = context.createLinearGradient(0, 0, 32, 32);
linerGradient.addColorStop(0, '#8be8a7');
linerGradient.addColorStop(1, '#297d4c');
context.strokeStyle = linerGradient;
context.lineWidth = 10;
// On page refresh , the button is enabled
if (animateBtn.disabled) animateBtn.removeAttribute('disabled');
animateBtn.addEventListener('click', function()
{
// Variable used for drawing incrementation
n = 0,
// Speed interval for animation
loadingInterval = setInterval(drawSquareLoader, 80);
this.textContent = 'Animating...';
this.style.backgroundColor = '#297d4c';
//Once the drawing is done, the button is again disabled
this.setAttribute('disabled', '');
});
}
};
// Function for drawing square in canvas in a incrementing way
function drawSquareLoader() {
with(context) {
clearRect(0, 0, 32, 32);
beginPath();
// One fourth time taken to draw
if (n <= 25) {
moveTo(0, 0);
lineTo((32 / 25) * n, 0);
}
// Between second quarter of drawing
else if (n > 25 && n <= 50) {
moveTo(0, 0);
lineTo(32, 0);
moveTo(32, 0);
lineTo(32, (32 / 25) * (n - 25));
}
// Between third quarter of drawing
else if (n > 50 && n <= 75) {
moveTo(0, 0);
lineTo(32, 0);
moveTo(32, 0);
lineTo(32, 32);
moveTo(32, 32);
lineTo(-((32 / 25) * (n - 75)), 32);
}
// Between last quarter
else if (n > 75 && n <= 100) {
moveTo(0, 0);
lineTo(32, 0);
moveTo(32, 0);
lineTo(32, 32);
moveTo(32, 32);
lineTo(0, 32);
moveTo(0, 32);
lineTo(0, -((32 / 25) * (n - 100)));
}
//Function to draw the path
stroke();
}
// Assigning the drawing to favicon after
// converting into PNG image
faviconVar.href = canvas.toDataURL('image/png');
// After the drawing is finished
if (n === 100) {
clearInterval(loadingInterval);
animateBtn.textContent = 'Favicon Loaded';
animateBtn.style.backgroundColor = '#bbbbbb';
return;
}
// Increment the variable used to keep
// track of drawing intervals
n++;
}
</
script
>
<
title
>Animation on favicon image</
title
>
<
style
>
body {
width: 450px;
height: 300px;
margin: 10px;
text-align: center;
}
h1 {
color: green;
}
html {
background: #f4f6fa;
}
#animateBtn {
background: #1c2e46;
color: white;
font: inherit;
border: none;
padding: 0px 5px;
letter-spacing: 1px;
cursor: pointer;
border-radius: 2px;
}
canvas {
margin: auto;
display: block;
}
.height {
height: 10px;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
b
>How to use animation on favicon image</
b
>
<
div
class="height"> </
div
>
<
br
>
<
button
id="animateBtn">Animate Favicon</
button
>
<
br
>
<
br
>
<
canvas
id="canvas"
width
=
32
height
=
32
></
canvas
>
</
body
>
</
html
>