简单旋转加载

最新推荐文章于 2024-01-30 13:56:15 发布

loshirleyve

最新推荐文章于 2024-01-30 13:56:15 发布

阅读量420

点赞数

分类专栏： web前端 html 文章标签： loading加载

web前端同时被 2 个专栏收录

12 篇文章

订阅专栏

html

8 篇文章

订阅专栏

第一种做法：

/* loader */
#loader{
  -webkit-animation:change 0.5s linear infinite;
}
@-webkit-keyframes change{
  0%{ -webkit-transform:rotate(0deg); }
  50%{ -webkit-transform:rotate(180deg); }
  100%{ -webkit-transform:rotate(360deg); }
}
@-moz-keyframes change{
  0%{ -webkit-transform:rotate(0deg); }
  50%{ -webkit-transform:rotate(180deg); }
  100%{ -webkit-transform:rotate(360deg); }
}
@-ms-keyframes change{
  0%{ -webkit-transform:rotate(0deg); }
  50%{ -webkit-transform:rotate(180deg); }
  100%{ -webkit-transform:rotate(360deg); }
}
@keyframes change{
  0%{ -webkit-transform:rotate(0deg); }
  50%{ -webkit-transform:rotate(180deg); }
  100%{ -webkit-transform:rotate(360deg); }
}

用法：

<img src='images/loader.png' id="loader">

第二种做法

<div class="container">
  <div class="loader"></div>
</div>

.loader {
  -webkit-animation: spin 0.8s linear infinite;
          animation: spin 0.8s linear infinite;
  border: 1px solid #fff;
  border-top: none;
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background-color: #414141;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.container {
  margin: 0 auto;
}

第二种做法见：
http://www.jq22.com/code949