Liquid Loader
How do I make an liquid loader?
Quick and dirty - needs some tweaks to have maximal visual impact, but I have work work to do :(. What is a liquid loader? How do you make a liquid loader? This script and codes were developed by Teo Litto on 26 August 2022, Friday.
Liquid Loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Liquid Loader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg width="400" height="400" viewPort="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path id="bowl" fill-rule="evenodd" fill="rgb( 10, 10, 10 )" d="M194.115,136.050 C234.545,136.050 267.321,168.722 267.321,209.025 C267.321,249.328 234.545,282.000 194.115,282.000 C153.684,282.000 120.909,249.328 120.909,209.025 C120.909,168.722 153.684,136.050 194.115,136.050 Z"/> <path id="liquid" fill-rule="evenodd" clip-path="url(#clipPath)" fill="rgb( 255, 255, 255 )" d="M194.115,136.050 C234.545,136.050 267.321,168.722 267.321,209.025 C267.321,249.328 234.545,282.000 194.115,282.000 C153.684,282.000 120.909,249.328 120.909,209.025 C120.909,168.722 153.684,136.050 194.115,136.050 Z"/> <clipPath id="clipPath"> <path id="clippingPath" d="M802.000,464.000 C802.000,464.000 401.000,464.000 401.000,464.000 C401.000,464.000 400.000,464.000 400.000,464.000 C400.000,464.000 -1.000,464.000 -1.000,464.000 C-1.000,464.000 -2.498,292.434 -1.000,240.000 C103.869,240.000 120.123,189.000 200.000,189.000 C274.426,189.000 300.545,239.829 400.511,239.996 C504.916,239.829 521.255,189.000 601.000,189.000 C675.549,189.000 701.625,240.000 802.000,240.000 C799.004,240.000 802.000,464.000 802.000,464.000 Z"/> </clipPath>
</svg>
</body>
</html>
Liquid Loader - Script Codes CSS Codes
html, body { background: #000; }
svg { z-index: 999; position: relative;
}
#clipPath { -webkit-animation: waterClimb 9s linear 1; transform: translateY(-110px);
}
#clippingPath{ -webkit-animation: waterSlide 1.1s infinite linear;
}
@-webkit-keyframes waterSlide { 0% { transform: translateX(126px); } 100% { transform: translateX(-273px); }
}
@-webkit-keyframes waterClimb { 0% { transform: translateY(50px); } 100% { transform: translateY(-70px); }
} 
| Developer | Teo Litto |
| Username | teolitto |
| Uploaded | August 26, 2022 |
| Rating | 3 |
| Size | 2,009 Kb |
| Views | 36,432 |
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 |
| Color morphing | 3,764 Kb |
| Parallaxadise - Quick n dirty scrollytelling demo | 8,928 Kb |
| Depth First Search Connectivity Test | 3,775 Kb |
| Kitten Sniffer | 2,892 Kb |
| Powers Sniffer | 2,663 Kb |
| Konami Code Easter Egg | 3,051 Kb |
| Starfall | 3,863 Kb |
| WebGL Smoke | 3,126 Kb |
| Lock Picking in the DOM | 5,847 Kb |
| Dreamforce.com 2017 | 11,454 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 |
| Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
| BenU Maintenance Site | Ksherman | 4,893 Kb |
| Flat design iframe | Damienpm | 1,819 Kb |
| Parallax.js | Zmeeey5 | 2,330 Kb |
| IPhone5S SVG Space Grey | Onlinechris | 75,035 Kb |
| Lecture 1 | Law | 0 Kb |
| Pure CSS candle light animation by One element | Ksksoft | 2,193 Kb |
| Flexbox slider | Rendro | 3,459 Kb |
| Project Euler Problem 17 | Bfillmer | 2,739 Kb |
| A Pen by Moeid Saleem | Moeidsaleem | 1,862 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!