Exemple d'animation de chargement CSS

1,237 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

12 October 2025

Exemple de calques d'animation CSS

30 March 2025

Un code par ytr3d3

11 May 2024

Carte de survol Ethereum

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