Como adicionar um Progress Bar no HTML de um e-mail

Neste breve artigo vou ensinar de uma maneira simples, como adicionar um progress bar no HTML de um e-mail.

Em HTML existe uma tag própria para esse fim e possui a seguinte aparência:

<progress id="file" value="32" max="100"> 32% </progress>

Mais informações.

Onde max representa o valor máximo e value o valor em que barra deve estar, normalmente usamos entre 0-100 para representar uma barra de progresso de 0% à 100%.

O problema é que muitos serviços de e-mail, como o Gmail, Hotmail e etc, não aceitam essa tag, não exibindo a barra de progresso.

Quebrei um pouco a cabeça e acabei fazendo isso usando <div> o atributo CSS width, veja por exemplo:

CSS:

.progress-div {
  width: 280px;
  max-width: 280px !important;
  background-color: #F1F1F1;
  height: 8px;
  border: 1px solid #F1F1F1;
  border-radius: 6px;
}
.progress-bar {
  background-color: #4EF0AC;
  height: 8px;
}

HTML:

<div align="left" class="progress-div">
  <div align="left" class="progress-bar" style="width:%VARIAVEL_AQUI%%"></div>
</div>

Na versão final ficou mais ou menos assim:

Achou legal? Veja ao vivo o código aqui.

Parece bobeira, mas é. Basicamente consiste em criar uma <div> dentro de outra <div>, onde a primeira terá o preenchimento total e a outra você vai inserir o percentual no lugar do valor do atributo width.

O segredo consiste em você atribuir à width o valor de sua variável percentual, por exemplo, no JavaScript:

var percentual = '50%';
document.getElementById("progress-bar").style.width = percentual;

Claro que isso é só um exemplo, depende de como você vai disparar esse e-mail, por exemplo: Eu usei a API do Active Campaing para fazer isso. Ele permite que você use quaisquer campos como variáveis, a maioria das pessoas usam apenas a variável Nome que no caso seria %FIRSTNAME%.

Logo, no HTML do e-mail fica assim:

 <h3>Olá %FIRSTNAME%, tudo bem?</h3>

O que fiz foi calcular o valor que falta para o usuário subir de nível, usar a API para passar esse valor como um campo no Active Campaing e usar como uma variável no atributo width:

<div align="left" class="progress-bar" style="width:%PROX_NIVEL%%"></div>

Por exemplo, os valores que uso são esses:

Se você usa outro serviço de e-mail, basta consultar a documentação do mesmo. Se dispara o e-mail diretamenta usando PHP é um pouco mais simples. A não ser que deseja enviar usando Cron Jobs e PHP.

É isso ai! Gostou ou pensou numa maneira melhor de fazer isso? Poste nos comentários no final da página.