Circle border animation

by tobek

HTML

<div class="outer">
  <div class="wrapper">
    <div class="circle"></div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
.outer {
  width: 200px;
  height: 200px;
  animation: syncing-status-animation 2s infinite;
}
.wrapper {
  width: 200px;
  height: 150px;
  overflow: hidden;
  animation: syncing-status-inner-animation 3s alternate linear infinite;
}
.circle {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 2px solid coral;
  border-radius: 50%;
}

@keyframes syncing-status-animation {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@keyframes syncing-status-inner-animation {
  0% {
    height: 5px;
  }
  100% {
    height: 195px;
  }
}