css动画实现loading效果

2024年2月3日 211次阅读来源: ilvseyinfu

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)

    原文作者：ilvseyinfu
    原文地址: https://segmentfault.com/a/1190000017952179
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。