CSS3 螺紋載入進度條效果

螞蟻小編發表於2017-02-26
CSSS3
分享一段程式碼例項，它利用css3實現了載入進度條效果。

此進度條具有螺紋漸變效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.process {
  width: 400px;
  height: 14px;
  background-color: #ddd;
  border-radius: 10px;
  box-shadow: inset rgba(0,0,0,0.4) 0 1px 2px;
  background-image: -webkit-linear-gradient(top,#ccc,#eee);
  overflow: hidden;
}
.processBar {
  width: 100%;
  height: 13px;
  background-image:
    linear-gradient(135deg,
                transparent 0%,transparent 14.3%,
                rgba(255,255,255,0.4) 14.3%, rgba(255,255,255,0.4) 28.6%,
                transparent 28.6%, transparent 42.9%,
                rgba(255,255,255,0.4) 42.9%, rgba(255,255,255,0.4) 57.2%,
                transparent 57.2%, transparent 71.5%,
                rgba(255,255,255,0.4) 71.5%, rgba(255,255,255,0.4) 85.8%,
                transparent 85.8%,transparent 100%
                ),
                linear-gradient(-90deg,#20BE65,#1F78C8);
  background-size: 26px 20px,100%;
  background-position: 0%;
  border-radius: 10px;
  box-shadow: rgba(0,0,0,1) 0 1px;
  animation: barAnimation 10s linear;
}
 
@keyframes barAnimation {
  from {
    background-position: 0%;
    width: 0%;
  }
  to {
    background-position: -100%;
    width: 100%;
  }
}
</style>
</head>
<body>
<div class="process">
  <div class="processBar"></div>
</div>
</body>
</html>

相關文章