css 原生代码写loading圆环

最新推荐文章于 2025-03-16 19:10:50 发布

zhang-php

最新推荐文章于 2025-03-16 19:10:50 发布

阅读量594

点赞数

分类专栏： html5 CSS 文章标签： html5 css3 html

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/qq_37682202/article/details/109379758

版权

html5 同时被 2 个专栏收录

50 篇文章

订阅专栏

CSS

10 篇文章

订阅专栏

.loader{ height: 50px; width: 50px; margin: 20% auto 0 auto; }
.loader::after,.loader::before{ content: ""; width: 50px; height: 50px; position: absolute; border: solid 8px transparent; border-radius: 50%; -webkit-animation: circles 1.4s linear infinite; animation: circles 1.4s linear infinite; }
.loader::before { border-top-color: #48C8A2; border-bottom-color: #48C8A2; }
.loader::after { border-left-color: #ccc; border-right-color: #ccc; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
@-webkit-keyframes circles {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(1);
            transform: rotate(180deg) scale(1);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1);
  }
}