Change Loading Icon

Hi,

How to change the loading icon (the clock spinning) when the site loads?

I would like to add my logo instead.

Thanks

Could You please post an url to your site?
Could You make a screenshot of this logo, perhaps my internet connection is quite fast, but I don't see any spinner anywhere on creative template.

Hi

Thanks for your reply

Link : http://www.stereoscape.com

The first thing you see is an icon (see image attached). I want to replace this with my logo.

Its creativity ton creative - wrong forum

This animation is not an image, it uses css animations declared in:

Code: Select all

.gkIsWrapper-gk_creativity.notloaded .gkIsLoader {
   -webkit-animation-name: gkistimer;
   -webkit-animation-duration: 0.75s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
      -moz-animation-name: gkistimer;
      -moz-animation-duration: 0.75s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;
           animation-name: gkistimer;
           animation-duration: 0.75s;
           animation-iteration-count: infinite;
           animation-timing-function: linear;
   border: 2px solid #fff;
   -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
           border-radius: 50%;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
   content: "";
   display: block;
   height: 32px;
   left: 48%;
   position: relative;
   top: 48%;
   width: 32px;
}

.gkIsWrapper-gk_creativity.notloaded .gkIsLoader:before {
   background: #fff;
   -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
           border-radius: 2px;
   content: "";
   display: block;
   height: 2px;
   left: 48%;
   position: relative;
   top: 48%;
   -webkit-transform-origin: 0 50%;
      -moz-transform-origin: 0 50%;
           transform-origin: 0 50%;
   width: 10px;
}

.gkLoadMore:hover .gkLoader {
   border-color: #fff;
}

.gkLoadMore:hover .gkLoader:before {
   background: #fff;
}

@-webkit-keyframes gkistimer {
   from { -webkit-transform: scale(1.0) rotateZ(0deg); }
   50% { -webkit-transform: scale(1.2) rotateZ(180deg); }
   to { -webkit-transform: scale(1.0) rotateZ(360deg); }
}

@-moz-keyframes gkistimer {
   from { -moz-transform: scale(1.0) rotateZ(0deg); }
   50% { -moz-transform: scale(1.2) rotateZ(180deg); }
   to { -moz-transform: scale(1.0) rotateZ(360deg); }
}

@keyframes gkistimer {
   from { transform: scale(1.0) rotateZ(0deg); }
   50% { transform: scale(1.2) rotateZ(180deg); }
   to { transform: scale(1.0) rotateZ(360deg); }
}


You would need to clear those animations in override.css and replace it with element with background image.

Ooopsss... sorry

Now, I've added the following line to override.css but no success :

Code: Select all

.gkIsWrapper-gk_creativity.notloaded .gkIsLoader {background-image: url("http://www.stereoscape.com/images/logo.png") !important;}

Any ideas?

Thanks

As I have said - You need to clear (set as default) all css declarations and animations. Putting image background is simply not enough.

Hi,

Not sure what you mean by set as default.

That's what I've added now in override.css and still doesn't work.

Code: Select all

 .gkIsWrapper-gk_creativity.notloaded .gkIsLoader {background-image: url("http://www.stereoscape.com/images/logo.png") !important;
   -webkit-animation-name: none !important;
   -webkit-animation-duration: none !important;
   -webkit-animation-iteration-count: none !important;
   -webkit-animation-timing-function: none !important;
      -moz-animation-name: none !important;
      -moz-animation-duration: none !important;
      -moz-animation-iteration-count: none !important;
      -moz-animation-timing-function: none !important;
           animation-name: none !important;
           animation-duration: none !important;}

You have worked with only 1 style, while I have pasted much more.
Try this code and work with it as a starting point:

Code: Select all

.gkIsWrapper-gk_creativity.notloaded .gkIsLoader {
    -webkit-animation-name: none;
    -moz-animation-name: none;
    animation-name: none;
    border: none;
    content: "";
    display: block;
}

.gkIsWrapper-gk_creativity.notloaded .gkIsLoader:before {
    display: none;
}

.gkLoadMore:hover .gkLoader {
    border-color: transparent;
}

.gkLoadMore:hover .gkLoader:before {
    background: transparent;
}




Hi

Thanks again for your reply.

Copied your code - animation stopped but icon still visible and logo won't load...

That's my code now :

Code: Select all

.gkIsWrapper-gk_creativity.notloaded .gkIsLoader {
   background-image: url("http://www.stereoscape.com/images/logo.png") !important;
    -webkit-animation-name: none;
    -moz-animation-name: none;
    animation-name: none;
    border: none;
    content: "";
    display: block;
}

.gkIsWrapper-gk_creativity.notloaded .gkIsLoader:before {
    display: none;
}

.gkLoadMore:hover .gkLoader {
    border-color: transparent;
}

.gkLoadMore:hover .gkLoader:before {
    background: transparent;
}

Try this change:

Code: Select all

.gk-intro .gkIsWrapper-gk_creativity.notloaded .gkIsLoader {
   background-image: url("http://www.stereoscape.com/images/logo.png") !important;
    -webkit-animation-name: none;
    -moz-animation-name: none;
    animation-name: none;
    border: none;
    content: "";
    display: block;
}

.gk-intro .gkIsWrapper-gk_creativity.notloaded .gkIsLoader:before {
    display: none;
}

.gk-intro .gkLoadMore:hover .gkLoader {
    border-color: transparent;
}

.gk-intro .gkLoadMore:hover .gkLoader:before {
    background: transparent;
}


OK now icon is gone but logo still doesn't load

Code: Select all

.gk-intro .gkIsWrapper-gk_creativity.notloaded .gkIsLoader {
    background-image: url("http://www.stereoscape.com/images/logo.png") ;
    -webkit-animation-name: none;
    -moz-animation-name: none;
    animation-name: none;
    border: none;
    content: "";
    display: block;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    left: 46%;
    height: 41px;
    width: 350px;
}

.gk-intro .gkIsWrapper-gk_creativity.notloaded .gkIsLoader:before {
    display: none;
}

.gk-intro .gkLoadMore:hover .gkLoader {
    border-color: transparent;
}

.gk-intro .gkLoadMore:hover .gkLoader:before {
    background: transparent;
}


What is important - You need to eclare element width and height, its position in % from left edge.
Ps - putting transparent image with blue letters on it on blue background makes it impossible to see :/.

Hi

Thanks - works now.

Changed the background to white so logo now makes sense

Yeah, now it should look perfect .