Trecho de animação de carregamento CSS

807 byby.createsite

Abrir no Editor Video Publique Seu Código

Recomendado

22 August 2025

Exemplo de botões de contato HTML

19 November 2024

código de revisão do iphone 16

17 September 2024

Identidade

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

Recomendado

Exemplo de botões de contato HTML

código de revisão do iphone 16

Identidade

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS