Contagem regressiva

por PESS_dodo 16.04.17 23:49

Detalhes da questão

Endereço do fórum: http://www.blrpg.com.br/
Versão do fórum: phpBB3

Descrição

Boa noite, feliz pascoa a todos

Queria por uma contagem regressiva em porcentagem nessa página inicial em html
http://www.blrpg.com.br/

Estou lançando uma nova versão e queria editar essa contagem de acordo com a porcentagem que esta pronta e que falta pra ser lançada

Queria algo bem creativo, não sei como fazer

Pode ser uma barra grande e tal ou imagem sei la

por Shek 17.04.17 0:56

Existem vários exemplos na web: http://www.rafaelzottesso.com.br/2013/05/contador-de-tempo-regressivo-cronometro-em-javascriptjquery/ É só escolher o que mais te agrada. Piscada

Atenciosamente.

por PESS_dodo 17.04.17 4:46

Só vi um modelo nesse link

Alguém pode ajudar?

@EDIT

Queria deixar bem dinâmico, se possível algo bem grande e tal... bem dinâmico

Ficar tipo a porcentagem uma barra e aparecer carregando...
Algo em FLASH, não sei bem

por Kyo Panda 17.04.17 15:05

O seu sei lá não está muito específico. .-.

Tente utilizar:

