Frammento di animazione di caricamento CSS

972 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Frammento di animazione di caricamento CSS

Consigliato

10 January 2026

Modello HTML di accesso per il personale del ristorante

24 November 2025

Unity Game Loader: Esempio di uccelli

25 May 2025

Un codice di qatar2023

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

Consigliato

Modello HTML di accesso per il personale del ristorante

Unity Game Loader: Esempio di uccelli

Un codice di qatar2023

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS