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.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Efeito hover perfil
Hoje à(s) 09:26 am por Kyo Panda

» Ajuda com o HTML
Hoje à(s) 03:39 am por Taxy_InSaniTy

» Página inicial em HTML
Hoje à(s) 03:36 am por Harleen

» Quero uma Skin igual essa aqui..
Hoje à(s) 02:55 am por Harleen

» O tópico ou mensagem que você está procurando não existe
Hoje à(s) 02:49 am por Harleen

» Template topicos recentes
Hoje à(s) 01:52 am por Harleen

» Assinatura grande!
Ontem à(s) 10:58 pm por Uatyla

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Luiz
 
Marcelo22m2
 
Kyo Panda
 
paulim78
 
APOllO
 
Shek
 
Lincoln
 
>.< T-T =3
 
b@nzé
 

Quem está conectado
271 usuários online :: 8 usuários cadastrados, Nenhum Invisível e 263 Visitantes :: 1 Motor de busca

'Dante, Connor R., Daemon, Kyo Panda, Luiz, Marcelo22m2, Roger_Crazzy, Shek

[ 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 : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/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.


ShekAdmineiro - 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 : 16469
Pontos Ativos : 20861

http://www.shiftactif.com 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 : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/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. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3634
Pontos Ativos : 4853

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 : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/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. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3634
Pontos Ativos : 4853

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 : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/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
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3507
Pontos Ativos : 4208

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 : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/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
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3507
Pontos Ativos : 4208

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 : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/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. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3634
Pontos Ativos : 4853

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 : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/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
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3507
Pontos Ativos : 4208

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 : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/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
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3507
Pontos Ativos : 4208

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 : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/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".
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3507
Pontos Ativos : 4208

https://github.com/lffg/

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

- Tópicos similares

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