├── README.md ├── index.html ├── output.png ├── script.js └── square-loading-favicon.mov /README.md: -------------------------------------------------------------------------------- 1 |

SQUARE LOADING FAVICON

2 | 3 |

4 | A way to draw (live) a square as a favicon, using Canvas.
The output can be used as a loading indication in the favicon.

A favicon is the small image displayed on browser tabs, near the name of the websites. 5 |

6 | 7 |

8 | See the example at https://rpsthecoder.github.io/square-loading-favicon/ 9 |

10 | 11 |

12 | 13 |

14 | 15 | 16 | 17 |

18 |
19 | _{The favicon may not appear in all browsers. From my limited testing, it works in Chrome (75.0.3770.100) and Firefox (66.0.5)
20 |} 21 |

22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Square loading favicon by @rpsthecoder, Github Pages 8 | 40 | 41 | 42 |

43 | Square loading favicon 44 |

Click "Load" to see a square loading favicon in your browser tab. It'll look like what you'll see below.

45 |

46 |

47 |

48 | 49 | 50 | -------------------------------------------------------------------------------- /output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rpsthecoder/square-loading-favicon/027f82dfc231ce02c3c26089ea9b5c13f0e0f4af/output.png -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | onload = ()=> { 2 | canvas = document.querySelector('canvas'), 3 | context = canvas.getContext('2d'); 4 | if (!!context) { 5 | button = document.querySelector('button'), 6 | favicon = document.querySelector('link[rel*="icon"]'); 7 | /* Style of the lines of the square that'll be drawn */ 8 | let gradient = context.createLinearGradient(0, 0, 32, 32); 9 | gradient.addColorStop(0, '#c7f0fe'); 10 | gradient.addColorStop(1, '#56d3c9'); 11 | context.strokeStyle = gradient; 12 | context.lineWidth = 8; 13 | // Enable the disabled button on page refresh (it's disabled when drawing is done) 14 | if(button.disabled) button.removeAttribute('disabled'); 15 | button.addEventListener('click', function() { 16 | /* A variable to track the drawing increments */ 17 | n = 0, 18 | /* Interval speed for the animation */ 19 | loadingInterval = setInterval(drawLoader, 60); 20 | /* Style of the button when the loader is being drawn */ 21 | this.textContent = 'Loading...'; 22 | this.style.backgroundColor = '#56d3c9'; 23 | this.setAttribute('disabled',''); 24 | }); 25 | } 26 | }; 27 | /* This function, incrementally, draws a square in canvas and transforms it to a favicon */ 28 | function drawLoader() { 29 | with(context) { 30 | clearRect(0, 0, 32, 32); 31 | beginPath(); 32 | /* Upto 25% of the time assigned to draw */ 33 | if (n<=25){ 34 | /* 35 | (0,0)-----(32,0) 36 | */ 37 | moveTo(0, 0); lineTo((32/25)*n, 0); 38 | } 39 | /* Between 25 to 50 percent */ 40 | else if(n>25 && n<=50){ 41 | /* 42 | (0,0)-----(32,0) 43 | | 44 | | 45 | (32,32) 46 | */ 47 | moveTo(0, 0); lineTo(32, 0); 48 | moveTo(32, 0); lineTo(32, (32/25)*(n-25)); 49 | } 50 | /* Between 50 to 75 percent */ 51 | else if(n>50 && n<= 75){ 52 | /* 53 | (0,0)-----(32,0) 54 | | 55 | | 56 | (0,32)----(32,32) 57 | */ 58 | moveTo(0, 0); lineTo(32, 0); 59 | moveTo(32, 0); lineTo(32, 32); 60 | moveTo(32, 32); lineTo(-((32/25)*(n-75)), 32); 61 | } 62 | /* Between 75 to 100 percent */ 63 | else if(n>75 && n<=100){ 64 | /* 65 | (0,0)-----(32,0) 66 | | | 67 | | | 68 | (0,32)----(32,32) 69 | */ 70 | moveTo(0, 0); lineTo(32, 0); 71 | moveTo(32, 0); lineTo(32, 32); 72 | moveTo(32, 32); lineTo(0, 32); 73 | moveTo(0, 32); lineTo(0, -((32/25)*(n-100))); 74 | } 75 | stroke(); 76 | } 77 | // Convert the Canvas drawing to PNG and assign it to the favicon 78 | favicon.href = canvas.toDataURL('image/png'); 79 | /* When finished drawing */ 80 | if (n === 100) { 81 | clearInterval(loadingInterval); 82 | button.textContent = 'Loaded'; 83 | button.style.backgroundColor = '#aaa'; 84 | return; 85 | } 86 | // Increment the variable used to keep track of drawing intervals 87 | n++; 88 | } 89 | -------------------------------------------------------------------------------- /square-loading-favicon.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rpsthecoder/square-loading-favicon/027f82dfc231ce02c3c26089ea9b5c13f0e0f4af/square-loading-favicon.mov --------------------------------------------------------------------------------