Small CSS Loading Animation

Developer
Izzy Skye
Size
2,229 Kb
Views
18,216
  1. Small CSS Loading Animation Previews
  2. Small CSS Loading Animation HTML Codes
  3. Small CSS Loading Animation CSS Codes

How do I make an small css loading animation?

Just a small pure css loading animation. What is a small css loading animation? How do you make a small css loading animation? This script and codes were developed by Izzy Skye on 27 October 2022, Thursday.

Small CSS Loading Animation Previews
IQ Test

Small CSS Loading Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Small CSS Loading Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="loading"> <span>L</span> <span class="animate">O</span> <span class="animate">A</span> <span class="animate">D</span> <span>I</span> <span>N</span> <span>G</span>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Small CSS Loading Animation - Script Codes CSS Codes

body { margin: 0; background-color: #1D1F20;
}
@keyframes spin { 0% { top: 0; } 50% { top: 100%; opacity: 0; } 51% { top: -100%; } 100% { top: 0; opacity: 1; }
}
@-webkit-keyframes spin { 0% { top: 0; } 50% { top: 100%; opacity: 0; } 51% { top: -100%; } 100% { top: 0; opacity: 1; }
}
.loading { position: fixed; width: 100%; top: calc(50% - 30px); text-align: center;
}
.loading span { color: #eee; font-size: 30px;
}
.loading .animate { position: absolute; top: 0;
}
.loading span:nth-child(2) { color: #0088cc; animation: spin 1.5s linear infinite; -webkit-animation: spin 1.5s linear infinite;
}
.loading span:nth-child(3) { margin-left: 25px; color: #e23069; animation: spin 1s linear infinite; -webkit-animation: spin 1s linear infinite;
}
.loading span:nth-child(4) { margin-left: 50px; color: #F0E300; animation: spin 1.25s linear infinite; -webkit-animation: spin 1.25s linear infinite;
}
.loading span:nth-child(5) { padding-left: 77px;
}
Small CSS Loading Animation - Script Codes
Small CSS Loading Animation - Script Codes
Home Page Home
Developer Izzy Skye
Username zephyr
Uploaded October 27, 2022
Rating 4
Size 2,229 Kb
Views 18,216
Do you need developer help for Small 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!

Izzy Skye (zephyr) Script Codes
Name
Pure CSS Inanimate Cube Field
Pure CSS Tab Navigation
Audio Player
Animated Chart Cards
Mobile Material Menu Style
JQuery Slider
Pure CSS Wordpress Fancyboxes
Pure CSS Loader
Aperture Science style loading
Vanilla JS Pattern Locker
Create amazing web 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!