Custom Preloader

1 reply · opened Jan 15, 2019

Aasinan007Jan 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

">

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.

SSemicolon WebSTAFFJan 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:

">

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.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard