Custom Preloader

asinan007Jan 15, 2019

I love like to havea custom preloader below is the css

.soccer {
  background: url(http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg);
  background-size: 50px 50px;
  height: 50px;
  width: 50px;
  position: relative;
  -webkit-animation:roll 4.5s infinite;
  -moz-animation:roll 4.5s infinite;
  animation:roll 4.5s infinite;
}

@-moz-keyframes roll {  
  0% {left:0px; -webkit-transform: rotate(-360deg);}
  50% {left:1000px; -webkit-transform: rotate(360deg);}
  100% {left:0px; -webkit-transform: rotate(-360deg);}
}
@-webkit-keyframes roll { 
  0% {left:0px; -webkit-transform: rotate(-360deg);}
  50% {left:1000px; -webkit-transform: rotate(360deg);}
  100% {left:0px; -webkit-transform: rotate(-360deg);}
}

@keyframes roll { 
  0% {left:0px; -webkit-transform: rotate(-360deg);}
  50% {left:1000px; -webkit-transform: rotate(360deg);}
  100% {left:0px; -webkit-transform: rotate(-360deg);}
}

Also i have made body tag as below

<body class="stretched" data-loader-html="<span class='soccer'></span>">

but i cannot see anything.

Also there is about 20px space on the right side of the site. the y scroll bar is visible. Not sure where this is coming from.
below is a live URL

http://musc.000webhostapp.com/index-preloader-test.html

Thank You in advance.

SemiColonWebSTAFFJan 17, 2019

Hello,

We have checked out your Codes and there are some issues with them. Consider using the following CSS Code:

.soccer {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
    height: 50px;
    width: 50px;
    -webkit-animation:roll 4.5s infinite;
    -moz-animation:roll 4.5s infinite;
    animation:roll 4.5s infinite;
}

.soccer svg {
    max-width: 100%;
    max-height: 100%;
}

@-moz-keyframes roll {
    0% {left:20%; -webkit-transform: rotate(-360deg);}
    50% {left:70%; -webkit-transform: rotate(360deg);}
    100% {left:20%; -webkit-transform: rotate(-360deg);}
}
@-webkit-keyframes roll {
    0% {left:20%; -webkit-transform: rotate(-360deg);}
    50% {left:70%; -webkit-transform: rotate(360deg);}
    100% {left:20%; -webkit-transform: rotate(-360deg);}
}

@keyframes roll {
    0% {left:20%; -webkit-transform: rotate(-360deg);}
    50% {left:70%; -webkit-transform: rotate(360deg);}
    100% {left:20%; -webkit-transform: rotate(-360deg);}
}

And the following HTML Code:

<body class="stretched" data-loader-html="<span class='soccer'><svg width='800' height='800' viewBox='-105 -105 210 210' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <defs> <clipPath id='ball'> <circle r='100' stroke-width='0'/> </clipPath> <radialGradient id='shadow1' cx='.4' cy='.3' r='.8'> <stop offset='0' stop-color='white' stop-opacity='1'/> <stop offset='.4' stop-color='white' stop-opacity='1'/> <stop offset='.8' stop-color='#EEEEEE' stop-opacity='1'/> </radialGradient> <radialGradient id='shadow2' cx='.5' cy='.5' r='.5'> <stop offset='0' stop-color='white' stop-opacity='0'/> <stop offset='.8' stop-color='white' stop-opacity='0'/> <stop offset='.99' stop-color='black' stop-opacity='.3'/> <stop offset='1' stop-color='black' stop-opacity='1'/> </radialGradient> <g id='black_stuff' stroke-linejoin='round' clip-path='url(#ball)'> <g fill='black'> <path d='M 6,-32 Q 26,-28 46,-19 Q 57,-35 64,-47 Q 50,-68 37,-76 Q 17,-75 1,-68 Q 4,-51 6,-32'/> <path d='M -26,-2 Q -45,-8 -62,-11 Q -74,5 -76,22 Q -69,40 -50,54 Q -32,47 -17,39 Q -23,15 -26,-2'/> <path d='M -95,22 Q -102,12 -102,-8 V 80 H -85 Q -95,45 -95,22'/> <path d='M 55,24 Q 41,41 24,52 Q 28,65 31,79 Q 55,78 68,67 Q 78,50 80,35 Q 65,28 55,24'/> <path d='M 0,120 L -3,95 Q -25,93 -42,82 Q -50,84 -60,81'/> <path d='M -90,-48 Q -80,-52 -68,-49 Q -52,-71 -35,-77 Q -35,-100 -40,-100 H -100'/> <path d='M 100,-55 L 87,-37 Q 98,-10 97,5 L 100,6'/> </g> <g fill='none'> <path d='M 6,-32 Q -18,-12 -26,-2 M 46,-19 Q 54,5 55,24 M 64,-47 Q 77,-44 87,-37 M 37,-76 Q 39,-90 36,-100 M 1,-68 Q -13,-77 -35,-77 M -62,-11 Q -67,-25 -68,-49 M -76,22 Q -85,24 -95,22 M -50,54 Q -49,70 -42,82 M -17,39 Q 0,48 24,52 M 31,79 Q 20,92 -3,95 M 68,67 L 80,80 M 80,35 Q 90,25 97,5 '/> </g> </g> </defs> <circle r='100' fill='white' stroke='none'/> <circle r='100' fill='url(#shadow1)' stroke='none'/> <use xlink:href='#black_stuff' stroke='#EEE' stroke-width='7'/> <use xlink:href='#black_stuff' stroke='#DDD' stroke-width='4'/> <use xlink:href='#black_stuff' stroke='#999' stroke-width='2'/> <use xlink:href='#black_stuff' stroke='black' stroke-width='1'/> <circle r='100' fill='url(#shadow2)' stroke='none'/></svg></span>">

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.