CSS Page loader
How do I make an css page loader?
Simple page loading concept. What is a css page loader? How do you make a css page loader? This script and codes were developed by Alex Loomer on 30 September 2022, Friday.
CSS Page loader Previews
CSS Page loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Page loader</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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>
<div id="loader-page"> <div class="loader-container"> <div class="ex" id="x-right"></div> <div class="ex" id="x-left"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>CSS Page loader - Script Codes CSS Codes
#loader-page { width: 100%; height: 100vh; position: fixed; background: #264653; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.loader-container { width: 400px; height: 400px; margin: 0 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.ex { width: 1px; height: 30px; background: #fff;
}
#x-right { margin: 0 60px; -webkit-animation: right 4s cubic-bezier(0, 0, 0.06, 1) infinite; animation: right 4s cubic-bezier(0, 0, 0.06, 1) infinite; -webkit-transform-origin: center; transform-origin: center;
}
#x-left { margin: 0 60px; -webkit-animation: left 4s cubic-bezier(0, 0, 0.06, 1) infinite; animation: left 4s cubic-bezier(0, 0, 0.06, 1) infinite; -webkit-transform-origin: center; transform-origin: center;
}
@-webkit-keyframes right { 0% { margin: 0 60px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 10% { margin: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 20% { margin: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 30% { margin: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } 40% { margin: 0; -webkit-transform: rotate(405deg); transform: rotate(405deg); } 50% { margin: 0; -webkit-transform: rotate(405deg); transform: rotate(405deg); } 60% { margin: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 70% { margin: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 80% { margin: 0 60px; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 90% { margin: 0 60px; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { margin: 0 60px; -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes right { 0% { margin: 0 60px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 10% { margin: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 20% { margin: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 30% { margin: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } 40% { margin: 0; -webkit-transform: rotate(405deg); transform: rotate(405deg); } 50% { margin: 0; -webkit-transform: rotate(405deg); transform: rotate(405deg); } 60% { margin: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 70% { margin: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 80% { margin: 0 60px; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 90% { margin: 0 60px; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { margin: 0 60px; -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes left { 0% { margin: 0 60px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 10% { margin: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 20% { margin: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 30% { margin: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 40% { margin: 0; -webkit-transform: rotate(315deg); transform: rotate(315deg); } 50% { margin: 0; -webkit-transform: rotate(315deg); transform: rotate(315deg); } 60% { margin: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 70% { margin: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 80% { margin: 0 60px; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 90% { margin: 0 60px; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { margin: 0 60px; -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes left { 0% { margin: 0 60px; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 10% { margin: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 20% { margin: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } 30% { margin: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 40% { margin: 0; -webkit-transform: rotate(315deg); transform: rotate(315deg); } 50% { margin: 0; -webkit-transform: rotate(315deg); transform: rotate(315deg); } 60% { margin: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 70% { margin: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 80% { margin: 0 60px; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 90% { margin: 0 60px; -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { margin: 0 60px; -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}CSS Page loader - Script Codes JS Codes
// Wait for content to load, then fade out
// $(window).load(function() {
// $("#loader-page").fadeOut("slow");
// })
| Developer | Alex Loomer |
| Username | atloomer |
| Uploaded | September 30, 2022 |
| Rating | 3 |
| Size | 2,341 Kb |
| Views | 22,264 |
Do you need developer help for CSS Page loader?
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!
Alex Loomer (atloomer) Script Codes
| Name | Size |
| Background Change on Link Hover | 3,067 Kb |
| Personal Site | 8,436 Kb |
| Responsive Navigation With Flexbox | 2,781 Kb |
| Animate.css | 1,745 Kb |
| Greensock VCD Day Animation | 6,859 Kb |
| CSS Lightbulb | 2,736 Kb |
| Simple CSS Animated Skill Bars | 2,166 Kb |
| Sierra Loomer Photo Home Page Mock | 2,958 Kb |
| Fluid Layout with float | 1,774 Kb |
| Scroll Up Indicator | 1,539 Kb |
Create amazing art & images 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!
Similar Scripts & Codes
| Name | Username | Size |
| Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
| Canvas Background Effect | Sonick | 3,513 Kb |
| JQuery Validate checkbox group | Lunaman | 2,466 Kb |
| Tooltip in table | Roine | 3,713 Kb |
| Wikipedia Viewer | Odylic | 2,333 Kb |
| Wip elementary os navbar | Nickcolley | 2,993 Kb |
| Background-blend-mode Test | 0x04 | 4,744 Kb |
| Local Weather App - FreeCodeCamp | TrevorWelch | 4,134 Kb |
| Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
| Random Gradients - JS | Aldlevine | 2,026 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!