CSS Loading Animation Snippet

Open In Editor Publish Your Code

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

CSS Loading Animation Snippet

Recommended

Fraction of Animation

NETFLIX LOADING PAGE

CSS Contact Form

HTML

CSS

JS

Recommended

Fraction of Animation

NETFLIX LOADING PAGE

CSS Contact Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS