bubble-ticker

Bubble ticker

by Aakash Khapare M

HTML

<div class="bubble-ticker">
  <span class="circle"></span>
  <span class="circle"></span>
  <span class="circle"></span>
  <span class="circle"></span>
  <span class="circle"></span>
</div>

CSS

.bubble-ticker{
  position: fixed;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  background-color: transparent;
}
.bubble-ticker > .circle{
  height: 10px;
  width: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid #b71c1c;
  border-radius: 50%;
  background-color: #fff;
  animation-name: bubble;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  
}
.bubble-ticker > .circle:nth-child(2){animation-delay: 0.1s; opacity: 0.8}
.bubble-ticker > .circle:nth-child(3){animation-delay: 0.2s; opacity: 0.6}
.bubble-ticker > .circle:nth-child(4){animation-delay: 0.3s; opacity: 0.4}
.bubble-ticker > .circle:nth-child(5){animation-delay: 0.4s; opacity: 0.2}
@keyframes bubble{
  0%, 100%{width: 0px; height: 0px;}
  50%{width: 50px; height: 50px;}
}