circlular-ticker-2

Circular ticker

by Aakash Khapare M

HTML

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

CSS

.circle-ticker{
  height: 50px;
  width: 50px;
  background-color: transparent;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  overflow: hidden;
}
.circle-ticker>.dot{
  height: 5px;
  width: 3px;
  background-color: #0D47A1;
  animation-name: expand;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translate(-50%. -50%);
}
.circle-ticker>.dot:nth-child(2){left: 15px;animation-delay: 0.2s;opacity: 0.9;}
.circle-ticker>.dot:nth-child(3){left: 25px;animation-delay: 0.4s;opacity: 0.8;}
.circle-ticker>.dot:nth-child(4){left: 35px;animation-delay: 0.6s;opacity: 0.7;}
.circle-ticker>.dot:nth-child(5){left: 45px;animation-delay: 0.8s;opacity: 0.6;}
@keyframes expand{
  0%, 60%{height: 5px;top: 50%;}
  30%{height: 30px;top: 10px;}
}