Background image

[weareREASON]

I love this preloader, but I have added a background image and of course the image doesn't display on initial page load. Is there anyway around this? I would like to load the top navigation and the pace loader with the background image first before the pace loader starts?

[akanshgulati]

You want the pace loader with background image before pace loader starts? Please explain properly. If you are looking for just a background image while running, you can add a background-image attribute in the css property of pace-running class. This will remove background as soon as loading completes.

[coldpumpkin]

For some reason I'm not getting it. How are we supposed to add a background image or color while the loader is running? Same as hiding the page content.

[muhammedjenos]

you can use this CSS to add a fill color with a pseudo element after body which overlays a box over the body filling the window underneath the pace component with a color of your choice.

.pace-running::after{ content:''; position: absolute; left: 0; right: 0; height: 100%; background-color: #fff; display: block; top: 0; z-index: 1999; }

[nicolalopatriello]

you can use this CSS to add a fill color with a pseudo element after body which overlays a box over the body filling the window underneath the pace component with a color of your choice.

.pace-running::after{ content:''; position: absolute; left: 0; right: 0; height: 100%; background-color: #fff; display: block; top: 0; z-index: 1999; }

It's possibile to add a fade effect after this and display the content of page?

Thanks

[zackbloom]

Yep, just add a transition to the CSS. Something like this:

html::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: #fff;
  display: block;
  z-index: 1999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
}

html.pace-running::after {
  opacity: 1;
}

A fill is also already an option to the Eager app.

[mbsankar84]

I want to replace an image with this progress bar. how can I, Is there any option provided or css classes can handle?