Loading Hourglass
How do I make an loading hourglass?
Hour and Glass. What is a loading hourglass? How do you make a loading hourglass? This script and codes were developed by Haeman on 29 August 2022, Monday.
Loading Hourglass - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loading Hourglass</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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! */ @import url(http://fonts.googleapis.com/css?family=Grand+Hotel);
@keyframes texts { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; }
}
@keyframes hglass { 0% { box-shadow: 0px 0px 0px #574D35 inset; } 25% { box-shadow: 0px 0px 0px #574D35 inset; } 50% { box-shadow: 0px -31px 0px #574D35 inset; } 51% { box-shadow: 0px -31px 0px #574D35 inset; } 75% { box-shadow: 0px -31px 0px #574D35 inset; } 100% { box-shadow: 0px 0px 0px #574D35 inset; }
}
@keyframes hglasstop { 0% { transform: scale(0.5) rotate(0deg); box-shadow: 0px 0px 0px #727142 inset; } 25% { transform: scale(0.5) rotate(180deg); box-shadow: 0px 0px 0px #727142 inset; } 50% { transform: scale(0.5) rotate(180deg); box-shadow: 0px 31px 0px #727142 inset; } 51% { box-shadow: 0px 31px 0px #727142 inset; } 75% { transform: scale(0.5) rotate(360deg); box-shadow: 0px 31px 0px #727142 inset; } 100% { box-shadow: 0px 0px 0px #727142 inset; }
}
body { background: #eae9ad;
}
h1 { color: #71714a; text-shadow: 0px -1px 0px #fff; font-size: 35pt; font-family: 'Grand Hotel', cursive; text-align: center; animation: texts 3s infinite linear;
}
.hourglass { transform: scale(0.5); -webkit-transform-origin-y: 30px; display: block; width: 40px; height: 30px; background: #574D35; border-radius: 0px 0px 50px 50px; margin: 40px auto 30px; position: relative; animation: hglasstop 8s infinite;
}
.hourglass .two { content: ''; display: block; width: 40px; height: 30px; background: #727142; border-radius: 50px 50px 0px 0px; position: absolute; top: 30px; animation: hglass 8s infinite;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='hourglass'> <div class='two'></div>
</div>
<h1> Loading
</h1> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Loading Hourglass - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Grand+Hotel);
@keyframes texts { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; }
}
@keyframes hglass { 0% { box-shadow: 0px 0px 0px #574D35 inset; } 25% { box-shadow: 0px 0px 0px #574D35 inset; } 50% { box-shadow: 0px -31px 0px #574D35 inset; } 51% { box-shadow: 0px -31px 0px #574D35 inset; } 75% { box-shadow: 0px -31px 0px #574D35 inset; } 100% { box-shadow: 0px 0px 0px #574D35 inset; }
}
@keyframes hglasstop { 0% { transform: scale(0.5) rotate(0deg); box-shadow: 0px 0px 0px #727142 inset; } 25% { transform: scale(0.5) rotate(180deg); box-shadow: 0px 0px 0px #727142 inset; } 50% { transform: scale(0.5) rotate(180deg); box-shadow: 0px 31px 0px #727142 inset; } 51% { box-shadow: 0px 31px 0px #727142 inset; } 75% { transform: scale(0.5) rotate(360deg); box-shadow: 0px 31px 0px #727142 inset; } 100% { box-shadow: 0px 0px 0px #727142 inset; }
}
body { background: #eae9ad;
}
h1 { color: #71714a; text-shadow: 0px -1px 0px #fff; font-size: 35pt; font-family: 'Grand Hotel', cursive; text-align: center; animation: texts 3s infinite linear;
}
.hourglass { transform: scale(0.5); -webkit-transform-origin-y: 30px; display: block; width: 40px; height: 30px; background: #574D35; border-radius: 0px 0px 50px 50px; margin: 40px auto 30px; position: relative; animation: hglasstop 8s infinite;
}
.hourglass .two { content: ''; display: block; width: 40px; height: 30px; background: #727142; border-radius: 50px 50px 0px 0px; position: absolute; top: 30px; animation: hglass 8s infinite;
}
Loading Hourglass - Script Codes JS Codes
//HourGlass
Developer | Haeman |
Username | pedox |
Uploaded | August 29, 2022 |
Rating | 3.5 |
Size | 3,505 Kb |
Views | 91,080 |
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 |
Terminal | 3,250 Kb |
Switch Button Single element | 2,741 Kb |
Thomas Bangalter Daft Punk helmet | 5,729 Kb |
Windows 8 metro UI | 4,213 Kb |
Keroppi | 3,522 Kb |
Ticketbox | 2,786 Kb |
Commuter Line Tokyu 8500 | 7,031 Kb |
The Rainbow | 3,309 Kb |
Handbook CSS3 | 3,032 Kb |
The Yosemite | 3,964 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 |
Project MMetro beta | Atomicsong | 5,157 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
SVG Scalable Text | Said_FD | 1,451 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
Border image | JohnRiordan | 2,120 Kb |
Flat UI - Checkbox FIX | ARS | 2,663 Kb |
A Different Type of Gallery | DonPage | 2,950 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!