CSS लोडिंग एनीमेशन उदाहरण

841 byby.createsite

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

30 January 2026

प्योर सीएसएस रिस्पॉन्सिव नेविगेशन बार का उदाहरण

12 September 2025

छवि स्लाइडर HTML CSS जावास्क्रिप्ट

31 January 2025

शुद्ध CSS कार्ड मूवीज़ 3D

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

अनुशंसित

प्योर सीएसएस रिस्पॉन्सिव नेविगेशन बार का उदाहरण

छवि स्लाइडर HTML CSS जावास्क्रिप्ट

शुद्ध CSS कार्ड मूवीज़ 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS