Exemple d'animation de chargement CSS

839 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

17 July 2024

Formulaire de paiement HTML et CSS

15 October 2025

Monstre de l'horloge du compte à rebours d'Halloween

25 February 2026

Générateur de codes QR HTML, JavaScript

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

Recommandé

Formulaire de paiement HTML et CSS

Monstre de l'horloge du compte à rebours d'Halloween

Générateur de codes QR HTML, JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS