Win Ticker

Windows 10 ticker

by Aakash Khapare M

HTML

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

CSS

.win-ticker{
  width: 100%;
  height: 5px;
  text-align: center;
  position: relative;
}
.win-ticker > .dot{
  display: inline-block;
  vertical-align: middle;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background-color: #2196F3;
  position: absolute;
  left: -5px;
  animation-name: slide-dot;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  transition: all linear;
}
.win-ticker > .dot:nth-child(2){
  animation-delay: 0.4s;
}
.win-ticker > .dot:nth-child(3){
  animation-delay: 0.8s;
}
.win-ticker > .dot:nth-child(4){
  animation-delay: 1.2s;
}
.win-ticker > .dot:nth-child(5){
  animation-delay: 1.6s;
}

@keyframes slide-dot{
  0%{left: 0%;opacity: 0;}
  20%{left: 45%;opacity:1;}
  80%{left: 55%;opacity: 1;}
  90%{left: 100%;opacity: 0;}
  100%{opacity: 0;}
}