circle waves animation UI issue

Question

I'm added my html project for the circle waves animation. is it working good but I want to know how to added this type circle animation please look attached image, example simply how to added black circle on the yellow one?

/* Circle-us */
.circle-us {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background-color: #FFC525;
  position: absolute;
  top: 45%; cursor: pointer;
  left: 20%;
  transform: translate(-50%, -50%);
}


.circle-us:before,
.circle-us:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #ffc107;
  border-radius: 50%;
}


.circle-us:before {
  animation: ripples 2s linear infinite;
}

.circle-us:after {
  animation: ripples 2s linear 1s infinite;
}

/* ripple effect */
@keyframes ripples {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); opacity:1; }
  100% { transform: scale(1.6); opacity:0; }
}

 <div class="circle-us"></div>

Answer 1

Im not sure if i understand you right. if you just mean you want to add color around it you can use border and outline to attain it. but if you want to animate them let me know.

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.circle-us {
  height: 18px;
  width: 18px;
  border: 20px solid #403e35;
  outline:40px solid #ede4d2;
  border-radius: 50%;
  background-color:#FFC525;
  position: relative;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
}

.circle-us:before {
  position: absolute;
  content: "";
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  border-radius: 50%;
  box-shadow: 0 0 rgba(0, 0, 0, 0.2), 0 0 0 16px rgba(0, 0, 0, 0.2),
    0 0 0 32px rgba(0, 0, 0, 0.2), 0 0 0 48px rgba(0, 0, 0, 0.2);
  z-index: -1;
  animation: ripples 1s linear infinite;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  transform: scale(0.5);
}

.circle-us:before {
  animation-play-state: running;
  opacity: 1;
  visibility: visible;
  transform: scale(1.2);
}

@keyframes ripples {
  to {
    box-shadow: 0 0 0 16px rgba(0, 0, 0, 0.2), 0 0 0 32px rgba(0, 0, 0, 0.2),
      0 0 0 48px rgba(0, 0, 0, 0.2), 0 0 0 64px rgba(0, 0, 0, 0);
  }
}

<div class="center">
  <div class="circle-us"></div>
</div>