<!-- Inpired from the work of https://codingartistweb.com/2020/09/neumorphism-loading-animation-css/
https://codepen.io/Coding-Artist/pen/MWyNjwV
Check out his work for more cool CSS stuff-->
<div class="wrapper">
<div class="rings">
<div class="ring ring1">
<div class="ring ring2">
<div class="ring ring3">
<div class="ring ring4"></div>
</div>
</div>
</div>
</div>
<div class="choose-theme">
<div class="theme theme1" onclick="chooseTheme('#ffad00')"></div>
<div class="theme theme2" onclick="chooseTheme('#01c5c4')"></div>
<div class="theme theme3" onclick="chooseTheme('#ffa5a5')"></div>
<div class="theme theme4" onclick="chooseTheme('#d789d7')"></div>
<div class="theme theme5" onclick="chooseTheme('#f09ae9')"></div>
<div class="theme theme6" onclick="chooseTheme('#e7305b')"></div>
<div class="theme theme7" onclick="chooseTheme('#303960')"></div>
</div>
</div>
:root {
--golden-glow: #ffad00;
}
body {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #ececec;
}
html {
font-size: 10px;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.rings {
position: relative;
}
.ring {
box-shadow:
-10px -10px 15px rgba(255, 255, 255, 0.3),
10px 10px 15px rgba(70, 70, 70, 0.15),
inset -10px -10px 15px rgba(255, 255, 255, 0.3),
inset 10px 10px 15px rgba(70, 70, 70, 0.15);
border: 13px solid #ececec;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.ring1 {
height: 28rem;
width: 28rem;
animation: glow1 2.5s infinite;
}
@keyframes glow1 {
60% {
background-color: #ececec;
}
80% {
background-color: var(--golden-glow);
}
100% {
background-color: var(--golden-glow);
}
}
.ring2 {
height: 20rem;
width: 20rem;
animation: glow2 2.5s infinite;
}
@keyframes glow2 {
40% {
background-color: #ececec;
}
60% {
background-color: var(--golden-glow);
}
100% {
background-color: var(--golden-glow);
}
}
.ring3 {
height: 12rem;
width: 12rem;
animation: glow3 2.5s infinite;
}
@keyframes glow3 {
20% {
background-color: #ececec;
}
40% {
background-color: var(--golden-glow);
}
100% {
background-color: var(--golden-glow);
}
}
.ring4 {
height: 5rem;
width: 5rem;
animation: glow4 2.5s infinite;
}
@keyframes glow4 {
0% {
background-color: #ececec;
}
20% {
background-color: var(--golden-glow);
}
100% {
background-color: var(--golden-glow);
}
}
.choose-theme {
margin-top: 5rem;
display: flex;
column-gap: 10px;
}
.theme {
width: 3rem;
height: 3rem;
cursor: pointer;
border: 5px solid #ececec;
box-shadow:
-10px -10px 15px rgba(255, 255, 255, 0.3),
10px 10px 15px rgba(70, 70, 70, 0.15),
inset -10px -10px 15px rgba(255, 255, 255, 0.3),
inset 10px 10px 15px rgba(70, 70, 70, 0.15);
border-radius: 50%;
}
.theme1 {
background-color: #ffad00;
}
.theme2 {
background-color: #01c5c4;
}
.theme3 {
background-color: #ffa5a5;
}
.theme4 {
background-color: #d789d7;
}
.theme5 {
background-color: #f09ae9;
}
.theme6 {
background-color: #e7305b;
}
.theme7 {
background-color: #303960;
}
const root = document.documentElement;
const chooseTheme = (color) => {
root.style.setProperty('--golden-glow', color);
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.