• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 74
  • Last Modified:

Change Site Loader or PreLoader Icon in Bootstrap/CSS HTML Question

I'm using an HTML template and it's got a cool Pre-loader (the image that comes up briefly while the page loads). However, I'd like to swap that out for a gif image. What can I add to the existing code to achieve this?

#load {  
  z-index: 9999;
  background-color: #000000;
  opacity: 0.75;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  margin: -5px auto 0 auto;
  left: 0;
  right: 0;
  border-radius: 0px;
  border: 5px solid #FF4136;
  box-shadow: 10px 0px #000000, 10px 0px #000000;    
  animation: shadowSpin 1s ease-in-out infinite;
}

Open in new window


Thanks for your help
0
Tessando
Asked:
Tessando
  • 2
1 Solution
 
zc2Commented:
I guess, somewhere on the HTML page you have HTML elements, like
	<div id="preloader">
	    <div id="load"></div>
	</div>

Open in new window

What if you just replace it with
	<div id="preloader">
	  <img id="load-gif" src="URL to the GIF"/>
	</div>

Open in new window

and then add the following CSS:
#load-gif {  
  z-index: 9999;
  position: absolute;
  top: 50%;
  left: 50%;
}

Open in new window

0
 
TessandoIT AdministratorAuthor Commented:
That worked perfectly! Thank you for the advice, my friend. Nice job.
0
 
zc2Commented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now