卡卡網

CSS loading 加載動畫用于程序加載過程中的顯示，它的作用是告訴用戶程序還在進行中，不要關閉窗口。有些人用GIF圖片來設計loading加載畫面，本文介紹用純CSS來實現一個loading加載動畫。

demodownload

HTML

HTML代碼十分簡單，只有一個div，div里也只有一個類屬性loader。

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

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  border-width: 0.25rem;
  border-style: solid;
  border-color: gainsboro gainsboro dodgerblue gainsboro;
  border-radius: 50%;
  display: block;
  width: 4rem;
  height: 4rem;
  -webkit-animation: rotate 1.5s linear infinite;
          animation: rotate 1.5s linear infinite;
}

.loader 定義圓邊的樣式。

animation: rotate 1.5s linear infinite; 這里rotate意思為旋轉，1.5s為每1.5秒完成一次運動，infinite為循環(huán)進行，linear為動畫從頭到尾的速度是相同的。

@keyframes rotate 定義圓環(huán)的旋轉方向和角度。

您可能對以下文章也感興趣

• CSS3 loading預加載動畫旋轉的圓弧【演示/源碼下載】
• 4個漂亮的CSS3 Loading預加載動畫實例
• CSS3 Loading 旋轉圓盤加載動畫
• CSS3 loading音波效果預加載動畫
• CSS3 Loading預加載動畫8個常見實例
• CSS Loading 左右滾動加載動畫等5實例【源碼下載】

標簽: css-loading  加載動畫