CSS Loading Animation

Developer
John Urbank
Size
3,495 Kb
Views
62,744
  1. CSS Loading Animation Previews
  2. CSS Loading Animation HTML Codes
  3. CSS Loading Animation CSS Codes

How do I make an css loading animation?

Also check out - http://codepen.io/Vestride/pen/vHzyk. What is a css loading animation? How do you make a css loading animation? This script and codes were developed by John Urbank on 08 July 2022, Friday.

CSS Loading Animation Previews
IQ Test

CSS Loading Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Loading Animation</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ html { height: 100%;
}
body { background: #111; position: relative; width: 6em; height: 100%; margin: 0 auto;
}
.loading { width: 6em; height: 5em; position: absolute; text-align: center; top: 40%;
}
.point { width: 0.6em; height: 0.6em; border-radius: 50%; margin: 0 0.35em 0.6em; display: inline-block;
}
.point:nth-child(1) { animation: color 1100ms infinite ease-in-out;
}
.row:nth-child(1) { animation: opacity 1100ms infinite ease-in-out;
}
.point:nth-child(2) { animation: color 1200ms infinite ease-in-out;
}
.row:nth-child(2) { animation: opacity 1200ms infinite ease-in-out;
}
.point:nth-child(3) { animation: color 1300ms infinite ease-in-out;
}
.row:nth-child(3) { animation: opacity 1300ms infinite ease-in-out;
}
.point:nth-child(4) { animation: color 1400ms infinite ease-in-out;
}
.row:nth-child(4) { animation: opacity 1400ms infinite ease-in-out;
}
.point:nth-child(5) { animation: color 1500ms infinite ease-in-out;
}
.row:nth-child(5) { animation: opacity 1500ms infinite ease-in-out;
}
.point:nth-child(6) { animation: color 1600ms infinite ease-in-out;
}
.row:nth-child(6) { animation: opacity 1600ms infinite ease-in-out;
}
.point:nth-child(7) { animation: color 1700ms infinite ease-in-out;
}
.row:nth-child(7) { animation: opacity 1700ms infinite ease-in-out;
}
.point:nth-child(8) { animation: color 1800ms infinite ease-in-out;
}
.row:nth-child(8) { animation: opacity 1800ms infinite ease-in-out;
}
.point:nth-child(9) { animation: color 1900ms infinite ease-in-out;
}
.row:nth-child(9) { animation: opacity 1900ms infinite ease-in-out;
}
.point:nth-child(10) { animation: color 2000ms infinite ease-in-out;
}
.row:nth-child(10) { animation: opacity 2000ms infinite ease-in-out;
}
.point:nth-child(11) { animation: color 2100ms infinite ease-in-out;
}
.row:nth-child(11) { animation: opacity 2100ms infinite ease-in-out;
}
.point:nth-child(12) { animation: color 2200ms infinite ease-in-out;
}
.row:nth-child(12) { animation: opacity 2200ms infinite ease-in-out;
}
.point:nth-child(13) { animation: color 2300ms infinite ease-in-out;
}
.row:nth-child(13) { animation: opacity 2300ms infinite ease-in-out;
}
.point:nth-child(14) { animation: color 2400ms infinite ease-in-out;
}
.row:nth-child(14) { animation: opacity 2400ms infinite ease-in-out;
}
.point:nth-child(15) { animation: color 2500ms infinite ease-in-out;
}
.row:nth-child(15) { animation: opacity 2500ms infinite ease-in-out;
}
.point:nth-child(16) { animation: color 2600ms infinite ease-in-out;
}
.row:nth-child(16) { animation: opacity 2600ms infinite ease-in-out;
}
.point:nth-child(17) { animation: color 2700ms infinite ease-in-out;
}
.row:nth-child(17) { animation: opacity 2700ms infinite ease-in-out;
}
.point:nth-child(18) { animation: color 2800ms infinite ease-in-out;
}
.row:nth-child(18) { animation: opacity 2800ms infinite ease-in-out;
}
.point:nth-child(19) { animation: color 2900ms infinite ease-in-out;
}
.row:nth-child(19) { animation: opacity 2900ms infinite ease-in-out;
}
.point:nth-child(20) { animation: color 3000ms infinite ease-in-out;
}
.row:nth-child(20) { animation: opacity 3000ms infinite ease-in-out;
}
.point:nth-child(21) { animation: color 3100ms infinite ease-in-out;
}
.row:nth-child(21) { animation: opacity 3100ms infinite ease-in-out;
}
.point:nth-child(22) { animation: color 3200ms infinite ease-in-out;
}
.row:nth-child(22) { animation: opacity 3200ms infinite ease-in-out;
}
.point:nth-child(23) { animation: color 3300ms infinite ease-in-out;
}
.row:nth-child(23) { animation: opacity 3300ms infinite ease-in-out;
}
.point:nth-child(24) { animation: color 3400ms infinite ease-in-out;
}
.row:nth-child(24) { animation: opacity 3400ms infinite ease-in-out;
}
.point:nth-child(25) { animation: color 3500ms infinite ease-in-out;
}
.row:nth-child(25) { animation: opacity 3500ms infinite ease-in-out;
}
@keyframes opacity { from, to { opacity: 0; } 50% { opacity: 1; }
}
@keyframes color { from, to { background: #ca3737; -webkit-filter: blur(1px); } 50% { background: #4cd4ee; -webkit-filter: blur(2px); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='loading'> <div class='row'> <div class='point'></div> <div class='point'></div> <div class='point'></div> <div class='point'></div> </div> <div class='row'> <div class='point'></div> <div class='point'></div> <div class='point'></div> <div class='point'></div> </div> <div class='row'> <div class='point'></div> <div class='point'></div> <div class='point'></div> <div class='point'></div> </div> <div class='row'> <div class='point'></div> <div class='point'></div> <div class='point'></div> <div class='point'></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

CSS Loading Animation - Script Codes CSS Codes

html { height: 100%;
}
body { background: #111; position: relative; width: 6em; height: 100%; margin: 0 auto;
}
.loading { width: 6em; height: 5em; position: absolute; text-align: center; top: 40%;
}
.point { width: 0.6em; height: 0.6em; border-radius: 50%; margin: 0 0.35em 0.6em; display: inline-block;
}
.point:nth-child(1) { animation: color 1100ms infinite ease-in-out;
}
.row:nth-child(1) { animation: opacity 1100ms infinite ease-in-out;
}
.point:nth-child(2) { animation: color 1200ms infinite ease-in-out;
}
.row:nth-child(2) { animation: opacity 1200ms infinite ease-in-out;
}
.point:nth-child(3) { animation: color 1300ms infinite ease-in-out;
}
.row:nth-child(3) { animation: opacity 1300ms infinite ease-in-out;
}
.point:nth-child(4) { animation: color 1400ms infinite ease-in-out;
}
.row:nth-child(4) { animation: opacity 1400ms infinite ease-in-out;
}
.point:nth-child(5) { animation: color 1500ms infinite ease-in-out;
}
.row:nth-child(5) { animation: opacity 1500ms infinite ease-in-out;
}
.point:nth-child(6) { animation: color 1600ms infinite ease-in-out;
}
.row:nth-child(6) { animation: opacity 1600ms infinite ease-in-out;
}
.point:nth-child(7) { animation: color 1700ms infinite ease-in-out;
}
.row:nth-child(7) { animation: opacity 1700ms infinite ease-in-out;
}
.point:nth-child(8) { animation: color 1800ms infinite ease-in-out;
}
.row:nth-child(8) { animation: opacity 1800ms infinite ease-in-out;
}
.point:nth-child(9) { animation: color 1900ms infinite ease-in-out;
}
.row:nth-child(9) { animation: opacity 1900ms infinite ease-in-out;
}
.point:nth-child(10) { animation: color 2000ms infinite ease-in-out;
}
.row:nth-child(10) { animation: opacity 2000ms infinite ease-in-out;
}
.point:nth-child(11) { animation: color 2100ms infinite ease-in-out;
}
.row:nth-child(11) { animation: opacity 2100ms infinite ease-in-out;
}
.point:nth-child(12) { animation: color 2200ms infinite ease-in-out;
}
.row:nth-child(12) { animation: opacity 2200ms infinite ease-in-out;
}
.point:nth-child(13) { animation: color 2300ms infinite ease-in-out;
}
.row:nth-child(13) { animation: opacity 2300ms infinite ease-in-out;
}
.point:nth-child(14) { animation: color 2400ms infinite ease-in-out;
}
.row:nth-child(14) { animation: opacity 2400ms infinite ease-in-out;
}
.point:nth-child(15) { animation: color 2500ms infinite ease-in-out;
}
.row:nth-child(15) { animation: opacity 2500ms infinite ease-in-out;
}
.point:nth-child(16) { animation: color 2600ms infinite ease-in-out;
}
.row:nth-child(16) { animation: opacity 2600ms infinite ease-in-out;
}
.point:nth-child(17) { animation: color 2700ms infinite ease-in-out;
}
.row:nth-child(17) { animation: opacity 2700ms infinite ease-in-out;
}
.point:nth-child(18) { animation: color 2800ms infinite ease-in-out;
}
.row:nth-child(18) { animation: opacity 2800ms infinite ease-in-out;
}
.point:nth-child(19) { animation: color 2900ms infinite ease-in-out;
}
.row:nth-child(19) { animation: opacity 2900ms infinite ease-in-out;
}
.point:nth-child(20) { animation: color 3000ms infinite ease-in-out;
}
.row:nth-child(20) { animation: opacity 3000ms infinite ease-in-out;
}
.point:nth-child(21) { animation: color 3100ms infinite ease-in-out;
}
.row:nth-child(21) { animation: opacity 3100ms infinite ease-in-out;
}
.point:nth-child(22) { animation: color 3200ms infinite ease-in-out;
}
.row:nth-child(22) { animation: opacity 3200ms infinite ease-in-out;
}
.point:nth-child(23) { animation: color 3300ms infinite ease-in-out;
}
.row:nth-child(23) { animation: opacity 3300ms infinite ease-in-out;
}
.point:nth-child(24) { animation: color 3400ms infinite ease-in-out;
}
.row:nth-child(24) { animation: opacity 3400ms infinite ease-in-out;
}
.point:nth-child(25) { animation: color 3500ms infinite ease-in-out;
}
.row:nth-child(25) { animation: opacity 3500ms infinite ease-in-out;
}
@keyframes opacity { from, to { opacity: 0; } 50% { opacity: 1; }
}
@keyframes color { from, to { background: #ca3737; -webkit-filter: blur(1px); } 50% { background: #4cd4ee; -webkit-filter: blur(2px); }
}
CSS Loading Animation - Script Codes
CSS Loading Animation - Script Codes
Home Page Home
Developer John Urbank
Username jurbank
Uploaded July 08, 2022
Rating 4.5
Size 3,495 Kb
Views 62,744
Do you need developer help for CSS Loading Animation?

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!

John Urbank (jurbank) Script Codes
Name
CubeTronic
Gutterless Feature Grid
String permutation
Basic motion with JavaScript
Mouse Trailing
Navicon - responsive nav pattern
Time is Money
Simple, CSS only, responsive menu
Tape Cassette Icon - CSS Only
Hamburger subtract
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!