Preloader

  • keywordsmkt

    (@keywordsmkt)


    hace 3 años, 10 meses

    Hola, necesito insertar un preloader a mi pagina de wordpress.

    Me han enviado este código con las 3 imagenes respectivamente

    donde y como se debe realizar la carga de este código?

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Loading Tartarizados</title>
 <meta name="description" content="">

<style type="text/css">
	body{
		background-color:#5a3284;
		display: flex;
		justify-content: center;
		height: 100vh;
		align-items: center;
	}

	#logo{
		position: relative;
		width: 200px;
		height: 200px;
		/*border: 1px solid red;
		/*display: flex;
		justify-content: center;
		flex-direction: column;
		/*align-items: center;*/
	}
	#rosa{
		position: absolute;
		left:5px;
		top: 16px;
		animation-name: rosa;
		animation-duration: 3.5s;
		animation-iteration-count: infinite;

	}

	@keyframes rosa{

		0%{
			opacity: 0;
			transform: scale(.3) rotate(0deg);

		}

		30%{
			opacity: 1;
			transform: scale(.8) rotate(360deg);
		}

		50%{
			opacity: 1;
			transform: scale(.8) rotate(360deg);
		}

		100%{
			opacity: 0;
			transform: scale(.3) rotate(0deg);
		}
	}

	#amarillo{
		position: absolute;
		left:80px;
		top: 45px;
		animation-name: amarillo;
		animation-duration: 3.5s;
		animation-iteration-count: infinite;
	}

		@keyframes amarillo{

		0%{
			opacity: 0;
			transform: scale(.3) rotate(0deg);

		}

		30%{
			opacity: 1;
			transform: scale(.8) rotate(360deg);
		}

		50%{
			opacity: 1;
			transform: scale(.8) rotate(360deg);
		}

		100%{
			opacity: 0;
			transform: scale(.3) rotate(0deg);
		}
	}
	#celeste{
		position: absolute;
		left: 54px;
    	top: 122px;
		animation-name: celeste;
		animation-duration: 3.5s;
		animation-iteration-count: infinite;
	}

	@keyframes celeste{

		0%{
			opacity: 0;
			transform: scale(.3) rotate(0deg);

		}

		30%{
			opacity: 1;
			transform: scale(.8) rotate(360deg);
		}

		50%{
			opacity: 1;
			transform: scale(.8) rotate(360deg);
		}

		100%{
			opacity: 0;
			transform: scale(.3) rotate(0deg);
		}
	}

</style>

</head>
<body>
<div id="logo">
	<div  id="rosa"><img /></div>
	<div  id="amarillo"><img src="img\estrellas-02.png" /></div>
	<div  id="celeste"><img /></div>
    • Este debate fue modificado hace 3 años, 10 meses por jose64. Razón: Etiquetar código

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • El debate ‘Preloader’ está cerrado a nuevas respuestas.