DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Wave Loader - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Wave Loader
jitesh208
Jan 21, 2026
4
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<div class="container"> <div class="wave-loader"> <div class="wave-group"> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> </div> <div class="circle-container"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> </div> <div class="status-text"> <div class="percentage">0%</div> <div class="message">Please wait...</div> </div> </div>
1
* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); font-family: 'Arial', sans-serif; overflow: hidden; } body::before { content: ''; position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, rgba(76, 0, 255, 0.1), transparent); animation: bgPulse 4s ease-in-out infinite; } @keyframes bgPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 50px; } .wave-loader { position: relative; width: 250px; height: 250px; display: flex; justify-content: center; align-items: center; } .wave-group { position: absolute; width: 100%; height: 100%; } .wave { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border: 3px solid transparent; border-radius: 50%; animation: waveExpand 3s ease-out infinite; } .wave:nth-child(1) { animation-delay: 0s; border-color: rgba(0, 255, 255, 0.8); } .wave:nth-child(2) { animation-delay: 0.6s; border-color: rgba(138, 43, 226, 0.8); } .wave:nth-child(3) { animation-delay: 1.2s; border-color: rgba(255, 0, 255, 0.8); } .wave:nth-child(4) { animation-delay: 1.8s; border-color: rgba(0, 191, 255, 0.8); } .wave:nth-child(5) { animation-delay: 2.4s; border-color: rgba(147, 112, 219, 0.8); } @keyframes waveExpand { 0% { width: 50px; height: 50px; opacity: 1; border-width: 3px; } 100% { width: 250px; height: 250px; opacity: 0; border-width: 1px; } } .circle-container { position: relative; width: 60px; height: 60px; animation: containerRotate 2s linear infinite; } @keyframes containerRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .circle { position: absolute; width: 20px; height: 20px; border-radius: 50%; animation: circleFloat 1.5s ease-in-out infinite; } .circle:nth-child(1) { background: linear-gradient(135deg, #00ffff, #00cccc); top: 0; left: 50%; transform: translateX(-50%); box-shadow: 0 0 20px rgba(0, 255, 255, 0.6); } .circle:nth-child(2) { background: linear-gradient(135deg, #ff00ff, #cc00cc); bottom: 0; left: 0; box-shadow: 0 0 20px rgba(255, 0, 255, 0.6); animation-delay: 0.5s; } .circle:nth-child(3) { background: linear-gradient(135deg, #8a2be2, #6a1bb2); bottom: 0; right: 0; box-shadow: 0 0 20px rgba(138, 43, 226, 0.6); animation-delay: 1s; } @keyframes circleFloat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } } .status-text { text-align: center; color: #fff; } .percentage { font-size: 48px; font-weight: bold; background: linear-gradient(135deg, #00ffff, #ff00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px; animation: countUp 5s ease-out infinite; } @keyframes countUp { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } .message { font-size: 20px; color: rgba(255, 255, 255, 0.8); letter-spacing: 3px; text-transform: uppercase; animation: textFade 2s ease-in-out infinite; } @keyframes textFade { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
1
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!