Criando um Carregamento com Spinner e Atraso no Carregamento de Conteúdo (considerando um player como exemplo) – Blog – Devdata Sistemas

Se você deseja implementar uma tela de carregamento com um spinner (ícone giratório) enquanto seu conteúdo está sendo carregado e só exibir o player ou outro conteúdo após um atraso, este post irá te guiar passo a passo.

1. Estrutura Básica do HTML

Primeiramente, temos a estrutura básica de uma página HTML. Dentro do corpo (<body>), vamos ter uma mensagem de carregamento (com o spinner) e o conteúdo principal (o player, por exemplo).

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rádio Virtual - onDemand</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* Estilos básicos */
    </style>
</head>
<body>
    <!-- Mensagem de Carregamento com Spinner -->
    <div id="loadingMessage">
        <div class="spinner"></div>
    </div>

    <!-- Conteúdo do Player (inicialmente oculto) -->
    <div id="playerContainer">
        <!-- Detalhes do player aqui -->
    </div>

    <script>
        // JavaScript
    </script>
</body>
</html>

2. Estilos do Spinner

O spinner é um elemento que gira para indicar que algo está carregando. O código CSS abaixo cria esse efeito:

/* Estilos do Spinner */
.spinner {
    border: 4px solid #f3f3f3; /* Cor de fundo */
    border-top: 4px solid #3498db; /* Cor da parte giratória */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite; /* Animação */
}

@keyframes spin {
    0% {
        transform: rotate(0deg); /* Posição inicial */
    }
    100% {
        transform: rotate(360deg); /* Rotação completa */
    }
}

3. Controlando a Exibição com Atraso

Para controlar o atraso do carregamento e exibir o conteúdo após um tempo, usamos o setTimeout dentro do window.addEventListener('load'). Isso garante que a função seja chamada após a página carregar completamente.

window.addEventListener('load', function () {
    setTimeout(function () {
        // Esconde a mensagem de carregamento
        document.getElementById('loadingMessage').style.display = 'none';
        
        // Exibe o conteúdo do player
        document.getElementById('playerContainer').style.display = 'block';
    }, 2000); // Atraso de 2 segundos
});

4. A Estrutura Completa do Código

Aqui está a página completa que combina HTML, CSS e JavaScript para criar o carregamento com spinner e atraso:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rádio Virtual - onDemand</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: 'Raleway', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #ff0000, #2c2c2c, #ff8c00);
            background-size: 400% 400%;
            animation: gradientMove 133s ease infinite;
            color: white;
            overflow: hidden;
        }

        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        #loadingMessage {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 24px;
            z-index: 9999;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        #playerContainer {
            width: 90%;
            max-width: 400px;
            background: #1c1c1c;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.6);
            text-align: center;
            margin: 20px;
            opacity: 0.8;
            margin-top: -50px;
            display: none; /* Inicialmente oculto */
        }

        /* Mais estilos aqui... */
    </style>
</head>
<body>
    <!-- Spinner de carregamento -->
    <div id="loadingMessage">
        <div class="spinner"></div>
    </div>

    <!-- Conteúdo do player -->
    <div id="playerContainer">
        <!-- Detalhes do player -->
    </div>

    <script>
        window.addEventListener('load', function () {
            setTimeout(function () {
                // Esconde a mensagem de carregamento
                document.getElementById('loadingMessage').style.display = 'none';
                
                // Exibe o conteúdo do player
                document.getElementById('playerContainer').style.display = 'block';
            }, 2000); // Atraso de 2 segundos
        });
    </script>
</body>
</html>

5. Explicação do Funcionamento

O Spinner: O spinner (ícone giratório) é um elemento div com a classe .spinner, que aplica a animação de rotação utilizando o @keyframes e a propriedade animation.
Atraso com setTimeout: O setTimeout é usado para definir um atraso de 2 segundos (ou qualquer valor que você desejar). Esse atraso ocorre após a página ter carregado completamente, e só depois disso o conteúdo do player será exibido.
Escondendo e Exibindo Elementos: O JavaScript manipula a exibição dos elementos:
- A mensagem de carregamento (#loadingMessage) é escondida.
- O conteúdo do player (#playerContainer) é exibido após o atraso.

Conclusão

Esse exemplo é bastante útil para dar uma boa impressão ao usuário enquanto o conteúdo da página está sendo carregado. O spinner é uma maneira simples de indicar que algo está acontecendo e o atraso com o setTimeout permite um tempo extra de carregamento para transições suaves. A partir daqui, você pode personalizar e adicionar funcionalidades para outras partes do seu site ou aplicação.