Jump to content
  • 0
geivisonsales

fazer um loader para apenas um div

Question

tenho uma DIV que possui um while em php, esse while carrega 12 posts(DIV), e quero que quando acesse o site, a pagina carregue normalmente mas dentro da div aparece um loader e apenas mostre os posts quando todos estiverem carregados! isso é possivel?

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0
Em 14/08/2019 at 01:15, geivisonsales disse:

tenho uma DIV que possui um while em php, esse while carrega 12 posts(DIV), e quero que quando acesse o site, a pagina carregue normalmente mas dentro da div aparece um loader e apenas mostre os posts quando todos estiverem carregados! isso é possivel?

Sim usando ajax

 

Arquivos necessários:

Tanto o arquivo js quando o arquivo CSS serão obrigatórios a incluir no index

https://github.com/Spell-Master/sm-web/tree/master/scripts/AjaxRequest

 

Estrutura:

<div id="local_para_carregar"></div>

<script>
  var ajax = new AjaxRequest();
  // 1º "local_para_carregar" Parâmetro é o div#ID onde você quer que seja carregado.
  // 2º "aconsulta.php" Parâmetro é o caminho e o arquivo que será carregado.
  // 3º "false" Parâmetro (opcional/BOOL-true-false) Altera o endereço na barra de navegação.
  ajax.send('local_para_carregar', 'aconsulta.php', false);
</script>

Com o método send uma animação de progresso permanece no local do carregamento até que o arquivo que for carregado responda por completo.

 

Share this post


Link to post
Share on other sites
  • 0
Em 15/08/2019 at 11:04, Omar~ disse:

Sim usando ajax

 

Arquivos necessários:

Tanto o arquivo js quando o arquivo CSS serão obrigatórios a incluir no index

https://github.com/Spell-Master/sm-web/tree/master/scripts/AjaxRequest

 

Estrutura:


<div id="local_para_carregar"></div>

<script>
  var ajax = new AjaxRequest();
  // 1º "local_para_carregar" Parâmetro é o div#ID onde você quer que seja carregado.
  // 2º "aconsulta.php" Parâmetro é o caminho e o arquivo que será carregado.
  // 3º "false" Parâmetro (opcional/BOOL-true-false) Altera o endereço na barra de navegação.
  ajax.send('local_para_carregar', 'aconsulta.php', false);
</script>

Com o método send uma animação de progresso permanece no local do carregamento até que o arquivo que for carregado responda por completo.

 

