<!-- 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);
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.