Loading Icon
How do I make an loading icon?
What is a loading icon? How do you make a loading icon? This script and codes were developed by John Heiner on 14 November 2022, Monday.
Loading Icon - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loading Icon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="box-wrapper"> <div class="card"> <div class="box"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Loading Icon - Script Codes CSS Codes
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body{ background: #262523;
}
.box-wrapper{ display: block; width:32px; height:32px; position:absolute; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px;
}
.box{ border: 2px solid #3e8eb8; width:32px; height:32px; position: absolute;
}
Loading Icon - Script Codes JS Codes
TweenLite.set(".box-wrapper", {perspective:75});
TweenLite.set(".card", {transformStyle:"preserve-3d",transformOrigin:"16px 16px"});
/*TweenMax.to(".box-wrapper", 2, {rotation:360,repeat:-1,ease: Linear.easeNone});*/
var tl = new TimelineMax({ repeat: -1
});
tl.to('.card', 0.85,{rotationY:-180,ease:Circ.easeOut})
.to('.card', 0.85, {rotationX: -180, ease:Circ.easeOut})
.to('.card', 0.85, {rotationY: 0, ease:Circ.easeOut})
.to('.card', 0.85, {rotationX: -360, ease:Circ.easeOut});
//tl.pause();
Developer | John Heiner |
Username | johnheiner |
Uploaded | November 14, 2022 |
Rating | 3 |
Size | 1,987 Kb |
Views | 10,120 |
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 |
Rounded Triangle | 2,124 Kb |
Social Icon System | 8,772 Kb |
Passport Flip Open with GSAP | 3,400 Kb |
Material Shadows | 2,961 Kb |
Some Button Styles | 5,713 Kb |
Image Hover | 3,409 Kb |
Unboxed Technology Footer Animation | 8,397 Kb |
Breaking Lists at specific points without floats. | 1,962 Kb |
Loading Animation | 2,364 Kb |
Easy Hamburger to X Icon animation | 2,736 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 |
Commuter Line Tokyu 8500 | Pedox | 7,031 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
Scroll Arrow | Robooneus | 4,437 Kb |
NeeilTimer | Neeilan | 2,836 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Table border-collapse property | Maxds | 1,672 Kb |
Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
Main page display | BarryKe | 4,562 Kb |
Box-sizing | Elad2412 | 1,572 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!