Simple Preloader

Developer
B.
Size
3,265 Kb
Views
46,552
  1. Simple Preloader Previews
  2. Simple Preloader HTML Codes
  3. Simple Preloader CSS Codes
  4. Simple Preloader JS Codes

How do I make an simple preloader?

What is a simple preloader? How do you make a simple preloader? This script and codes were developed by B. on 21 December 2022, Wednesday.

Simple Preloader Previews
IQ Test

Simple Preloader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Preloader</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { padding: 1%; text-align: center;
}
.js body { overflow: hidden;
}
.preloader { background: #ebebeb; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ebebeb 0%, #ebebeb 33%, #c5a87e 33%, #c5a87e 66%, #1e242b 66%, #1e242b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ebebeb), color-stop(33%, #ebebeb), color-stop(33%, #c5a87e), color-stop(66%, #c5a87e), color-stop(66%, #1e242b), color-stop(100%, #1e242b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #ebebeb 0%, #ebebeb 33%, #c5a87e 33%, #c5a87e 66%, #1e242b 66%, #1e242b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #ebebeb 0%, #ebebeb 33%, #c5a87e 33%, #c5a87e 66%, #1e242b 66%, #1e242b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #ebebeb 0%, #ebebeb 33%, #c5a87e 33%, #c5a87e 66%, #1e242b 66%, #1e242b 100%); /* IE10+ */ background: linear-gradient(135deg, #ebebeb 0%, #ebebeb 33%, #c5a87e 33%, #c5a87e 66%, #1e242b 66%, #1e242b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#1e242b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="js-preloader" class="preloader"></div>
<img src="http://placehold.it/500x400">
<img src="http://placehold.it/500x400">
<img src="http://placehold.it/500x400">
<img src="http://placehold.it/500x400">
<img src="http://placehold.it/500x400">
<img src="http://placehold.it/500x400"> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Preloader - Script Codes CSS Codes

body { padding: 1%; text-align: center;
}
.js body { overflow: hidden;
}
.preloader { background: #ebebeb; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ebebeb 0%, #ebebeb 33%, #c5a87e 33%, #c5a87e 66%, #1e242b 66%, #1e242b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ebebeb), color-stop(33%, #ebebeb), color-stop(33%, #c5a87e), color-stop(66%, #c5a87e), color-stop(66%, #1e242b), color-stop(100%, #1e242b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #ebebeb 0%, #ebebeb 33%, #c5a87e 33%, #c5a87e 66%, #1e242b 66%, #1e242b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #ebebeb 0%, #ebebeb 33%, #c5a87e 33%, #c5a87e 66%, #1e242b 66%, #1e242b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #ebebeb 0%, #ebebeb 33%, #c5a87e 33%, #c5a87e 66%, #1e242b 66%, #1e242b 100%); /* IE10+ */ background: linear-gradient(135deg, #ebebeb 0%, #ebebeb 33%, #c5a87e 33%, #c5a87e 66%, #1e242b 66%, #1e242b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#1e242b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;
}

Simple Preloader - Script Codes JS Codes

$(window).load(function() { $('#js-preloader').delay(800).fadeOut('slow'); $('body').delay(800).css({'overflow':'visible'});
})
Simple Preloader - Script Codes
Simple Preloader - Script Codes
Home Page Home
Developer B.
Username wearebold
Uploaded December 21, 2022
Rating 3
Size 3,265 Kb
Views 46,552
Do you need developer help for Simple 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!

B. (wearebold) Script Codes
Name
Simple Push Menu
Particle Earth Map
Pure CSS3 Batman Logo
Simple Accordion
Pure CSS3 Robot with JS clocks
Slick Slider
Alerts
Center the Unknow
Plane, Goodbye
Simple CSS3 Button
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!