CSS एनिमेशन: प्रगति बार और ड्रॉप्स

919 byby.createsite

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

अनुशंसित

13 September 2025

CSS लोडिंग बार एनीमेशन HTML

14 March 2025

मूल्य निर्धारण इंटरैक्शन (HTML, CSS और JS)

9 December 2025

लॉगिन और साइनअप फॉर्म का HTML/CSS संस्करण

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #1c1a1f;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #0e0c10;
  color: #ddffcc;
  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: 50%;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.selector       { color: #bf8b79; } .property       { color: #dd5955; } .value-number   { color: #99a2a8; } .value-string   { color: #89b2ad; } .value-color    { color: #b9947f; } .brace          { color: #2683e7; } .comment        { color: #b08f8a; } .function       { color: #cc7788; }
.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;
}

.progress {
  position: relative;
  width: 300px; /* Define a tamanho da barra */
  height: 10px; 
  background: #f8f8f2;
  border-radius: 10px;
}

.bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(to right, #c9b99a, #d26f1e); /* Define a cor da barra */
  width: 0%; /* Define o tamanho inicial da barra */
  height: 10px; /* Altura fixa da barra */
  border-radius: 10px; /* Define o efeito arredondado da barra */
  transition: width 5s ease-in-out; /* Define a duração e a animação */
}

/* Efeitos visuais */
.drop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #ff6600; /* Cor da bolinha */
  border-radius: 50%; /* Forma redonda da bolinha */
  animation: drop 0.7s infinite ease-in-out;
  
}

@keyframes drop {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); } 
}

.beeps {
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1;
  height: 1;
  animation: beeps 4s infinite;
}

@keyframes beeps {
  0% {
    background: transparent; 
  }

50% {
    background: #ff6600; 
  }
  100% {
    background: transparent; 
  } 
}

अनुशंसित

CSS लोडिंग बार एनीमेशन HTML

मूल्य निर्धारण इंटरैक्शन (HTML, CSS और JS)

लॉगिन और साइनअप फॉर्म का HTML/CSS संस्करण

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS