Adicionar uma barra de progresso.

Obtém uma barra colorida com um rótulo que mostra de relance o ponto de situação. Utilize-a para estado de projetos, metas de angariação, progresso de cursos ou níveis de competências.

Adicionar uma barra de progresso

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 Progress bar. O elemento é colocado no topo da coluna e o diálogo de definições abre.
2. Escreva um Label para a barra, como "Website redesign".
3. Arraste Progress para definir até onde a barra se preenche, ou escreva o valor na caixa ao lado do cursor. Aqui escolhemos 73 por cento.
4. Escolha uma Front color para a parte preenchida na paleta.
5. Mais abaixo no mesmo diálogo, escolha se a barra recebe Stripes. Aqui assinalamos Add striped pattern to bar.
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ê

Uma barra com o seu rótulo preenche-se até ao valor que definiu, na cor que escolheu. O rótulo fica dentro da parte preenchida. No vídeo, a barra às riscas diz Website redesign e preenche 73% da faixa. Os visitantes veem-na depois de guardar a página e de esta ser publicada.

Configurar a barra de progresso

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

• Label: o texto na barra. Também pode clicar no rótulo na página e editá-lo aí.
• Progress: até onde a barra se preenche, de 0 a 100 por cento. A predefinição é 50.
• Bar height: a altura da barra em píxeis. A predefinição é 45.
• Back color: a cor da faixa vazia.
• Front color: a cor da parte preenchida.
• Grow animation: desligada por predefinição. Quando ligada, a barra começa vazia e preenche-se quando metade dela está na vista.
• Stripes: Add striped pattern to bar adiciona riscas diagonais. Animate stripes (requires striped pattern) põe-nas em movimento.

Se não a vir

• A Progress bar não está no separador Content. O seu perfil de utilizador oculta-a. Peça a um administrador para a ativar em User Profiles.
• Desapareceu depois de recarregar. A página não foi guardada. Adicione-a novamente e clique em Save na barra de ferramentas no topo da área de conteúdo.
• A barra parece vazia. Progress é 0, ou o Grow animation está ligado e a barra ainda não está metade na vista. Desloque a página até à barra, ou paire o cursor sobre o elemento e abra More > Settings para aumentar o Progress.
• Não há riscas, ou não se movem. Add striped pattern to bar não está assinalado, e o Animate stripes (requires striped pattern) precisa dele. Assinale Add striped pattern to bar em Stripes.
• A parte preenchida confunde-se com a faixa. Front color e a Back color são demasiado parecidas. Escolha uma Front color mais escura ou uma Back color mais clara.

E a seguir?

Separador Style para alterar o espaçamento e o fundo da sua barra de progresso.