Loading animation - freedom purchase
How do I make an loading animation - freedom purchase?
Loading animation with lots of metaphors and meaning.. What is a loading animation - freedom purchase? How do you make a loading animation - freedom purchase? This script and codes were developed by Ross B on 24 November 2022, Thursday.
Loading animation - freedom purchase - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loading animation - freedom purchase</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="center"> <div class="box x"></div> <div class="rotate"> <div class="box y"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
Loading animation - freedom purchase - Script Codes CSS Codes
html,
body { margin: 0; padding: 0; height: 100%;
}
.center { width: 400px; height: 100px; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0;
}
.box { position: absolute; width: 100px; height: 100px; background-color: #90ee90; border-radius: 5px;
}
.x { -webkit-animation: slideleft 1.6s cubic-bezier(0.76, -0.6, 0.455, 1.28) infinite; animation: slideleft 1.6s cubic-bezier(0.76, -0.6, 0.455, 1.28) infinite; left: 150px;
}
.rotate { width: 100px; height: 100px; -webkit-transform: translate(150px) rotateZ(180deg); transform: translate(150px) rotateZ(180deg); position: absolute; left: 0;
}
.y { -webkit-animation: slideleft 1.6s cubic-bezier(0.76, -0.6, 0.455, 1.28) infinite; animation: slideleft 1.6s cubic-bezier(0.76, -0.6, 0.455, 1.28) infinite;
}
@-webkit-keyframes slideleft { 0% { -webkit-transform: translate(150px, 0); transform: translate(150px, 0); } 50% { height: 30px; border-radius: 20px; -webkit-transform: translate(0, 35px); transform: translate(0, 35px); background-color: #ff7f50; } 100% { height: 100px; -webkit-transform-origin: 125% 50%; transform-origin: 125% 50%; -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); }
}
@keyframes slideleft { 0% { -webkit-transform: translate(150px, 0); transform: translate(150px, 0); } 50% { height: 30px; border-radius: 20px; -webkit-transform: translate(0, 35px); transform: translate(0, 35px); background-color: #ff7f50; } 100% { height: 100px; -webkit-transform-origin: 125% 50%; transform-origin: 125% 50%; -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); }
}
Loading animation - freedom purchase - Script Codes JS Codes
(function() {
}).call(this);
Developer | Ross B |
Username | rocbear |
Uploaded | November 24, 2022 |
Rating | 3.5 |
Size | 2,567 Kb |
Views | 16,192 |
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 |
Hovergram | 2,505 Kb |
Spear checkboxes | 3,682 Kb |
A Pen by Ross B | 3,715 Kb |
Unfolding circular menu | 7,466 Kb |
Playful inner-page navigation | 4,689 Kb |
Wobbly list | 5,672 Kb |
Responsive grid based FLIP.js demo | 3,883 Kb |
Full page scroll-over with ScrollMagic | 2,752 Kb |
Spin button | 3,935 Kb |
UFO | 2,608 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 |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
A Different Type of Gallery | DonPage | 2,950 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Popup Modal | Aldlevine | 3,696 Kb |
Responsive Boxes without Images | Andymcfee | 4,120 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
Parallax.js | Zmeeey5 | 2,330 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 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!