Loading Animation for Anything
How do I make an loading animation for anything?
Adds a loading graphic on top of your element and locks element from being used. What is a loading animation for anything? How do you make a loading animation for anything? This script and codes were developed by ThatGuySam on 06 August 2022, Saturday.
Loading Animation for Anything - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loading Animation for Anything</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="loading"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Loading Animation for Anything - Script Codes CSS Codes
body { background-color: #323232;
}
.loading > * { opacity: 0.1; pointer-events: none;
}
.loading:before { content: " "; height: 36px;
/* width needs to be double the height */ width: 72px; border: 10px solid #fff; border-bottom: 0; border-radius: 100px 100px 0 0; margin: auto; -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; -o-transform-origin: bottom center; transform-origin: bottom center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; -webkit-animation: spin 1s infinite linear; -moz-animation: spin 1s infinite linear; -o-animation: spin 1s infinite linear; animation: spin 1s infinite linear;
}
![Loading Animation for Anything - Script Codes](http://shots.codepen.io/ThatGuySam/pen/gcDEt-512.jpg)
Developer | ThatGuySam |
Username | ThatGuySam |
Uploaded | August 06, 2022 |
Rating | 3 |
Size | 1,866 Kb |
Views | 50,600 |
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 |
Guts Less Mixins | 3,248 Kb |
Instagram Follow Button | 2,214 Kb |
Vimeo Feed | 10,169 Kb |
Quote Like an Artist | 7,173 Kb |
Real Time Guts Tweets | 4,842 Kb |
Google Cardboard Apps | 6,767 Kb |
Awesome CSS3 Button | 2,961 Kb |
Quiet Email Subscribe Button | 4,001 Kb |
Hit The Floor Text Effect | 1,773 Kb |
ARC Kinetic 1.1 | 2,814 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 |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
Price | Catcode | 2,623 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
SVG Hover Animations | Kjbrum | 10,557 Kb |
Simple personal profile | Miroot | 2,856 Kb |
Feedback Page | TessDiNapoli | 2,836 Kb |
Price Comparison Table | Orrinward | 3,459 Kb |
Scroll to top button | DominicFrancois | 3,743 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
After America | Jonathangarner | 2,686 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!