CSS Loading Animation Snippet

Open In Editor Video 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

CSS OTP Page

Animated CSS Dropdown Menu Examples

CSS Room Door Animation HTML Snippet

HTML

CSS

JS

Recommended

CSS OTP Page

Animated CSS Dropdown Menu Examples

CSS Room Door Animation HTML Snippet

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS