CSS Loading Animation with Background Image

Open In Editor Video Publish Your Code

.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;
}

CSS Loading Animation with Background Image

Recommended

CSS Loading Animation Snippet

CSS only infinate marquee

CSS Animated Button & Layer

HTML

CSS

JS

Recommended

CSS Loading Animation Snippet

CSS only infinate marquee

CSS Animated Button & Layer

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS