├── README.md ├── index.html └── script.js /README.md: -------------------------------------------------------------------------------- 1 | # Favicon-Canvas Circular Loader 2 | Create and display a circular loading `` animation as a webpage favicon. The canvas-favicon loader can be used to visualize progress of any action performed in a page, like file uploading or image processing. 3 | 4 | 5 | ⇢ Demo Page 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Canvas-Favicon Circular Loader 10 | 48 | 49 | 50 | 51 |
52 | Github 53 | Download 54 |
55 |

Canvas-Favicon Circular Loader Animation

56 |

Click to see the animation below and in favicon

57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | onload = function() { 2 | cv = document.querySelector('#cvl'), 3 | ctx = cv.getContext('2d'); 4 | if (!!ctx) { 5 | C3qπ = 1.5 * Math.PI, // starting position[angle] for circle drawing 6 | tc = pct = 0, 7 | btn = document.querySelector('#lbtn'), 8 | lnk = document.querySelector('link[rel*="icon"]'); 9 | ctx.lineWidth = 2; 10 | ctx.strokeStyle = 'fuchsia'; 11 | if(btn.disabled) btn.removeAttribute('disabled'); // enable btn on page refresh 12 | btn.addEventListener('click', function() { 13 | tc = setInterval(updateLoader, 60); 14 | this.textContent = 'Loading'; 15 | this.style.backgroundColor = '#999'; 16 | this.setAttribute('disabled',''); 17 | }); 18 | } 19 | }; 20 | function updateLoader() { 21 | with(ctx) { 22 | clearRect(0, 0, 16, 16); 23 | beginPath(); 24 | arc(8, 8, 6, C3qπ, (pct * 2 * Math.PI / 100 + C3qπ)); 25 | stroke(); 26 | } 27 | lnk.href= cv.toDataURL('image/png'); // update favicon 28 | if (pct === 100) { 29 | clearInterval(tc); 30 | btn.textContent = 'Loaded'; 31 | btn.style.backgroundColor = 'limegreen'; 32 | return; 33 | } 34 | pct++; 35 | } 36 | --------------------------------------------------------------------------------