É a primeira coisa que seus olhos procuram quando você está trocando de guia.
Essa é uma maneira de explicar o que é um favicon . A área de abas é uma propriedade imobiliária de tela muito mais preciosa do que a maioria supõe. Se feito corretamente, além de ser um rótulo com ícone, pode ser o outdoor perfeito para representar o que está acontecendo ou o que está acontecendo em uma página da web.
Os favicons são realmente mais úteis quando você não está ativo em uma guia . Aqui está um exemplo:
Imagine que você esteja fazendo backup de fotos de suas férias de verão recentes para um serviço de nuvem. Enquanto eles estão fazendo o upload, você abriu uma nova guia para reunir detalhes sobre os lugares em que saiu de férias para anotar posteriormente essas fotos. Uma coisa levou à outra, e agora você está assistindo Casey Neistat na sétima guia. Mas você não pode continuar sua maratona no YouTube sem os intervalos ansiosos de verificar novamente a página do serviço de nuvem para ver se as fotos foram carregadas.
É esse tipo de situação em que podemos ser criativos! E se pudéssemos alterar dinamicamente os pixels nesse favicon e exibir o progresso do upload? É exatamente o que faremos neste artigo.
Nos navegadores suportados, podemos exibir uma animação de carregamento / progresso como um favicon com a ajuda de JavaScript, HTML <canvas>e algumas geometrias seculares.
Saltando em linha reta, começaremos com a parte mais fácil: adicionando o ícone e os elementos da tela ao HTML.
<head>
<link rel="icon" type="image/png" href="" width=32px>
</head>
<body>
<canvas width=32 height=32></canvas>
</body>No uso prático, você gostaria de esconder o <canvas>na página, e uma maneira de fazer isso é com o hiddenatributo HTML .
<canvas hidden width=32 height=32></canvas>Vou deixar o <canvas>visível na página para ver as imagens de favicon e de tela animadas juntas.
Tanto o favicon quanto a tela recebem um tamanho de favicon padrão: 32 pixels quadrados.
Para fins de demonstração, para acionar a animação de carregamento, estou adicionando um botão à página que iniciará a animação quando clicada. Isso também vai no HTML:
<button>Load</button>Agora vamos configurar o JavaScript. Primeiro, uma verificação para suporte de tela:
onload = ()=> {
canvas = document.querySelector('canvas'),
context = canvas.getContext('2d');
if (!!context) {
/* if canvas is supported */
}
};Em seguida, adicione o manipulador de eventos de clique de botão que solicitará a animação na tela.
button = document.querySelector('button');
button.addEventListener('click', function() {
/* A variable to track the drawing intervals */
n = 0,
/* Interval speed for the animation */
loadingInterval = setInterval(drawLoader, 60);
});drawLoaderserá a função fazendo o desenho em intervalos de 60 milissegundos cada, mas antes de codificá-lo, quero definir o estilo das linhas do quadrado a ser desenhado. Vamos fazer um gradiente.
/* Style of the lines of the square that'll be drawn */
let gradient = context.createLinearGradient(0, 0, 32, 32);
gradient.addColorStop(0, '#c7f0fe');
gradient.addColorStop(1, '#56d3c9');
context.strokeStyle = gradient;
context.lineWidth = 8;Em drawLoader, desenhamos as linhas percentualmente: durante os primeiros 25 intervalos, a linha superior será desenhada de forma incremental; no segundo trimestre, a linha direita será desenhada; e assim por diante.
O efeito de animação é obtido apagando o <canvas>em cada intervalo antes de redesenhar a (s) linha (s) do intervalo anterior um pouco mais.
Durante cada intervalo, uma vez que o desenho é feito na tela, ele é rapidamente traduzido para uma imagem PNG a ser atribuída como o favicon.
function drawLoader() {
with(context) {
clearRect(0, 0, 32, 32);
beginPath();
/* Up to 25% */
if (n<=25){
/*
(0,0)-----(32,0)
*/
// code to draw the top line, incrementally
}
/* Between 25 to 50 percent */
else if(n>25 && n<=50){
/*
(0,0)-----(32,0)
|
|
(32,32)
*/
// code to draw the top and right lines.
}
/* Between 50 to 75 percent */
else if(n>50 && n<= 75){
/*
(0,0)-----(32,0)
|
|
(0,32)----(32,32)
*/
// code to draw the top, right and bottom lines.
}
/* Between 75 to 100 percent */
else if(n>75 && n<=100){
/*
(0,0)-----(32,0)
| |
| |
(0,32)----(32,32)
*/
// code to draw all four lines of the square.
}
stroke();
}
// Convert the Canvas drawing to PNG and assign it to the favicon
favicon.href = canvas.toDataURL('image/png');
/* When finished drawing */
if (n === 100) {
clearInterval(loadingInterval);
return;
}
// Increment the variable used to keep track of the drawing intervals
n++;
}Agora, a matemática e o código para desenhar as linhas.
Veja como desenhamos incrementalmente a linha superior em cada intervalo durante os primeiros 25 intervalos:
n = current interval,
x = x-coordinate of the line’s end point at a given interval.
(y-coordinate of the end point is 0 and start point of the line is 0,0)Na conclusão de todos os 25 intervalos, o valor de x é 32 (o tamanho do favicon e da tela).
Assim…
x/n = 32/25
x = (32/25) * nO código para aplicar essa matemática e desenhar a linha é:
moveTo(0, 0); lineTo((32/25)*n, 0);Para os próximos 25 intervalos (linha direita), direcionamos a coordenada y de forma semelhante.
moveTo(0, 0); lineTo(32, 0);
moveTo(32, 0); lineTo(32, (32/25)*(n-25));E aqui está a instrução para desenhar todas as quatro linhas com o resto do código.
function drawLoader() {
with(context) {
clearRect(0, 0, 32, 32);
beginPath();
/* Up to 25% of the time assigned to draw */
if (n<=25){
/*
(0,0)-----(32,0)
*/
moveTo(0, 0); lineTo((32/25)*n, 0);
}
/* Between 25 to 50 percent */
else if(n>25 && n<=50){
/*
(0,0)-----(32,0)
|
|
(32,32)
*/
moveTo(0, 0); lineTo(32, 0);
moveTo(32, 0); lineTo(32, (32/25)*(n-25));
}
/* Between 50 to 75 percent */
else if(n>50 && n<= 75){
/*
(0,0)-----(32,0)
|
|
(0,32)----(32,32)
*/
moveTo(0, 0); lineTo(32, 0);
moveTo(32, 0); lineTo(32, 32);
moveTo(32, 32); lineTo(-((32/25)*(n-75)), 32);
}
/* Between 75 to 100 percent */
else if(n>75 && n<=100){
/*
(0,0)-----(32,0)
| |
| |
(0,32)----(32,32)
*/
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)));
}
stroke();
}
// Convert the Canvas drawing to PNG and assign it to the favicon
favicon.href = canvas.toDataURL('image/png');
/* When finished drawing */
if (n === 100) {
clearInterval(loadingInterval);
return;
}
// Increment the variable used to keep track of drawing intervals
n++;
}
Isso é tudo! Você pode ver e baixar o código de demonstração deste repositório do GitHub . Bônus: se você estiver procurando por um carregador circular, confira este repo .
Você pode usar qualquer forma que desejar e, se usar o fillatributo no desenho de tela, isso dará um efeito diferente.