Resolveu meu problema amigo! Muito Obrigado!:sweat_smile:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By rafa-martin
      Boa tarde. Gostaria de saber como faço para que o usuário volte para a página que estava após fazer novo login.
       
      Por exemplo, o usuário depois de logado estava na pagina https://site.com.br/curso/2 e saiu fazendo logout. Após ele logar novamente, como redireciono esse usuário para a página que ele estava (https://site.com.br/curso/2)?
    • By rafa-martin
      Pessoal, boa tarde. Estou fazendo uma barra de alerta de cookies. Não estou conseguindo colocar o botão de fechar no canto superior direito. Alguém, pode me dar uma luz? Segue código.
       
      <script>
      function cookies(functions) {
        const container = document.querySelector('.cookies-container');
        const save = document.querySelector('.cookies-save');
        if (!container || !save) return null;
        const localPref = JSON.parse(window.localStorage.getItem('cookies-pref'));
        if (localPref) activateFunctions(localPref);
        function getFormPref() {
          return [...document.querySelectorAll('[data-function]')]
            .filter((el) => el.checked)
            .map((el) => el.getAttribute('data-function'));
        }
        function activateFunctions(pref) {
          pref.forEach((f) => functions[f]());
          container.style.display = 'none';
          window.localStorage.setItem('cookies-pref', JSON.stringify(pref));
        }
        function handleSave() {
          const pref = getFormPref();
          activateFunctions(pref);
        }
        save.addEventListener('click', handleSave);
      }
      function marketing() {
        console.log('Função de marketing');
      }
      function analytics() {
        console.log('Função de analytics');
      }
      cookies({
        marketing,
        analytics,
      });
      </script>
      <style>
      p {
        margin: 0px;
      }
      body {
        margin: 0px;
        height: 200vh;
        background: #eee;
      }
      .cookies-container {
        color: #222;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
          Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        position: fixed;
        width: 100%;
        bottom: 2rem;
        z-index: 1000;
      }
      .cookies-content {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        background: white;
        max-width: 720px;
        border-radius: 5px;
        padding: 1rem;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.5rem;
        opacity: 0;
        transform: translateY(1rem);
        animation: slideUp 0.5s forwards;
      }
      @keyframes slideUp {
        to {
          transform: initial;
          opacity: initial;
        }
      }
      .cookies-pref label {
        margin-right: 1rem;
        margin-top: -10px;
      }
      .cookies-save {
        grid-column: 2;
        grid-row: 1/3;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
          Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        background: #007cf8;
        color: white;
        cursor: pointer;
        border: none;
        border-radius: 5px;
        padding: 0.8rem 1rem;
        font-size: 1rem;
      }
      @media (max-width: 500px) {
        .cookies-content {
          grid-template-columns: 1fr;
        }
        .cookies-save {
          grid-column: 1;
          grid-row: 3;
        }
      }
      </style>
      <!DOCTYPE html>
      <html lang="pt-BR">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Cookies</title>
      </head>
      <body>
          
          <!--
        <div class="cookies-container">
          <div class="cookies-content">
                  <p><font color="black">Nosso site usa cookies para melhorar sua experiência na navegação.</font> <a href="<?php echo asset('..\cookies')?>" target="_blank"><font color="blue"><b>Termos LGPD</b></font></a></p><br>
                <p><font color="black">Baseia-se na orientação do Webec objetivando a Proteção de seus Dados. Lei 13.709/2018 - Lei Geral de Proteção de Dados.</font></p>
            <div class="cookies-pref">
            </div>
            <button class="cookies-save">Salvar e Continuar</button>
          </div>
        </div>
        -->
        
          <div class="cookies-container">
              
            <div class="cookies-content">
                
                      
                    
                <p><font color="black">Nosso site usa cookies para melhorar sua experiência na navegação.</font> </p><br>
                <p><font color="black">Baseia-se na orientação do Webec objetivando a Proteção de seus Dados. Lei 13.709/2018 - Lei Geral de Proteção de Dados.</font></p>
                <div class="cookies-pref">
               
                  <button class="cookies-save">OK.Entendi.</button>
                  <span><a href="">x</a></span>
                </div>
              
                
                
            <!-- <button class="cookies-save">OK.Entendi.</button>-->
          </div>  
        
      </body>
      </html>
    • By Sapinn
      Fala galare, blz? Então, estou desenvolvendo um sistema de vendas e eu gostaria de saber como fazer para devolver o produto ao estoque no caso de cancelamento da venda ou na devolução.
      Por exemplo:
      Digamos que eu tenha um estoque com 10 fones de ouvido, 5 teclados e 20 pen drives.
      Então um cliente comprou 1 fone de ouvido, 1 teclado e 2 pendrive, eu já consigo ajustar o estoque para diminuir ficando:
      9 fones de ouvido, 4 teclados, 18 pen drives.
       
      Mas digamos que, por alguma razão, o cliente gostaria de devolver o pen drives e o fone de ouvido como eu faria para colocar ambos de volta ao seu respectivo estoque, ou seja ajustar os 9 fones e os 18 pen drive de volta para 10 fones e 20 pen drive??
    • By Giovanird
      Olá a todos!

      Tenho uma rotina no cron em um servidor que executa uma pagina onde é alterado o status de clientes.
      Preciso que após acessar e alterar o status do cliente, está pagina seja direcionada para uma outra pagina após uns 10 segundos.
      Executando diretamente pelo navegador a página é direcionada corretamente, quando executada pelo cron ela não direciona.
       
      No  cron estou usando o comando:
      curl -s https://www.dominio.com.br/alt.php
       
      No direcionamento coloquei um refresh javascript dentro de um header
      header( 'refresh:10; url=https://www.dominio.com.br/posalt.php?t=2');
       
      Obs.: Está pagina já roda a algum tempo no cron sem o direcionamento, agora que se fez necessário criar este direcionamento.
       

    • By danilo759
      Estou contratando um programador PHP para desenvolver um guia de programação, pago à vista.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.