Olá, estou desenvolvendo um sistema web, onde quando o usuário efetua login é rpeciso carregar uma série de informações, e este processo demora um pouco, eu gostaria de saber como se faz para exibir uma tela ou uma pág…

Se você buscar por “Loading Bar Javascript” vai achar vários links no google. Por exemplo este: seabreezecomputers.com Cool Javascript Progress Bar for HTML Web Page Javascript Progress Bar. Uses the 'complete' variable on all the image elements to display a loading progress bar for an HTML document

Dúvida: tela de Loading... durante login

2 Respostas

BrunoBastos 26 de jul. de 2010

Se você buscar por “Loading Bar Javascript” vai achar vários links no google.

Por exemplo este:

renangarcia 27 de jul. de 2010

Devo admitir que não sabia nem qual termo procurar no Google…

aushaushaushuashuahsas

mas segui sua dica e pesquisei, e consegui fazer um bastante simples, mas muito eficiente…

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
    <script type="text/javascript">
        function exibe(id) {
            if(document.getElementById(id).style.display=="none") {
            document.getElementById(id).style.display = "inline";
            }else {
                document.getElementById(id).style.display = "none";
            }
        }
    </script>
    <title>Pregão On-Line</title>
</head>
<body>
    CONTEÚDO DA PÁGINA
    <br>lalalalalalalalalalala
    <br>
    <br>lalalalalalalalalalala
    <br>
    <br><input type="submit" name="subimit" value="Ver Loading" onclick="exibe('loading');">
</body>
<div id="loading" style="display: none;
        background: #FFFFFF;
        position: absolute;
        width: 400px;
        top: 50%;
        left: 50%;
        margin-left: -200px;
        margin-top: -100px;
        border-style: solid;
        border-color: black;
        border-width: 1px;
        text-align: center;
        text-transform: uppercase;
        font-family: arial;
        font-weight: bold;
        color: silver;
        z-index: 3;">
    <br>
    <br>
    <br><img alt="Loading..." src="images/loading.gif" width="30" height="30">
    <br>Carregando...
    <br>&ensp;
    <br>&ensp;
</div>

Explicando o código:

No header da pagina coloquei uma função que altera o atributo “display” de um dado elemento da pagina.
No final da pagina criei um div que aparece no meio da pagina e em cima de tudo, ele ficará visível até que mude de página, ou seja…

quando o servlet finalmente terminar de carragar as informações (no meu caso), já que o servidorzinho é uma carroça :lol:

fritei alguns neurônios, mas tae!!!

2 Respostas

Topicos relacionados