Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Quem está conectado
188 usuários online :: 5 usuários cadastrados, Nenhum Invisível e 183 Visitantes :: 2 Motores de busca

CesarWatsom2, cheephard, juleic1123, Luks_Ponte, odelgado

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Contagem regressiva

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Contagem regressiva

Mensagem por PESS_dodo em 16/04/17, 07:49 pm

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


Última edição por PESS_dodo em 17/04/17, 01:46 pm, editado 1 vez(es)
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 288

Ver perfil do usuário http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks http://adliferpg.forumeiros.com/forum

Resolvido Re: Contagem regressiva

Mensagem por Shek em 16/04/17, 08:56 pm

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.


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17002
Pontos Ativos : 21301

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Contagem regressiva

Mensagem por PESS_dodo em 17/04/17, 12:46 am

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
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 288

Ver perfil do usuário http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks http://adliferpg.forumeiros.com/forum

Resolvido Re: Contagem regressiva

Mensagem por Kyo Panda em 17/04/17, 11:05 am

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.


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4583
Pontos Ativos : 5832

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Contagem regressiva

Mensagem por PESS_dodo em 17/04/17, 11:11 am

@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

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

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 288

Ver perfil do usuário http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks http://adliferpg.forumeiros.com/forum

Resolvido Re: Contagem regressiva

Mensagem por Kyo Panda em 17/04/17, 11:15 am

É 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/


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4583
Pontos Ativos : 5832

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Contagem regressiva

Mensagem por PESS_dodo em 17/04/17, 01:12 pm

E pra diminuir o tamanho da barra, ta muito grande
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 288

Ver perfil do usuário http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks http://adliferpg.forumeiros.com/forum
  • 0

Resolvido Re: Contagem regressiva

Mensagem por Luiz em 17/04/17, 01:20 pm

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>

Tchau


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5808
Pontos Ativos : 6646

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Contagem regressiva

Mensagem por PESS_dodo em 17/04/17, 01:28 pm

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>

Tchau



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

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

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 288

Ver perfil do usuário http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks http://adliferpg.forumeiros.com/forum

Resolvido Re: Contagem regressiva

Mensagem por Luiz em 17/04/17, 01:35 pm

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


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5808
Pontos Ativos : 6646

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Contagem regressiva

Mensagem por PESS_dodo em 17/04/17, 01:44 pm

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

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 288

Ver perfil do usuário http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks http://adliferpg.forumeiros.com/forum

Resolvido Re: Contagem regressiva

Mensagem por Kyo Panda em 17/04/17, 01:46 pm

Adicione ao HTML:

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


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4583
Pontos Ativos : 5832

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Contagem regressiva

Mensagem por PESS_dodo em 17/04/17, 01:52 pm

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

Obs: Acho que a página ficou feia rsrs
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 288

Ver perfil do usuário http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks http://adliferpg.forumeiros.com/forum

Resolvido Re: Contagem regressiva

Mensagem por Luiz em 17/04/17, 01:56 pm

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

Tchau


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5808
Pontos Ativos : 6646

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Contagem regressiva

Mensagem por PESS_dodo em 17/04/17, 01:59 pm

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? Piscada

Tchau

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
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 288

Ver perfil do usuário http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks http://adliferpg.forumeiros.com/forum

Resolvido Re: Contagem regressiva

Mensagem por Luiz em 17/04/17, 02:54 pm

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


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5808
Pontos Ativos : 6646

Ver perfil do usuário https://github.com/lffg/

Resolvido Re: Contagem regressiva

Mensagem por PESS_dodo em 17/04/17, 03:01 pm

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.

Tchau


Tranquilo mano, deu tudo certo!

Obrigado!
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 288

Ver perfil do usuário http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks http://adliferpg.forumeiros.com/forum

Resolvido Re: Contagem regressiva

Mensagem por Luiz em 17/04/17, 03:04 pm

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".


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5808
Pontos Ativos : 6646

Ver perfil do usuário https://github.com/lffg/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum