Exemplo de animação de carregamento CSS

679 byby.createsite

Abrir no Editor Video Publique Seu Código

Recomendado

22 March 2025

formulário de inscrição para newsletter

27 December 2025

Envelope de carta de amor animado em HTML com GSAP

12 October 2025

Modelo de interface do usuário do Facebook - Exemplo em HTML

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
   <style>

* {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }
      
      body {
         background:url("./thumb.jpg") no-repeat center center;
         background-color: black; /* changed background color to black */
         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;
      }
      
      /* 
      * 
      * Main Animation
      * 
      */
      .loading-element {
         position: relative;
         width: 50vh;
         height: 50vh;
         border-radius: 50%;
         background-color: #222;
         border: 1px solid #FFF;
         animation: loading-animation 1s linear infinite;
      }
      
      .loading-element::before, .loading-element::after {
         content: "";
         position: absolute;
         width: 1vh;
         height: 10vh;
         border-radius: 10vh;
         background-color: #FFF;
         animation: loading-animation 1s linear infinite;
      }
      
      .loading-element::before {
         left: 0;
         top: 45vh;
      }
      
      .loading-element::after {
         right: 0;
         top: 45vh;
      }
      
      .loading-element2 {
         position: relative;
         width: 0;
         height: 0;
         border-style: solid;
         border-width: 0 0 5vh 0;
         border-color: transparent transparent #FFF transparent;
         animation: growing-animation 1s linear;
      }
      
      .loading-element2::before {
         content: "";
         position: absolute;
         width: 0;
         height: 0;
         border-style: solid;
         border-width: 0 0 10vh 0;
         border-color: transparent transparent #000 transparent;
         animation: growing-animation 1s linear;
      }
      
      @keyframes loading-animation {
         0% {
            transform: rotate(0deg);
            opacity: 1;
            border-color: #FFF;
         }
         100% {
            transform: rotate(360deg);
            opacity: 0;
            border-color: #000;
         }
      }
      
      @keyframes growing-animation {
         0% {
            border-width: 0 0 5vh 0;
         }
         100% {
            border-width: 0 0 15vh 0;
         }
      }
      
      /* 
      * Micro-details for replay value
      */
      .micro-detail {
         position: absolute;
         width: 10vh;
         height: 10vh;
         background-color: #333;
         animation: micro-animation 1s linear;
      }
      
      .micro-detail::before {
         content: "";
         position: absolute;
         width: 5vh;
         height: 5vh;
         background-color: #FFF;
         animation: micro-animation 1s linear;
      }
      
      @keyframes micro-animation {
         0% {
            opacity: 1;
         }
         50% {
            opacity: 0;
         }
         100% {
            opacity: 1;
         }
      }
   </style>
</head>
<body>
   <div class="animation-container">
      <div class="loading-element"></div>
   </div>

</body>
</html>

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

Recomendado

formulário de inscrição para newsletter

Envelope de carta de amor animado em HTML com GSAP

Modelo de interface do usuário do Facebook - Exemplo em HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS