Guide: How to Design an Animated Favicon Loader using JavaScript
Favicons are a critical part of online branding, they give a visual clue to users and help them differentiate your site of others. While most favicons are static, it is possible to create animated favicons also. A constantly moving favicon is certainly annoying for most users and also impairs accessibility, but when only animated for a short time in response to a user action or a background event, like loading a page, this is possible provide additional visual information– therefore improve the user experience. In this post, I’ll show you how to Create one animated circular loader in an HTML canvas, and how to use it as a favicon. A animated favicon loader is a great tool to visualize the progress of an action performed on a page, such as uploading files or processing images. You can take a look at it demo that goes with it tutorial On Github also.
1. Make it -element
First, we must create a canvas animation Which draws a full circle, 100 percent in total (this is important when we need to enlarge the arch).
button id = lbtn> Loading
I’m using the standard favicon size, 16 * 16 pixels, for the canvas. You can use a size larger if desired, but keep in mind that the canvas image will be reduced to the 162 pixel area when applied as a favicon.
2. Check that is supported
Within the onload () event handler, we get a reference for the canvas element [cv] using the querySelector () method, and refer its 2D drawing context object [ctx] using the getContext () method. onload = function () {cv = document.querySelector (‘# cvl’), ctx = cv.getContext (‘2d’); if (!! ctx) {/ *… * /}}; We must also check if the canvas is supported by the UA by making sure that the drawing context object [ctx] exists and is not undefinedWe will post any code associated with the load event in this if condition.
3. Create the initial variables
Let’s create three more global variables, s for the starting angle of the arc, tc for the id for the setInterval () timer, and PCT for percentage value of the same timerThe code tc = pct = 0 assigns 0 as the initial value for the variables tc and pct. onload = function () {cv = document.querySelector (‘# cvl’), ctx = cv.getContext (‘2d’); if (!! ctx) {s = 1.5 * Math.PI, tc = pct = 0;}}; To show how the value of s was calculated, I will briefly explain how arc angles work. The included corner (the angle composed of the two rays defining an arc) of the circumference of a circle is 2π rad, true rad is the unit symbol for radians. This makes it angle for a quarter arc equal to 0.5π rad
When visualizing the loading progress, we want the circle to be drawn on the canvas from the top position instead of the standard duty. Clockwise (standard directional arc is drawn on the canvas) from the correct position, the top point is reached after three quarters, ie at an angle from 1.5π radThat’s why I created the variable s = 1.5 * Math.PI later indicate the starting angle for the arcs to be drawn from on the canvas.
Style the circle
For the drawing context object, we define the lineWidth and strokeStyle properties of the circle we are going to draw in the next step. The strokeStyle property represents its color. onload = function () {cv = document.querySelector (‘# cvl’), ctx = cv.getContext (‘2d’); if (!! ctx) {s = 1.5 * Math.PI, tc = pct = 0; ctx.lineWidth = 2; ctx.strokeStyle = ”fuchsia”;}};
5. Draw the circle
We add a click event handler to the load button [#lbtn] which activates a 60 millisecond setInterval timer, which performs the function responsible for drawing the circle [updateLoader()] every 60 ms until the circle is completely drawn. The setInterval () method returns a timer id to identify the timer assigned to the tc variable. onload = function () {cv = document.querySelector (‘# cvl’), ctx = cv.getContext (‘2d’); if (!! ctx) {s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector (‘# lbtn’); ctx.lineWidth = 2; ctx.strokeStyle = “fuchsia”; btn.addEventListener (‘click’, function () {tc = setInterval (updateLoader, 60);});}};
6. Create the custom function updateLoader ()
It’s time to create the custom updateLoader () function that must be called by the setInterval () method when the button is clicked (the event is triggered). I’ll show you the code first, then we can move on to the explanation. function updateLoader () {ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); if (pct === 100) {clearInterval (tc); return;} pct ++;} The clearRect () method erases the rectangular area of the canvas defined by its parameters: the (x, y) coordinates of the top left corner. The clearRect (0, 0, 16, 16) line knew everything in the 16 * 16 pixel canvas we created. The beginPath () method creates a new path for the drawing and the stroke () method paints on that newly created path At the end of the updateLoader () function, the percentage count [pct] is increased by 1, and prior to the increase we check if it equals 100If it is 100 percent, the setInterval () timer (identified by the timer id, tc) has been erased using the clearInterval () method. The first three parameters of the arc () method are the (x, y) coordinates of the center of the arc and its radiusThe fourth and fifth parameters represent the start and end angles where the drawing of the arc begins and ends. We have already determined the starting point of the loader circle, which is under the angle s, and it will be the same in all iterations The end angle, however increase by the number of percentwe can do the size of the increment in the following way. Say 1% (the value is 1 of 100) equal to angle α from 2π in a circle (2π = angle of the whole circumference), then the same can be written as the following equation: 1/100 = α / 2π About rearranging the equation: α = 1 * 2π / 100α = 2π / 100 So 1% is equal to the angle 2π / 100 in a circle. So the end angle during each percentage increase is calculated by multiplying 2π / 100 by the percentage valueThen the result added to s (start angle), so the arches are drawn from the same starting position every time. So we used the formula pct * 2 * Math.PI / 100 + s to calculate the end angle in the above code snippet.
7. Add the favicon
Let’s get one favicon link element in the HTML In the updateLoader () function, first we get the favicon using the querySelector () method and assign it to the variable lnk. Then we have to export the canvas image every time an arc is drawn in an encrypted image by using the toDataURL () method, and assign that data URI content as the favicon imageThis creates an animated favicon containing the same as the canvas loader onload = function () {cv = document.querySelector (‘# cvl’), ctx = cv.getContext (‘2d’); if (!! ctx) {s = 1.5 * Math.PI, tc = pct = 0, btn = document.querySelector (‘# lbtn’), lnk = document.querySelector (‘link[rel=”icon”] ctx.lineWidth = 2; ctx.strokeStyle = “fuchsia”; btn.addEventListener (‘click’, function () {tc = setInterval (updateLoader, 60);});}}; function updateLoader () {ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (pct * 2 * Math.PI / 100 + s)); ctx.stroke (); lnk.href = cv.toDataURL (‘image / png’); if (pct === 100) {clearTimeout (tc); return;} pct ++;} You can view the full code on Github
Bonus: use the loader for asynchronous events
When to use this canvas animation in combination with a loading action On a web page, assign the updateLoader () function as the event handler for the progress () event of the action For example, our JavaScript will change in this way in AJAX onload = function () {cv = document.querySelector (‘# cvl’), ctx = cv.getContext (‘2d’); if (!! ctx) {s = 1.5 * Math.PI, lnk = document.querySelector (‘link[rel=”icon”] ctx.lineWidth = 2; ctx.strokeStyle = ”fuchsia”;} var xhr = new XMLHttpRequest (); xhr.addEventListener (‘progress’, updateLoader); xhr.open (‘GET’, ‘https://xyz.com/abc’); xhr.send ();}; function updateLoader (evt) {ctx.clearRect (0, 0, 16, 16); ctx.beginPath (); ctx.arc (8, 8, 6, s, (possibly loaded * 2 * Math.PI / possibly total + s)); ctx.stroke (); lnk.href = cv.toDataURL (‘image / png’);} In the arc () method, replace the percentage value [pct] with the loaded property of the event—It tells you how much of the file has been loaded, and instead of 100, use the total property of the ProgressEvent, which indicates the total amount to be loaded. There is setInterval () not necessary in such cases, like the progress () event is fired automatically as loading progresses.
How to Design an Animated Favicon Loader using JavaScript: benefits
Faq
Final note
I hope you like the guide How to Design an Animated Favicon Loader using JavaScript. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the How to Design an Animated Favicon Loader using JavaScript, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “How to Design an Animated Favicon Loader using JavaScript”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide How to Design an Animated Favicon Loader using JavaScript, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
