Fragmento de animación de carga de CSS

974 byby.createsite

Abrir en el editor Video Publica tu código

Recomendado

21 June 2024

Encabezado fijo controlado por desplazamiento

17 May 2025

sociedad moderna

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background:url("./thumb.jpg") no-repeat center center;
      background-color: 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;
    }

.loading-element {
		width: 80px;
		height: 80px;
		background-color: #fff;
		border-radius: 50%;
		animation: loading-animation 2s linear infinite;
	}
	
	@keyframes loading-animation {
		0% {
			transform: scale(1);
			opacity: 1;
		}
		25% {
			transform: scale(1.1);
			opacity: 0.5;
		}
		50% {
			transform: scale(1.2);
			opacity: 0.25;
		}
		75% {
			transform: scale(1.1);
			opacity: 0.5;
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

div.animation-container::before {
	  width: 100%;
	  height: 100%;
	  background: radial-gradient(hotpink, #f6f6f6);
	  transform: scale(0);
	  animation: expand 2s linear infinite;
	}
	
	@keyframes expand {
	  0% {
	    transform: scale(0);
	    opacity: 0;
	  }
	  25% {
	    transform: scale(0.5);
	    opacity: 0.5;
	  }
	  50% {
	    transform: scale(1);
	    opacity: 1;
	  }
	  75% {
	    transform: scale(1.1);
	    opacity: 0.5;
	  }
	  100% {
	    transform: scale(1);
	    opacity: 0;
	  }
	}

div.animation-container::after {
	  width: 100%;
	  height: 100%;
	  background: radial-gradient(hotpink, #f6f6f6);
	  transform: scale(0);
	  animation: pulsate 2s ease-in-out infinite;
	  z-index: 2;
	}
	
	@keyframes pulsate {
	  0% {
	    transform: scale(0);
	  }
	  50% {
	    transform: scale(1);
	  }
	  100% {
	    transform: scale(0);
	  }
	}

@keyframes loading-animation {
	  0% {
	    transform: scale(1);
	    opacity: 1;
	  }
	  25% {
	    transform: scale(1.1);
	    opacity: 0.5;
	  }
	  50% {
	    transform: scale(1.2);
	    opacity: 0.25;
	  }
	  75% {
	    transform: scale(1.1);
	    opacity: 0.5;
	  }
	  100% {
	    transform: scale(1);
	    opacity: 1;
	  }
	}

Fragmento de animación de carga de CSS

Recomendado

Palanca dentada

Encabezado fijo controlado por desplazamiento

sociedad moderna

HTML

CSS

JS

Recomendado

Palanca dentada

Encabezado fijo controlado por desplazamiento

sociedad moderna

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS