Skip to content

Instantly share code, notes, and snippets.

@alirezarezamand
Created January 22, 2023 01:38
Show Gist options
  • Save alirezarezamand/74228c5e78b6beb8de0af47b28fcda64 to your computer and use it in GitHub Desktop.
Save alirezarezamand/74228c5e78b6beb8de0af47b28fcda64 to your computer and use it in GitHub Desktop.
HTML & CSS Only Glowing Ring
<div class="container">
<div class="loader"><span></span></div>
<div class="loader"><span></span></div>
<div class="loader"><i></i></div>
<div class="loader"><i></i></div>
</div>
// Source: https://www.youtube.com/watch?v=n6ojK2HmROE
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
.container {
position: relative;
width: 100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
-webkit-box-reflect: below 0 linear-gradient(transparent, transparent, #0005);
.loader {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
animation: animate 2s linear infinite;
&:nth-child(1):before,
&:nth-child(2):before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(to top, transparent, rgba(0, 255, 249, 0.4));
background-size: 100px 180px;
background-repeat: no-repeat;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
&:nth-child(2),
&:nth-child(4) {
animation-delay: -1s;
filter: hue-rotate(290deg);
}
i {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background: #00fff9;
border-radius: 50%;
z-index: 100;
box-shadow: 0 0 10px #00fff9,
0 0 20px #00fff9,
0 0 30px #00fff9,
0 0 40px #00fff9,
0 0 50px #00fff9,
0 0 60px #00fff9,
0 0 70px #00fff9,
0 0 80px #00fff9,
0 0 90px #00fff9,
0 0 100px #00fff9,
}
span {
position: absolute;
inset: 20px;
background: #000;
border-radius: 50%;
z-index: 1;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment