none
Loading na página com bootstrap RRS feed

  • Pergunta

  • Olá pessoal!
       Boa tarde!
         meu problema é o seguinte, gostaria de colocar um progress bar do bootstrap na minha plicação asp.net e não consigo fazer a animação dela carregando, alguém pode me ajudar?
    segunda-feira, 6 de fevereiro de 2017 18:13

Respostas

  • Você precisa de um css pra animação e um código JS pra chamar ela.
    no CSS:

    /* Start by setting display:none to make this hidden.
       Then we position it in relation to the viewport window
       with    for themselves. Background we set to 80% white with
       our animation centered, and no-repeating */
    .modal {
        display:    none;
        position:   fixed;
        z-index:    1000;
        top:        0;
        left:       0;
        height:     100%;
        width:      100%;
        background: rgba( 255, 255, 255, .8 ) 
                    url('http://i.stack.imgur.com/FhHRx.gif') 
                    50% 50% 
                    no-repeat;
    }
    
    /* When the body has the loading class, we turn
       the scrollbar off with "pln" style="margin:0px;padding:0px;border:0px;color:#303336;">
    body.loading {
        overflow: hidden;   
    }
    
    /* Anytime the body has the loading class, our
       modal element will be visible */
    body.loading .modal {
        display: block;
    }

    No javascript, você pode usar Jquery:

    $body = $("body");
    
    $(document).on({
        ajaxStart: function() { $body.addClass("loading");    },
         ajaxStop: function() { $body.removeClass("loading"); }    
    });

    Exemplo:

    http://jsfiddle.net/VpDUG/4952/

    clique no "Donec non enim"

    Ok?
    ABS!
    -
    Se a resposta for relevante ou tenha resolvido seu problema, marque como útil/resposta

    quarta-feira, 8 de fevereiro de 2017 00:19

Todas as Respostas

  • Larissa,

    colocou as tags com os scripts ???? qual navegador esta utilizando para testar ???


    Diego Almeida Barreto</strong> <br/> <em>System Analyst / Software Developer</em> <br/> <img </p> </div>

    segunda-feira, 6 de fevereiro de 2017 19:02
  • Larissa, 

    Como você está tentando controlar o percentual? Via código ASP.Net/C# ou javascript?


    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer".

    Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".

    segunda-feira, 6 de fevereiro de 2017 19:03
  • na vdd eu não sei fazer o c# e nem o javascript para loading :/

      pode me ajudar?

    terça-feira, 7 de fevereiro de 2017 15:21
  • não sei usar usar , não sei como faço o javascript para fazer o loading funcionar

       vc pode me ajudar, por favor?

    terça-feira, 7 de fevereiro de 2017 15:22
  • Você precisa apenas mostrar que está processando ou precisa exibir o status real do processamento? Pois se precisar do status real, precisará utilizar recursos como SignalR ou colocar um timer no javascript (ou ASP.Net Ajax) consultando a cada segundo o status do processamento (meio paliativo).

    Qual seria sua necessidade?


    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer".

    Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".

    terça-feira, 7 de fevereiro de 2017 16:02
  • Preciso apenas exibir q está processando! coisa simples

         

    terça-feira, 7 de fevereiro de 2017 18:50
  • Você precisa de um css pra animação e um código JS pra chamar ela.
    no CSS:

    /* Start by setting display:none to make this hidden.
       Then we position it in relation to the viewport window
       with    for themselves. Background we set to 80% white with
       our animation centered, and no-repeating */
    .modal {
        display:    none;
        position:   fixed;
        z-index:    1000;
        top:        0;
        left:       0;
        height:     100%;
        width:      100%;
        background: rgba( 255, 255, 255, .8 ) 
                    url('http://i.stack.imgur.com/FhHRx.gif') 
                    50% 50% 
                    no-repeat;
    }
    
    /* When the body has the loading class, we turn
       the scrollbar off with "pln" style="margin:0px;padding:0px;border:0px;color:#303336;">
    body.loading {
        overflow: hidden;   
    }
    
    /* Anytime the body has the loading class, our
       modal element will be visible */
    body.loading .modal {
        display: block;
    }

    No javascript, você pode usar Jquery:

    $body = $("body");
    
    $(document).on({
        ajaxStart: function() { $body.addClass("loading");    },
         ajaxStop: function() { $body.removeClass("loading"); }    
    });

    Exemplo:

    http://jsfiddle.net/VpDUG/4952/

    clique no "Donec non enim"

    Ok?
    ABS!
    -
    Se a resposta for relevante ou tenha resolvido seu problema, marque como útil/resposta

    quarta-feira, 8 de fevereiro de 2017 00:19
  • obrigada pela ajuda, mas consegui resolver!
       grata pela atenção

    quarta-feira, 8 de fevereiro de 2017 15:57
  • mas tenho esse código e não consigo de jeito nenhum centralizar a imagem, você pode me ajudar?

    :

    css:

    <style>

            .modal
            {
                ;
                top: 0;
                left: 0;
                background-color: white;
                z-index: 1000;
                opacity: 0.9;
                filter: alpha(opacity=20);
                -moz-opacity: 0.9;
                min-height: 100%;
                width: 100%;           
                height:100%;


            }

            .loading
            {
                text-align:center;
                font-family: Arial;
                font-size: 15pt;           
                width: 200px;
                height: 50px;
                display: none;
                ;
                background-color:white;
                z-index: 999;   

            }
        </style>

    JavaScript:

       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

         <script type="text/javascript">
             function ShowProgress() {

                 var modal = $('<div />');
                 modal.addClass(".modal");
                 $('body').append(modal);
                 var loading = $(".loading");
                 loading.show();
                 var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                 var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                 loading.css({ top: 0, left: 0, width: '100%', height: '100%', opacity: '0.7'});

             }
             $('form').live("submit", function () {
                 ShowProgress();
             });
        </script>

       
    quarta-feira, 8 de fevereiro de 2017 16:17
  • Boa tarde Larissa IFSP,

    Por gentileza, abrir uma nova thread para esse novo problema.

    Atenciosamente,


    Robson William Silva

    Esse conteúdo é fornecido sem garantias de qualquer tipo, seja expressa ou implícita

    MSDN Community Support

    Por favor, lembre-se de Marcar como Resposta as postagens que resolveram o seu problema. Essa é uma maneira comum de reconhecer aqueles que o ajudaram e fazer com que seja mais fácil para os outros visitantes encontrarem a resolução mais tarde.

    quarta-feira, 8 de fevereiro de 2017 16:29
    Moderador