Page load thingy
How do I make an page load thingy?
Funky little page load animation. CSS only.. What is a page load thingy? How do you make a page load thingy? This script and codes were developed by Teo Dragovic on 05 January 2023, Thursday.
Page load thingy - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Page load thingy</title> <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! */ html { height: 100%;
}
body { background-color: #ddd; font-size: 100%; color: #333; font-family: Verdana; line-height: 1.45; position: relative; height: 100%;
}
body:before, body:after { content: ""; position: absolute; left: 0; width: 100%; background-color: #fff; animation-duration: 3s; animation-name: fadein; animation-timing-function: ease-in;
}
body:before { top: 0;
}
body:after { bottom: 0;
}
header { font-size: 2em; text-align: center; background-color: #888; color: #ddd; padding: .5em;
}
main { padding: 2em 20%; text-align: justify;
}
footer { background-color: #888; height: 4em; position: fixed; bottom: 0; left: 0; width: 100%;
}
@keyframes fadein { 0% { height: 50%; } 40% { height: 50%; } 100% { height: 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header>Look, a page loaded!</header>
<main>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero itaque atque inventore voluptatibus illum ipsa provident modi non voluptate magni nisi numquam eum fugiat suscipit impedit vel error nostrum similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi qui sed doloremque impedit iste magni nihil soluta eligendi reiciendis deserunt tempore fugit praesentium nobis sapiente velit odio ex laudantium nulla repellendus earum. Id dolorum sint error dignissimos aperiam dolor tenetur iusto neque deleniti dolorem. Blanditiis error animi veniam sed harum.</main>
<footer></footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Page load thingy - Script Codes CSS Codes
html { height: 100%;
}
body { background-color: #ddd; font-size: 100%; color: #333; font-family: Verdana; line-height: 1.45; position: relative; height: 100%;
}
body:before, body:after { content: ""; position: absolute; left: 0; width: 100%; background-color: #fff; animation-duration: 3s; animation-name: fadein; animation-timing-function: ease-in;
}
body:before { top: 0;
}
body:after { bottom: 0;
}
header { font-size: 2em; text-align: center; background-color: #888; color: #ddd; padding: .5em;
}
main { padding: 2em 20%; text-align: justify;
}
footer { background-color: #888; height: 4em; position: fixed; bottom: 0; left: 0; width: 100%;
}
@keyframes fadein { 0% { height: 50%; } 40% { height: 50%; } 100% { height: 0; }
}
Page load thingy - Script Codes JS Codes
// Look ma, no JS!
Developer | Teo Dragovic |
Username | teodragovic |
Uploaded | January 05, 2023 |
Rating | 3 |
Size | 3,146 Kb |
Views | 6,072 |
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!
Name | Size |
Perfect font size | 2,807 Kb |
Sticky sidebar thingy | 3,068 Kb |
Mobile navigation thingy | 4,294 Kb |
Fade text | 4,185 Kb |
Cube thingy, now fully functional | 3,833 Kb |
Client logo done in css | 2,273 Kb |
Galaxy sky thingy | 5,556 Kb |
Annoying label thingy | 4,659 Kb |
Knob thingy | 6,696 Kb |
3D letter thingy | 3,589 Kb |
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!
Name | Username | Size |
Css color for svg | Ademilter | 2,392 Kb |
Responsive slide | Thorien | 2,400 Kb |
Website Concept | Sagoza | 3,104 Kb |
AngularJS Skills | Supro | 3,312 Kb |
Loading animation with css | Icebob | 2,947 Kb |
Simple, flat contact form | Zeaklous | 2,719 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
Horizontal slider on scroll | Alojzije | 2,672 Kb |
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!