Liquid Loading

Developer
Tim Pietrusky
Size
3,135 Kb
Views
64,768
  1. Liquid Loading Previews
  2. Liquid Loading HTML Codes
  3. Liquid Loading CSS Codes
  4. Liquid Loading JS Codes

How do I make an liquid loading?

A simple loading animation.And this is her brother, the Ultra Liquid Loading animation.. What is a liquid loading? How do you make a liquid loading? This script and codes were developed by Tim Pietrusky on 20 June 2022, Monday.

Liquid Loading Previews
IQ Test

Liquid Loading - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Liquid Loading</title> <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! */ body { background: url(http://s.cdpn.io/1202/tweed.png);
}
.loading { position: absolute; left: 50%; top: 50%; width: 8em; height: 8em; margin: -4em 0 0 -4em; overflow: hidden; background: rgba(0, 0, 0, 0.35);
}
.loading > div { position: absolute; width: 8em; height: 8em; animation: alpha 2.25s linear infinite forwards; background: rgba(231, 76, 60, 0.75);
}
.loading > div:nth-child(1) { top: -50%; left: -50%;
}
.loading > div:nth-child(2) { top: -50%; right: -50%;
}
.loading > div:nth-child(3) { bottom: -50%; right: -50%;
}
.loading > div:nth-child(4) { bottom: -50%; left: -50%;
}
@keyframes alpha { 0% { -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); background: rgba(231, 76, 60, 0.75); } 25% { background: rgba(230, 126, 34, 0.75); } 50% { border-radius: 50%; background: rgba(142, 68, 173, 0.75); } 75% { background: rgba(41, 128, 185, 0.75); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); background: rgba(231, 76, 60, 0.75); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="loading"> <div></div> <div></div> <div></div> <div></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Liquid Loading - Script Codes CSS Codes

body { background: url(http://s.cdpn.io/1202/tweed.png);
}
.loading { position: absolute; left: 50%; top: 50%; width: 8em; height: 8em; margin: -4em 0 0 -4em; overflow: hidden; background: rgba(0, 0, 0, 0.35);
}
.loading > div { position: absolute; width: 8em; height: 8em; animation: alpha 2.25s linear infinite forwards; background: rgba(231, 76, 60, 0.75);
}
.loading > div:nth-child(1) { top: -50%; left: -50%;
}
.loading > div:nth-child(2) { top: -50%; right: -50%;
}
.loading > div:nth-child(3) { bottom: -50%; right: -50%;
}
.loading > div:nth-child(4) { bottom: -50%; left: -50%;
}
@keyframes alpha { 0% { -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); background: rgba(231, 76, 60, 0.75); } 25% { background: rgba(230, 126, 34, 0.75); } 50% { border-radius: 50%; background: rgba(142, 68, 173, 0.75); } 75% { background: rgba(41, 128, 185, 0.75); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); background: rgba(231, 76, 60, 0.75); }
}

Liquid Loading - Script Codes JS Codes

/* * Liquid Loading * * A simple loading animation. * * And this is her brother, the Ultra Liquid Loading animation. * http://codepen.io/TimPietrusky/pen/HuvDg * * * 2013 by Tim Pietrusky * timpietrusky.com */
Liquid Loading - Script Codes
Liquid Loading - Script Codes
Home Page Home
Developer Tim Pietrusky
Username TimPietrusky
Uploaded June 20, 2022
Rating 4.5
Size 3,135 Kb
Views 64,768
Do you need developer help for Liquid Loading?

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!

Tim Pietrusky (TimPietrusky) Script Codes
Name
Playlist UI for Rodeo 004
Full Horizontal
Pinky - 1 of 111001100110110111
Select
Colorful stripes
Icon Fonts - SocialCount meets Style
Custom Dropdown
Monster Energy SVG logo animated
Advanced Checkbox Hack
Blurry Sweetness
Create amazing SEO content with AI!

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!