Código:: <div class="fa-progress-bar"> <span>Em breve, novo paranauê.</span> </div> <style> .fa-progress-bar { font-size: 36px; position: relative; color: #fff; text-align: center; padding: 16px 0; border: 10px #333 solid; border-radius: 50px; overflow: hidden; } .fa-progress-bar span { position: relative; } .fa-progress-bar:before { content: ' '; position: absolute; top: 0; left: 0; bottom: 0; right: 33%; background-color: #0075ff; } </style>

Mudando o right: 33%; para a porcentagem de conclusão.

por PESS_dodo 17.04.17 15:11

Kyo Panda escreveu:O seu sei lá não está muito específico. .-.

Tente utilizar:

Código:
<div class="fa-progress-bar"> <span>Em breve, novo paranauê.</span> </div> <style> .fa-progress-bar { font-size: 36px; position: relative; color: #fff; text-align: center; padding: 16px 0; border: 10px #333 solid; border-radius: 50px; overflow: hidden; } .fa-progress-bar span { position: relative; } .fa-progress-bar:before { content: ' '; position: absolute; top: 0; left: 0; bottom: 0; right: 33%; background-color: #0075ff; } </style>

Mudando o right: 33%; para a porcentagem de conclusão.

Consigo por essa gif dentro?

@EDIT

Diminuir mais o tamanho, por que pegando a página de uma ponta a outra
Contagem regressiva Carregando

http://www.mitsubishimotors.com.br/wps/wcm/connect/269e36eb-d97f-4ae3-9463-eec4ab5a4c94/carregando.gif?MOD=AJPERES&CACHEID=269e36eb-d97f-4ae3-9463-eec4ab5a4c94

por Kyo Panda 17.04.17 15:15

É só mudar:

Código:: <div class="fa-progress-bar"> <span>Em breve, novo paranauê.</span> </div>

Por:

Código:: <div class="fa-progress-bar"> <span><img src="http://www.mitsubishimotors.com.br/wps/wcm/connect/269e36eb-d97f-4ae3-9463-eec4ab5a4c94/carregando.gif?MOD=AJPERES&CACHEID=269e36eb-d97f-4ae3-9463-eec4ab5a4c94" /></span> </div>

o/

por PESS_dodo 17.04.17 17:12

E pra diminuir o tamanho da barra, ta muito grande

por Luiz 17.04.17 17:20

Olá,

Por favor, não use texto formatado nos tópicos.
(É uma regra do Fórum dos Fóruns, a qual já te alertei outras vezes).

---

Tente alterar o código por:

Código:: <div class="fa-progress-bar"> <span><img src="http://www.mitsubishimotors.com.br/wps/wcm/connect/269e36eb-d97f-4ae3-9463-eec4ab5a4c94/carregando.gif?MOD=AJPERES&CACHEID=269e36eb-d97f-4ae3-9463-eec4ab5a4c94" /></span> </div> <style> .fa-progress-bar { font-size: 36px; position: relative; color: #fff; text-align: center; padding: 0px 0; border: 10px #333 solid; border-radius: 50px; overflow: hidden; } .fa-progress-bar span { position: relative; } .fa-progress-bar:before { content: ' '; position: absolute; top: 0; left: 0; bottom: 0; right: 33%; background-color: #0075ff; } </style>

por PESS_dodo 17.04.17 17:28

Luiz~ escreveu:Olá,

Por favor, não use texto formatado nos tópicos.
(É uma regra do Fórum dos Fóruns, a qual já te alertei outras vezes).

---

Tente alterar o código por:
Código:
<div class="fa-progress-bar"> <span><img src="http://www.mitsubishimotors.com.br/wps/wcm/connect/269e36eb-d97f-4ae3-9463-eec4ab5a4c94/carregando.gif?MOD=AJPERES&CACHEID=269e36eb-d97f-4ae3-9463-eec4ab5a4c94" /></span> </div> <style> .fa-progress-bar { font-size: 36px; position: relative; color: #fff; text-align: center; padding: 0px 0; border: 10px #333 solid; border-radius: 50px; overflow: hidden; } .fa-progress-bar span { position: relative; } .fa-progress-bar:before { content: ' '; position: absolute; top: 0; left: 0; bottom: 0; right: 33%; background-color: #0075ff; } </style>

https://i.imgur.com/bCvLA2x.png

Pode me dizer onde no código modifico pra diminuir a barra e o texto?

por Luiz 17.04.17 17:35

Olá,

Seria de grande ajuda se o senhor disponibilizasse o código que está usando, além de é claro, publicar a página HTML para que possamos fazer os devidos testes online, direto no seu fórum.

Para mudar o texto, basta procurar o código o trecho

Versão 2.0 73% CONCLUIDA

, e editar.

Quanto ao tamanho, adicione ao final do código:

Código:: <style> .fa-progress-bar { width: 60%; } </style>

E alterar o valor

60%

para mais ou menos à seu gosto.

Tchau

por PESS_dodo 17.04.17 17:44

Como faço pra colocar essas imagens do Forum e Registrar pro roda pé?

por Kyo Panda 17.04.17 17:46

Adicione ao HTML:

Código:: <style>center center { position: absolute; bottom: 30px; left: 50%; transform: translate(-50%); }</style>

por PESS_dodo 17.04.17 17:52

Tudo certo, só o favicon que não ta aparecendo

Obs: Acho que a página ficou feia rsrs

por Luiz 17.04.17 17:56

Para o favicon, adicione ao final do código:

Código:: <link rel="shortcut icon" type="image/x-icon" href="http://i.imgur.com/Opcb76i.png" />

Infelizmente, não posso entender seu conceito de feio ou bonito, se quiser que demos um jeito, terá que dizer exatamente o que quer, e tudo mais, entende? Piscada

por PESS_dodo 17.04.17 17:59

Luiz~ escreveu:Para o favicon, adicione ao final do código:
Código:
<link rel="shortcut icon" type="image/x-icon" href="http://i.imgur.com/Opcb76i.png" />

Infelizmente, não posso entender seu conceito de feio ou bonito, se quiser que demos um jeito, terá que dizer exatamente o que quer, e tudo mais, entende?

Fiz isso e não apareceu ainda

Da uma olhada ai www.blrpg.com.br
Oque acha?

To pesquisando uma imagem de uma barra pra ver se coloco esse texto e a imagem de carregamento por cima pra ver se fica melhor

por Luiz 17.04.17 18:54

Olá,

No código de sua página HTML, deve ter

<head>

.
Adicione abaixo dela:

Código:: <head><link rel="shortcut icon" type="image/x-icon" href="http://i.imgur.com/Opcb76i.png"></head>

E remova o que lhe passei anteriormente.

Caso não tenha o

<head>

, abaixo do

<html>

, adicione:

Código:: <head> <link rel="shortcut icon" type="image/x-icon" href="http://i.imgur.com/Opcb76i.png"> </head>

Caso o senhor não encontre também o

<head>

, abaixo do

<html>

, precisarei de todo o código de sua página.

Tchau

por PESS_dodo 17.04.17 19:01

Luiz~ escreveu:Olá,

No código de sua página HTML, deve ter
<head>
.
Adicione abaixo dela:
Código:
<head><link rel="shortcut icon" type="image/x-icon" href="http://i.imgur.com/Opcb76i.png"></head>
E remova o que lhe passei anteriormente.

Caso não tenha o
<head>
, abaixo do
<html>
, adicione:
Código:
<head> <link rel="shortcut icon" type="image/x-icon" href="http://i.imgur.com/Opcb76i.png"> </head>

Caso o senhor não encontre também o
<head>
, abaixo do
<html>
, precisarei de todo o código de sua página.

Tranquilo mano, deu tudo certo!

Obrigado!

por Luiz 17.04.17 19:04

Sempre às ordens. Rose

---

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".

Hitskin.com

Contagem regressiva