Preloader

Developer
Rik Kendell
Size
2,815 Kb
Views
2,024
  1. Preloader Previews
  2. Preloader HTML Codes
  3. Preloader CSS Codes
  4. Preloader JS Codes

How do I make an preloader?

What is a preloader? How do you make a preloader? This script and codes were developed by Rik Kendell on 03 February 2023, Friday.

Preloader Previews
IQ Test

Preloader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Preloader</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Preloader -->
<div id="preloader"> <div id="status">&nbsp;</div>
</div>
<header id="main-header" class="container"> <div class="wrapper"> <h1>Pre-loader</h1> </div>
</header>
<div class="grid"> <div class="item"><img width="100%" src='https://placehold.it/500/500/' /></div> <div class="item"><img width="100%" src='https://placehold.it/500/500/' /></div> <div class="item"><img width="100%" src='https://placehold.it/500/500/' /></div> <div class="item"><img width="100%" src='https://placehold.it/500/500/' /></div> <div class="item"><img width="100%" src='https://placehold.it/500/500/' /></div> <div class="item"><img width="100%" src='https://placehold.it/500/500/' /></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Preloader - Script Codes CSS Codes

/* Generic bits */
body { overflow: hidden;
}
.cf:after, .grid:after { content: ""; display: table; clear: both;
}
.wrapper { max-width: 1200px;
}
.container { padding: 1em;
}
/* Page layout */
#main-header { background: #333; color: #fff;
}
#main-header h1 { margin: 0;
}
.grid .item { float: left; line-height: 0; width: 50%;
}
@media (min-width: 800px) { .grid .item { width: 33.33%; }
}
/* Pre-loader */
#preloader { background: #303030; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 10;
}
#status { background: #fff; width: 200px; height: 200px; position: absolute; left: 0; right: 0; /* centers the loading animation horizontally one the screen */ top: 50%; margin: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}

Preloader - Script Codes JS Codes

$(window).on('load', function() { // makes sure the whole site is loaded $('#status').fadeOut(); // will first fade out the loading animation $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website. $('body').delay(350).css({'overflow':'visible'});
})
Preloader - Script Codes
Preloader - Script Codes
Home Page Home
Developer Rik Kendell
Username Rikki_Sixx
Uploaded February 03, 2023
Rating 3
Size 2,815 Kb
Views 2,024
Do you need developer help for Preloader?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rik Kendell (Rikki_Sixx) Script Codes
Name
A Pen by Rik Kendell
Project X - Work in Progress
Animate element when it enters viewport
A Most Considerate Underline
Content-area transitions
SVG graph test
Button with click counter
Slip-scroll Demo
Button moves on hover
Skewed-block test
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!