CSS Loading Animation Example

Open In Editor Video Publish Your Code

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

CSS Loading Animation Example

Recommended

Link Text Animation

HTML Heart Animation Data Stream

Firefly Button HTML CSS Tailwind

HTML

CSS

JS

Recommended

Link Text Animation

HTML Heart Animation Data Stream

Firefly Button HTML CSS Tailwind

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS