Customer CSS Pre-Loader - css

Question

So, I have this CSS pre-loader working. However, I'm having some difficulty adding this to my site. Could someone help me to understand the implementation of the code to allow for the pre-loader to be the first item viewed until the site is loaded. At which point the pre-loader will fade out. The code for the the pre-loader is as follows :
<div class = "container">
<div id="css-preloader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
/* CSS */
#.container {
width: 100%;
}
#css-preloader{
position:relative;
width: 100%;
margin: 10% 0 0 45%;
}
#css-preloader span{
display: block;
bottom: 0px;
width: 5px;
height: 10px;
background: #e43632;
position: absolute;
animation: preloader_1 2.25s infinite ease-in-out;
}
#css-preloader span:nth-child(2){
left: 11px;
animation-delay: .2s;
}
#css-preloader span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#css-preloader span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#css-preloader span:nth-child(5){
left:44px;
animation-delay: .8s;
}
#css-preloader span:nth-child(6){
left: 55px;
animation-delay: 1s;
}
#css-preloader span:nth-child(7){
left: 66px;
animation-delay: 1.2s;
}
#css-preloader span:nth-child(8){
left: 77px;
animation-delay: 1.4s;
}
### #css-preloader span:nth-child(9){
left: 88px;
animation-delay: 1.6s;
}
#keyframes preloader_1 {
###0% {
height: 10px;
transform: translateY(0px);
background: #fdcf01;
}
25% {
height: 60px;
transform: translateY(15px);
background: #4bb846;
}
50% {
height: 10px;
transform: translateY(-10px);
background:#2988dd;
}
100% {
height: 10px;
transform: translateY(0px);
background: #e43632;
}
}

Answer 1

Please do not us IDs for the styling purposes https://github.com/CSSLint/csslint/wiki/Disallow-IDs-in-selectors
Do not name your CSS classes .css-preloader try to be more general. Something that is defined in CSS must be CSS so no need for the prefix.
Good pointers #osmanraifgunes but we are living in 2016 so no need jQuery for this simple task. Simple usage of window.onload combined with document.querySelector will do the trick. Also $(document).ready is fired once DOM is fully loaded not all the resources on the page. For that we need to use window.onload in plain JS or $(window).load in jQuery...
Instead of using jQuery hide(), you can just add CSS class .hidden to the preloader once the content is fully loaded... This approach provides you with a possibilities of using CSS3 animations.
I modified your code a bit and added the JS logic, here is the demo:
window.onload = function() {
addCls('.preloader', 'hidden');
}
function addCls(selector, cls) {
var element = document.querySelector(selector);
element.classList.add(cls);
}
.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
}
.holder {
position: absolute;
top: 50%;
left: 50%;
width: 93px;
height: 10px;
margin: -5px 0px 0px -46px;
}
.preloader {
position: fixed;
background-color: #ffffff;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
transition: all 1.5s ease;
}
.preloader.hidden {
top: -150%;
opacity: 0;
}
.preloader span {
display: block;
width: 5px;
height: 10px;
background: #e43632;
position: absolute;
animation: preloader-animation 2.25s infinite ease-in-out;
}
.preloader span:nth-child(2) {
left: 11px;
animation-delay: .2s;
}
.preloader span:nth-child(3) {
left: 22px;
animation-delay: .4s;
}
.preloader span:nth-child(4) {
left: 33px;
animation-delay: .6s;
}
.preloader span:nth-child(5) {
left: 44px;
animation-delay: .8s;
}
.preloader span:nth-child(6) {
left: 55px;
animation-delay: 1s;
}
.preloader span:nth-child(7) {
left: 66px;
animation-delay: 1.2s;
}
.preloader span:nth-child(8) {
left: 77px;
animation-delay: 1.4s;
}
.preloader span:nth-child(9) {
left: 88px;
animation-delay: 1.6s;
}
#keyframes preloader-animation {
0% {
height: 10px;
transform: translateY(0px);
background: #fdcf01;
}
25% {
height: 60px;
transform: translateY(15px);
background: #4bb846;
}
50% {
height: 10px;
transform: translateY(-10px);
background: #2988dd;
}
100% {
height: 10px;
transform: translateY(0px);
background: #e43632;
}
}
<div class="container">
<img src="https://static.pexels.com/photos/64609/pexels-photo-64609.jpeg" />
<img src="https://static.pexels.com/photos/8139/pexels-photo.jpg" />
<img src="https://static.pexels.com/photos/10979/pexels-photo-10979.jpeg" />
<img src="https://static.pexels.com/photos/24326/pexels-photo-24326.jpg" />
<div class="preloader">
<div class="holder">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>

Answer 2

Set z-index of your loader 99 (should be biggest z-indexed element inside page).
z-index:99;
Then
$(document).ready(function(){
$('.classOfTheLoader').hide();
});
Note that jquery is needed.