css動畫實現loading效果

css animation 動畫實現loading狀態

HTML

<div class="root"></div>

CSS

.root {
  width: 25px;
  height: 25px;
  border-radius: 50px;
  border: 2px dashed #ddeeff;
  animation: loading 1s infinite linear;
}

@keyframes loading {
  to {
    transform: rotate(180deg)
  }
}

JavaScript

setTimeout(() => {
  $('.root').css({
    'animation-play-state': 'paused'
  })  
}, 5000)