Soundbar Loading Animation
How do I make an soundbar loading animation?
Using CSS Keyframes to create a soundbar style loading animation. What is a soundbar loading animation? How do you make a soundbar loading animation? This script and codes were developed by Keith Light on 18 November 2022, Friday.
Soundbar Loading Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Soundbar Loading Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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! */ @import url(https://fonts.googleapis.com/css?family=Roboto);
body { background: #2e2e2e; color: #fff; font-family: 'Roboto';
}
h1 { font-size: 50px; letter-spacing: 10px; text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, 1);
}
.loader { background: transparent; width: 100px; height: 100px; margin: 50px auto; position: relative;
}
span { display: block; bottom: 0px; width: 9px; height: 5px; background: #05B8CC; position: absolute; animation: soundBar 3s infinite ease-in-out;
}
span:nth-child(1) { left: 0px;
}
span:nth-child(2) { left: 10px; animation-delay:.2s;
}
span:nth-child(3) { left: 20px; animation-delay:.4s;
}
span:nth-child(4) { left: 30px; animation-delay:.6s;
}
span:nth-child(5) { left: 40px; animation-delay:.8s;
}
span:nth-child(6) { left: 50px; animation-delay:1s;
}
span:nth-child(7) { left: 60px; animation-delay:1.2s;
}
span:nth-child(8) { left: 70px; animation-delay:1.4s;
}
@keyframes soundBar { 0% {height: 5px; background:#05B8CC} 20% {height: 50px; background:#DD0048} 40% {height: 5px; background:#05B8CC} 60% {height: 5px; background:#05B8CC}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="loader"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span>
</div>
<h1>Soundbar Loading Animation</h1>
</body>
</html>
Soundbar Loading Animation - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Roboto);
body { background: #2e2e2e; color: #fff; font-family: 'Roboto';
}
h1 { font-size: 50px; letter-spacing: 10px; text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, 1);
}
.loader { background: transparent; width: 100px; height: 100px; margin: 50px auto; position: relative;
}
span { display: block; bottom: 0px; width: 9px; height: 5px; background: #05B8CC; position: absolute; animation: soundBar 3s infinite ease-in-out;
}
span:nth-child(1) { left: 0px;
}
span:nth-child(2) { left: 10px; animation-delay:.2s;
}
span:nth-child(3) { left: 20px; animation-delay:.4s;
}
span:nth-child(4) { left: 30px; animation-delay:.6s;
}
span:nth-child(5) { left: 40px; animation-delay:.8s;
}
span:nth-child(6) { left: 50px; animation-delay:1s;
}
span:nth-child(7) { left: 60px; animation-delay:1.2s;
}
span:nth-child(8) { left: 70px; animation-delay:1.4s;
}
@keyframes soundBar { 0% {height: 5px; background:#05B8CC} 20% {height: 50px; background:#DD0048} 40% {height: 5px; background:#05B8CC} 60% {height: 5px; background:#05B8CC}
}
Developer | Keith Light |
Username | keefyboooo |
Uploaded | November 18, 2022 |
Rating | 3 |
Size | 2,431 Kb |
Views | 48,576 |
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 |
Animated Burger Menu | 2,753 Kb |
SlideToggle Menu | 3,904 Kb |
Rainbow Text | 1,853 Kb |
DevWars Weekly Challenge Week 3 | 6,386 Kb |
Weather App Concept | 5,869 Kb |
Material Design Colour Palette | 14,903 Kb |
Colour Palette From Material Design | 5,592 Kb |
Off Canvas Pop Out Menu | 4,027 Kb |
CSS Pseudo Element Hover Effects | 4,029 Kb |
Tron Light Cycle Loader | 3,200 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 |
Css3 loader | Clknap | 2,391 Kb |
Next Word Predictor | Rfalor | 2,776 Kb |
Count up | Alanshortis | 2,391 Kb |
Pomodoro Timer | Sdas13 | 2,900 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
Twitch | SarahDunlap | 2,937 Kb |
MAD9013 - Float Images with Content | Mad-d | 2,220 Kb |
Tail rose iris lined | Kbrtrm | 1,846 Kb |
Loading Bar | Jaradlight | 2,333 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!