• keywordsmkt

    (@keywordsmkt)


    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 1 año por Jose Luis. 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)
  • kallookoo

    (@kallookoo)

    Hola @keywordsmkt

    Pues basicamente quien te envio ese codigo deberia habertelo dado para poder utilizar en el WordPress, comentaselo y que haga los ajustes necesarios

    Iniciador del debate keywordsmkt

    (@keywordsmkt)

    @kallookoo y que es lo q le deberia decir q me pase?

    kallookoo

    (@kallookoo)

    Suponiendo que es programador el lo deberia de saber.
    En caso contratio buscate un plugin de preloader en el repositorio.

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