Loader Animation
How do I make an loader animation?
What is a loader animation? How do you make a loader animation? This script and codes were developed by Rıza Selçuk Saydam on 02 August 2022, Tuesday.
Loader Animation Previews
Loader Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loader Animation</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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: #27ae60; min-width: 800px; min-height: 600px;
}
div { position: absolute; width: 400px; height: 300px; top: 50%; left: 50%; margin: -150px 0 0 -200px; text-align: center;
}
span { display: inline-block; width: 10px; height: 10px; margin: 145px 3px 0; background: rgba(255,255,255,0.25); border-radius: 50%; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-animation: wave 2s infinite ease-in-out; -moz-animation: wave 2s infinite ease-in-out; -ms-animation: wave 2s infinite ease-in-out; -o-animation: wave 2s infinite ease-in-out; animation: wave 2s infinite ease-in-out;
}
span:nth-child(1) { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s;
}
span:nth-child(2) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -ms-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s;
}
span:nth-child(3) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -ms-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s;
}
span:nth-child(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -ms-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s;
}
span:nth-child(5) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -ms-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s;
}
/* Animation */
@keyframes "wave" { 0%,60%,100% { background: rgba(255,255,255,0.25); -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);
} 20% { background: rgba(255,255,255,0.75); -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 40% { background: rgba(255,255,255,0.75); -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
}
@-moz-keyframes wave { 0%,60%,100% { background: rgba(255,255,255,0.25); -moz-transform: translateY(0); transform: translateY(0);
} 20% { background: rgba(255,255,255,0.75); -moz-transform: translateY(20px); transform: translateY(20px); } 40% { background: rgba(255,255,255,0.75); -moz-transform: translateY(-20px); transform: translateY(-20px); }
}
@-webkit-keyframes "wave" { 0%,60%,100% { background: rgba(255,255,255,0.25); -webkit-transform: translateY(0); transform: translateY(0);
} 20% { background: rgba(255,255,255,0.75); -webkit-transform: translateY(20px); transform: translateY(20px); } 40% { background: rgba(255,255,255,0.75); -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@-ms-keyframes "wave" { 0%,60%,100% { background: rgba(255,255,255,0.25); -ms-transform: translateY(0); transform: translateY(0);
} 20% { background: rgba(255,255,255,0.75); -ms-transform: translateY(20px); transform: translateY(20px); } 40% { background: rgba(255,255,255,0.75); -ms-transform: translateY(-20px); transform: translateY(-20px); }
}
@-o-keyframes "wave" { 0%,60%,100% { background: rgba(255,255,255,0.25); -o-transform: translateY(0); transform: translateY(0);
} 20% { background: rgba(255,255,255,0.75); -o-transform: translateY(20px); transform: translateY(20px); } 40% { background: rgba(255,255,255,0.75); -o-transform: translateY(-20px); transform: translateY(-20px); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div> <span></span> <span></span> <span></span> <span></span> <span></span>
</div> <script src='http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script>
</body>
</html>
Loader Animation - Script Codes CSS Codes
body { background: #27ae60; min-width: 800px; min-height: 600px;
}
div { position: absolute; width: 400px; height: 300px; top: 50%; left: 50%; margin: -150px 0 0 -200px; text-align: center;
}
span { display: inline-block; width: 10px; height: 10px; margin: 145px 3px 0; background: rgba(255,255,255,0.25); border-radius: 50%; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-animation: wave 2s infinite ease-in-out; -moz-animation: wave 2s infinite ease-in-out; -ms-animation: wave 2s infinite ease-in-out; -o-animation: wave 2s infinite ease-in-out; animation: wave 2s infinite ease-in-out;
}
span:nth-child(1) { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s;
}
span:nth-child(2) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -ms-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s;
}
span:nth-child(3) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -ms-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s;
}
span:nth-child(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -ms-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s;
}
span:nth-child(5) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -ms-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s;
}
/* Animation */
@keyframes "wave" { 0%,60%,100% { background: rgba(255,255,255,0.25); -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);
} 20% { background: rgba(255,255,255,0.75); -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 40% { background: rgba(255,255,255,0.75); -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
}
@-moz-keyframes wave { 0%,60%,100% { background: rgba(255,255,255,0.25); -moz-transform: translateY(0); transform: translateY(0);
} 20% { background: rgba(255,255,255,0.75); -moz-transform: translateY(20px); transform: translateY(20px); } 40% { background: rgba(255,255,255,0.75); -moz-transform: translateY(-20px); transform: translateY(-20px); }
}
@-webkit-keyframes "wave" { 0%,60%,100% { background: rgba(255,255,255,0.25); -webkit-transform: translateY(0); transform: translateY(0);
} 20% { background: rgba(255,255,255,0.75); -webkit-transform: translateY(20px); transform: translateY(20px); } 40% { background: rgba(255,255,255,0.75); -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@-ms-keyframes "wave" { 0%,60%,100% { background: rgba(255,255,255,0.25); -ms-transform: translateY(0); transform: translateY(0);
} 20% { background: rgba(255,255,255,0.75); -ms-transform: translateY(20px); transform: translateY(20px); } 40% { background: rgba(255,255,255,0.75); -ms-transform: translateY(-20px); transform: translateY(-20px); }
}
@-o-keyframes "wave" { 0%,60%,100% { background: rgba(255,255,255,0.25); -o-transform: translateY(0); transform: translateY(0);
} 20% { background: rgba(255,255,255,0.75); -o-transform: translateY(20px); transform: translateY(20px); } 40% { background: rgba(255,255,255,0.75); -o-transform: translateY(-20px); transform: translateY(-20px); }
}
| Developer | Rıza Selçuk Saydam |
| Username | rss |
| Uploaded | August 02, 2022 |
| Rating | 3.5 |
| Size | 2,761 Kb |
| Views | 52,624 |
Do you need developer help for Loader 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!
Rıza Selçuk Saydam (rss) Script Codes
| Name | Size |
| Button Switch | 5,239 Kb |
| Pigecon | 3,730 Kb |
| CSS3 Loading Animation | 5,219 Kb |
| METU CSS3 Logo | 2,504 Kb |
| Toggle menu by Andreas Storm | 2,854 Kb |
| Little Boxes on an iPhone | 4,036 Kb |
| Flutterby | 3,799 Kb |
| Flat iOS 7 Safari Icon | 3,332 Kb |
| CSS3 Loader Animation - Peeek | 3,854 Kb |
| Sticky footer - adjustPusher | 2,127 Kb |
Create amazing video scripts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Full page table inside the grid | Twikito | 1,864 Kb |
| Slide In Panel | Vikvarg | 2,811 Kb |
| AngularJS Animated Todo List | Ehaase | 2,975 Kb |
| Pagepilling.js | Blossk | 6,554 Kb |
| Cars going | Netoguimaraes | 1,699 Kb |
| Pomodoro Timer | Sdas13 | 2,900 Kb |
| Sticky menu on scroll | Senff | 2,869 Kb |
| CSS3 Media Queries demo | Machal | 1,824 Kb |
| Spinners using Font Icons | Keyamoon | 3,007 Kb |
| Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
Do you want hide your ip address?
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!