Adicionar um contador circular.

Obtém um anel animado que se preenche para mostrar um número importante, como uma taxa ou uma pontuação. Utilize-o para destacar uma estatística numa landing page ou numa página institucional.

Adicionar um contador circular

Abra a sua página com sessão iniciada: os controlos do construtor aparecem quando paira o cursor sobre a área de conteúdo. Crie a sua primeira página mostra o essencial.

1. Paire o cursor sobre a coluna e clique em + na barra de controlos, ou clique em Add Elements numa página vazia. Abra o separador Content e clique em Circle counter. O elemento é colocado no topo da coluna e o diálogo de definições abre.
2. Arraste o cursor de Percent para definir até onde o anel se preenche, ou escreva o valor na caixa ao lado. Aqui definimos 78.
3. Escolha a cor do arco em Foreground color.
4. Abra a secção Circle content e escreva um rótulo em Text para a métrica.
5. No campo Icon abaixo, escreva chart na caixa Search e clique num ícone na grelha.
6. Clique em Save no diálogo. Depois clique em Save na barra de ferramentas no topo da área de conteúdo para guardar a página.

O que vê

O anel preenche-se até à percentagem que definiu, com o seu ícone e rótulo no meio. No vídeo, é roxo, preenche-se até 78 por cento e diz Renewal rate. O anel anima quando entra na vista por deslocamento. Os visitantes veem-no depois de guardar a página e de esta ser publicada.

Configurar o contador circular

Paire o cursor sobre o elemento e abra More > Settings na barra de controlos. Opções:

• Percent: até onde o anel se preenche, de 0 a 100.
• Dimension: o tamanho do círculo em píxeis, de 100 a 500.
• Foreground color: a cor do arco preenchido.
• Background color: a cor da faixa vazia.
• Fill color: a cor dentro do círculo.
• Foreground width: a espessura do arco.
• Animation: preenche o arco a partir do zero. Animation duration e Animation delay definem o tempo em milissegundos.
• Animation in-viewport: espera para animar até o círculo entrar na vista por deslocamento.

Cada cursor tem uma caixa de número ao lado para valores exatos. A secção Circle content define o que aparece no meio:

• Show progress: mostra o número da percentagem em vez do seu texto e ícone. Vem desligado por predefinição.
• Text: um rótulo curto. Font size e Text color dão-lhe estilo.
• Info: uma segunda linha mais pequena por baixo do texto.
• Icon: um ícone à frente do texto. O menu pendente junto a Search limita a grelha a um conjunto de ícones. Icon size e Icon color dão-lhe estilo.

Se não o vir

• O Circle counter não está no separador Content. O seu perfil de utilizador oculta-o. Peça a um administrador para o ativar em User Profiles.
• Desapareceu depois de recarregar. A página não foi guardada. Adicione-o novamente e clique em Save na barra de ferramentas no topo da área de conteúdo.
• O anel está esbatido ou em falta. Foreground color e a Background color estão demasiado próximas da cor da página. Paire o cursor sobre o elemento e abra More > Settings, depois escolha cores com mais contraste.
• O anel não anima. Animation está desligado, ou o anel espera até entrar na vista por deslocamento. Ligue o Animation e desloque o círculo para dentro da vista.
• O seu texto e ícone não aparecem. Show progress está ligado, por isso o anel mostra a percentagem. Desligue o Show progress em Circle content.

E a seguir?

Separador Style para alterar o espaçamento e o fundo do seu contador circular.