Animación de carga CSS con imagen de fondo

1,136 byby.createsite

Abrir en el editor Publica tu código

Animación de carga CSS con imagen de fondo

Recomendado

30 May 2026

Ejemplo de plantilla básica de sitio web HTML

27 May 2026

Web Dash HTML: Modificación de Geometry Dash con Phaser

3 February 2026

Puerto de juego HTML5 de Yume Nikki con controles táctiles

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    /* css_foundation */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background: url("./thumb.jpg") no-repeat center center;
      background-color: #000;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

.codigo {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: #272822;
      color: #F8F8F2;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 18px;
      padding: 20px;
      border-radius: 8px;
      white-space: pre-line;
      text-align: left;
      line-height: 1.6;
      max-height: 25%;
      max-width: 75%;
      width: 75%;
      height: 25%;
      top: 15%;
      overflow-y: hidden;
      box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
    }

.selector {
      color: #F92672;
    }

.property {
      color: #66D9EF;
    }

.value-number {
      color: #AE81FF;
    }

.value-string {
      color: #E6DB74;
    }

.value-color {
      color: #A6E22E;
    }

.function {
      color: #A6E22E;
    }

.animation-container {
      position: absolute;
      top: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background: transparent;
    }

/* loading-element */
    .loading-element {
      width: 20vmin;
      height: 20vmin;
      border-radius: 50%;
      background-color: #FF69B4;
      animation: loading-animation 1s linear infinite;
    }

/* 
    O movimento de expansão da esfera em miniatura é uma metáfora visual para a nossa capacidade de expandir nossos horizontes e sonhos.
    */
    @keyframes loading-animation {
      0% {
        width: 10vmin;
        height: 10vmin;
      }
      50% {
        width: 25vmin;
        height: 25vmin;
      }
      100% {
        width: 10vmin;
        height: 10vmin;
      }
    }

.loading-element::before,
    .loading-element::after {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10vmin;
      height: 0.5vmin;
      background-color: #FF69B4;
      animation: ripple-animation 1s linear infinite;
    }

@keyframes ripple-animation {
      0% {
        height: 0.5vmin;
      }
      50% {
        height: 5vmin;
      }
      100% {
        height: 0.5vmin;
      }
    }

/* micro-detail: uma alteração na cor da esfera em miniatura após a segunda rolagem */
    .loading-element {
      animation-delay: 2s;
    }
  </style>
</head>
<body>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

body{
    background: rgb(251, 247, 247);
      overflow-x: hidden; }

}

.band{
    color: white;
    background-color: blueviolet;
    height: 30px ;

}

.band h1{
    padding: 10px;
    font: 1em sans-serif;
    text-align: center;
}

.logo{
    font-family: sans-serif;
    font-size: large;
    text-align: center;
    padding: 30px;

}

nav{
    height: 80px;
    background-color: rgb(251, 251, 251)
}
.hero{
    height: 400px;
    background-color: white;
    display: flex;
}

.hero .container{
display: flex;
height: 98%;
width: 100%;

}

.container img{
    width: 100%;
}

.content{
    align-items: center;
    display: flex;
    flex-direction: column;
    color: white;
    font-family: sans-serif;
    font-size: 40px;
    margin-top: -200px;
}

.content button{
height: 40px;
width: 150px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background-color: white;
color: black;
border:none;
border-radius: 3px;
}

.title{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:130px;
}

.title h1{
    font-family: sans-serif;
    font-size: 25px;
    margin-bottom: 50px;
}

.product{
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    height: 320px;
    width: 200px;
    flex-direction: column;
    display: flex;
}
.product img{
    height: 200px;
}
.product button{
    height: 50px;
    width: 200px;
    background-color: rgb(51, 47, 47);
    color: #ffffff;
    border: none;

}
.product h2{
margin-top: 20px;
color: rgb(0, 0, 0);
font-family: sans-serif;
font-size: 15px;
margin-bottom: 20px;
text-align: center;

}
.product p{
    font-family: sans-serif;
    font-size: 15px;
    position: relative;
    color: rgb(0, 0, 0);
    left: 160px;
    
}

.product-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.product {
    margin: 10px;
}