<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>U-Shaped Neon Loader</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #1e293b, #0f172a);
overflow: hidden;
}
.loader {
position: relative;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.u-shape {
position: relative;
display: flex;
justify-content: space-between;
width: 140px;
height: 80px;
}
.ball {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px;
backdrop-filter: blur(5px);
animation: moveAndRotate 4s infinite ease-in-out;
}
.ball:nth-child(1) {
animation-delay: 0s;
background: rgba(255, 0, 0, 0.7);
box-shadow: 0 0 10px rgba(255, 0, 0, 0.7), 0 0 20px rgba(255, 0, 0, 0.9);
}
.ball:nth-child(2) {
animation-delay: 0.5s;
background: rgba(0, 255, 0, 0.7);
box-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.9);
}
.ball:nth-child(3) {
animation-delay: 1s;
background: rgba(0, 0, 255, 0.7);
box-shadow: 0 0 10px rgba(0, 0, 255, 0.7), 0 0 20px rgba(0, 0, 255, 0.9);
}
.ball:nth-child(4) {
animation-delay: 1.5s;
background: rgba(255, 255, 0, 0.7);
box-shadow: 0 0 10px rgba(255, 255, 0, 0.7), 0 0 20px rgba(255, 255, 0, 0.9);
}
.ball:nth-child(5) {
animation-delay: 2s;
background: rgba(0, 255, 255, 0.7);
box-shadow: 0 0 10px rgba(0, 255, 255, 0.7), 0 0 20px rgba(0, 255, 255, 0.9);
}
.ball:nth-child(6) {
animation-delay: 2.5s;
background: rgba(255, 0, 255, 0.7);
box-shadow: 0 0 10px rgba(255, 0, 255, 0.7), 0 0 20px rgba(255, 0, 255, 0.9);
}
.ball:nth-child(7) {
animation-delay: 3s;
background: rgba(226, 55, 7, 0.7);
box-shadow: 0 0 10px rgba(121, 68, 26, 0.7), 0 0 20px rgba(255, 0, 255, 0.9);
}
@keyframes moveAndRotate {
0% {
transform: translate(0, 0) rotate(0deg);
}
20% {
transform: translateY(-100px) translateX(0px);
}
40% {
transform: translateY(-100px) translateX(220px);
}
60% {
transform: translateY(120px) translateX(200px);
}
80% {
transform: translateY(120px) translateX(-10px);
}
100% {
transform: translateY(0) translateX(0) rotate(360deg);
}
}
.neon-text {
font-family: 'Arial', sans-serif;
font-size: 18px;
font-weight: bold;
color: rgba(255, 255, 255, 0.8);
text-shadow: 0 0 5px rgba(255, 255, 255, 0.6),
0 0 10px rgba(0, 255, 255, 0.7),
0 0 15px rgba(255, 0, 255, 0.7);
}
</style>
</head>
<body>
<div class="loader">
<div class="u-shape">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
<div class="neon-text">Loading...</div>
</div>
</body>
</html>
0 seconds of 0 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
Keyboard Shortcuts
Shortcuts Open/Close/ or ?
Play/PauseSPACE
Increase Volume↑
Decrease Volume↓
Seek Forward→
Seek Backward←
Captions On/Offc
Fullscreen/Exit Fullscreenf
Mute/Unmutem
Decrease Caption Size-
Increase Caption Size+ or =
Seek %0-9
Modular, Fast, and Built for Developers
CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (1)
Very Helpfull !
Some comments may only be visible to logged-in visitors. Sign in to view all comments.