Support » Plugin: Loading Page with Loading Screen » HTML code or SVG animation

  • Resolved Matteo Ziggiotto

    (@thewebcorsair)


    Good morning,
    I created a loading screen animation by myself using css keyframes to modify a normal squared div.

    Is there a way to use it instead of a logo or the premade spinners? Because there’s a custom code section but it’s just for the css and if I leave empty the image link field, without selecting any spinner, the loading screen doesn’t appear.
    I tried using a 60*60px svg square but I can’t understand how to make it works in the right way.

    Actually if you click on my site link you can see the animation made using the svg square and the css code (I uploaded the svg in the image link field and the custom css in the custom code field using the lp-screen img class).
    The animation it’s not as it should be, the loader should be less “fatty” as if you try it on the browser using a <div> (p.s: you don’t see the square because the svg I uploaded is empty…there’re no path, but I made a test with a full one and the result is exactly the same fatty one).

    The css animation code it’s too much long to be pasted here.
    I uploaded the svg (xml file) and the .html one (with the css code in the head) at this WeTransfer link (you can switch the <div> tag with an or <object> one and the xml file path, but remember to keep the animation-target class and to add it to the svg path). https://we.tl/t-KH6RfOmofz

    P.S: files are clean. Even if I’ve this username I’m a newbies … but the name was funny 😀

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @thewebcorsair

    The alternative would be:

    – Leave in blank the attribute: “Select the logo image (or any other image)” in the settings page of the plugin.

    – Enter the following code into the attribute: “Include an ad, or your own block of code”

    
    <style>
    	body {
    		background: #101010;
    	}
    	.animation-target {
    		position: absolute;
    		top: 50%;
    		left: 50%;
    		margin-left: -30px;
    		margin-top: -30px;
    		
    		height: 60px;
    		width: 60px;
    		background: #870099;
    
        -moz-animation: preload-animation 2100ms linear infinite both;
      	-webkit-animation: preload-animation 2100ms linear infinite both;
      	animation: preload-animation 2100ms linear infinite both;
    	}
    
    /**************************
    *****GENERAL ANIMATION******
    **************************/
    @keyframes preload-animation { 
      0% {	transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      		background-image: linear-gradient( to bottom right, #870099 35%, #00CCFF);
      		border-radius: 2px;
      	}
      2.15% {	transform: matrix3d(0.589, 0, 0, 0, 0, 1.514, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      			border-radius: 0px;
      	}
      4.3% {	transform: matrix3d(0.297, 0, 0, 0, 0, 1.879, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      6.46% {	transform: matrix3d(0.158, 0, 0, 0, 0, 2.052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      8.61% {	transform: matrix3d(0.125, 0, 0, 0, 0, 2.093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      14.16% {	transform: matrix3d(0.183, 0, 0, 0, 0, 2.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      19.72% {	transform: matrix3d(0.205, 0, 0, 0, 0, 1.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      24.9% {	transform: matrix3d(0.201, 0, 0, 0, 0, 1.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      25% {	transform: matrix3d(0.201, 0, 0, 0, 0, 1.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      27.15% {	transform: matrix3d(0.138, 0.145, 0, 0, -1.445, 1.382, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      29.3% {	transform: matrix3d(0.038, 0.196, 0, 0, -1.964, 0.379, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      30.83% {	transform: matrix3d(-0.006, 0.2, 0, 0, -2, -0.059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      31.46% {	transform: matrix3d(-0.016, 0.199, 0, 0, -1.994, -0.164, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      33.61% {	transform: matrix3d(-0.029, 0.198, 0, 0, -1.979, -0.292, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      39.16% {	transform: matrix3d(-0.006, 0.2, 0, 0, -1.999, -0.065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      41.99% {	transform: matrix3d(0, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      44.72% {	transform: matrix3d(0.002, 0.2, 0, 0, -2, 0.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      49.9% {	transform: matrix3d(0.001, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      50% {	transform: matrix3d(0.001, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      52.15% {	transform: matrix3d(0, 0.611, 0, 0, -1.486, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      			background-image: linear-gradient( to top right, #870099 35%, #00CCFF);
      			border-radius: 0px;
      	}
      54.3% {	transform: matrix3d(0, 0.903, 0, 0, -1.121, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      55.83% {	transform: matrix3d(-0.001, 1.015, 0, 0, -0.981, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      56.46% {	transform: matrix3d(-0.001, 1.042, 0, 0, -0.948, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      58.61% {	transform: matrix3d(0, 1.075, 0, 0, -0.907, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      64.16% {	transform: matrix3d(0, 1.017, 0, 0, -0.979, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      66.99% {	transform: matrix3d(0, 0.999, 0, 0, -1.001, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      69.72% {	transform: matrix3d(0, 0.995, 0, 0, -1.006, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      75% {	transform: matrix3d(0, 0.999, 0, 0, -1.002, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      80.83% {	transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      91.99% {	transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      			border-radius: 0px 55px;
      	}
      100% {	transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      			background-image: linear-gradient(to top right, #870099 35%, #00CCFF);
      			border-radius: 0px 5px;
      	} 
    }
    
    /***************************
    ******CHROME, SAFARI ANIMATION*****
    ***********************************/
    @-webkit-keyframes preload-animation { 
      0% {	-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      		-webkit-background-image: linear-gradient( to bottom right, #870099 35%, #00CCFF);
      		-webkit-border-radius: 2px;
      	}
      2.15% {	-webkit-transform: matrix3d(0.589, 0, 0, 0, 0, 1.514, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      			-webkit-border-radius: 0px;
      	}
      4.3% {	-webkit-transform: matrix3d(0.297, 0, 0, 0, 0, 1.879, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      6.46% {	-webkit-transform: matrix3d(0.158, 0, 0, 0, 0, 2.052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      8.61% {	-webkit-transform: matrix3d(0.125, 0, 0, 0, 0, 2.093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      14.16% {	-webkit-transform: matrix3d(0.183, 0, 0, 0, 0, 2.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      19.72% {	-webkit-transform: matrix3d(0.205, 0, 0, 0, 0, 1.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      24.9% {	-webkit-transform: matrix3d(0.201, 0, 0, 0, 0, 1.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      25% {	-webkit-transform: matrix3d(0.201, 0, 0, 0, 0, 1.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      27.15% {	-webkit-transform: matrix3d(0.138, 0.145, 0, 0, -1.445, 1.382, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      29.3% {	-webkit-transform: matrix3d(0.038, 0.196, 0, 0, -1.964, 0.379, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      30.83% {	-webkit-transform: matrix3d(-0.006, 0.2, 0, 0, -2, -0.059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      31.46% {	-webkit-transform: matrix3d(-0.016, 0.199, 0, 0, -1.994, -0.164, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      33.61% {	-webkit-transform: matrix3d(-0.029, 0.198, 0, 0, -1.979, -0.292, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      39.16% {	-webkit-transform: matrix3d(-0.006, 0.2, 0, 0, -1.999, -0.065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      41.99% {	-webkit-transform: matrix3d(0, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      44.72% {	-webkit-transform: matrix3d(0.002, 0.2, 0, 0, -2, 0.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      49.9% {	-webkit-transform: matrix3d(0.001, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      50% {	-webkit-transform: matrix3d(0.001, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      52.15% {	-webkit-transform: matrix3d(0, 0.611, 0, 0, -1.486, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      			-webkit-background-image: linear-gradient( to top right, #870099 35%, #00CCFF);
      			-webkit-border-radius: 0px;
      	}
      54.3% {	-webkit-transform: matrix3d(0, 0.903, 0, 0, -1.121, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      55.83% {	-webkit-transform: matrix3d(-0.001, 1.015, 0, 0, -0.981, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      56.46% {	-webkit-transform: matrix3d(-0.001, 1.042, 0, 0, -0.948, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      58.61% {	-webkit-transform: matrix3d(0, 1.075, 0, 0, -0.907, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      64.16% {	-webkit-transform: matrix3d(0, 1.017, 0, 0, -0.979, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      66.99% {	-webkit-transform: matrix3d(0, 0.999, 0, 0, -1.001, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      69.72% {	-webkit-transform: matrix3d(0, 0.995, 0, 0, -1.006, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      75% {	-webkit-transform: matrix3d(0, 0.999, 0, 0, -1.002, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      80.83% {	-webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      91.99% {	-webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      			-webkit-border-radius: 0px 55px;
      	}
      100% {	-webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      			-webkit-background-image: linear-gradient(to top right, #870099 35%, #00CCFF);
      			-webkit-border-radius: 0px 5px;
      	} 
    }
    
    /***************************
    ******MOZILLA ANIMATION*******
    **************************/
    @-moz-keyframes preload-animation { 
      0% {	-moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      		-moz-background-image: linear-gradient( to bottom right, #870099 35%, #00CCFF);
      		-moz-border-radius: 2px;
      	}
      2.15% {	-moz-transform: matrix3d(0.589, 0, 0, 0, 0, 1.514, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      			-moz-border-radius: 0px;
      	}
      4.3% {	-moz-transform: matrix3d(0.297, 0, 0, 0, 0, 1.879, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      6.46% {	-moz-transform: matrix3d(0.158, 0, 0, 0, 0, 2.052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      8.61% {	-moz-transform: matrix3d(0.125, 0, 0, 0, 0, 2.093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      14.16% {	-moz-transform: matrix3d(0.183, 0, 0, 0, 0, 2.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      19.72% {	-moz-transform: matrix3d(0.205, 0, 0, 0, 0, 1.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      24.9% {	-moz-transform: matrix3d(0.201, 0, 0, 0, 0, 1.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      25% {	-moz-transform: matrix3d(0.201, 0, 0, 0, 0, 1.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      27.15% {	-moz-transform: matrix3d(0.138, 0.145, 0, 0, -1.445, 1.382, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      29.3% {	-moz-transform: matrix3d(0.038, 0.196, 0, 0, -1.964, 0.379, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      30.83% {	-moz-transform: matrix3d(-0.006, 0.2, 0, 0, -2, -0.059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      31.46% {	-moz-transform: matrix3d(-0.016, 0.199, 0, 0, -1.994, -0.164, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      33.61% {	-moz-transform: matrix3d(-0.029, 0.198, 0, 0, -1.979, -0.292, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      39.16% {	-moz-transform: matrix3d(-0.006, 0.2, 0, 0, -1.999, -0.065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      41.99% {	-moz-transform: matrix3d(0, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      44.72% {	-moz-transform: matrix3d(0.002, 0.2, 0, 0, -2, 0.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      49.9% {	-moz-transform: matrix3d(0.001, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      50% {	-moz-transform: matrix3d(0.001, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      52.15% {	-moz-transform: matrix3d(0, 0.611, 0, 0, -1.486, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      			-moz-background-image: linear-gradient( to top right, #870099 35%, #00CCFF);
      			-moz-border-radius: 0px;
      	}
      54.3% {	-moz-transform: matrix3d(0, 0.903, 0, 0, -1.121, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      55.83% {	-moz-transform: matrix3d(-0.001, 1.015, 0, 0, -0.981, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      56.46% {	-moz-transform: matrix3d(-0.001, 1.042, 0, 0, -0.948, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      58.61% {	-moz-transform: matrix3d(0, 1.075, 0, 0, -0.907, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      64.16% {	-moz-transform: matrix3d(0, 1.017, 0, 0, -0.979, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      66.99% {	-moz-transform: matrix3d(0, 0.999, 0, 0, -1.001, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      69.72% {	-moz-transform: matrix3d(0, 0.995, 0, 0, -1.006, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      75% {	-moz-transform: matrix3d(0, 0.999, 0, 0, -1.002, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      80.83% {	-moz-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      	}
      91.99% {	-moz-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      			-moz-border-radius: 0px 55px;
      	}
      100% {	-moz-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      			-moz-background-image: linear-gradient(to top right, #870099 35%, #00CCFF);
      			-moz-border-radius: 0px 5px;
      	} 
    }
    </style>
    <div class="animation-target"></div>
    

    Best regards.

    Thread Starter Matteo Ziggiotto

    (@thewebcorsair)

    @codepeople Hello and thanks for the fast reply.
    Alright I added the div leaving blank the image field and now it works (probably I mistaken before).
    The problem is the positioning doesn’t work. If you check the site you’ll see the div stays on the top center of the page. Is there a way to fix this?

    Teo

    Plugin Author codepeople

    (@codepeople)

    Hello @thewebcorsair

    As you are inserting your own div tag, with the class name: animation-target you should edit it for assigning the CSS rules margin-top, or top

    If you need a custom coding service to edit your loading screen, you can request it through my private website:

    https://wordpress.dwbooster.com/support

    Best regards.

    Thread Starter Matteo Ziggiotto

    (@thewebcorsair)

    Hello @codepeople
    I assigned the margin top

    The reason the my div is centered horezontally but not vertically is that the custom code is contained in a div which has a width but not an height.
    Adding this code then it works fine

    #loading_page_codeBlock {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    }

    Thank you very much for the help!
    Teo

    P.S: could you add in the plugin documentation a list of the classes/ids of the elements?
    They are easy to find (using the dev console), but in any case it would be useful to have them as reference. In any case great plugin

    Plugin Author codepeople

    (@codepeople)

    Hello @thewebcorsair

    Yes, you are right, the page of this plugin it is being re-designed.

    Best regards.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘HTML code or SVG animation’ is closed to new replies.