css實現螺紋動態進度條效果

antzone發表於2017-03-15
CSS

分享一段程式碼例項，它實現了螺紋狀動態進度條效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#progress {
  width: 50%;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 15px;
  margin: 50px 0 0 100px;
  overflow: hidden;
  box-shadow: 0 0 5px 0px #ddd inset;
}
#progress span {
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #2989d8;
  background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8));
  background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%);
  background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%);
  background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 );
  background-size: 60px 30px;
  text-align: center;
  color: #fff;
  -webkit-animation: load 3s ease-in;
}
@-webkit-keyframes load {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
} 
</style>
</head>
<body>
<div id="progress">
  <span></span>
</div>
</body>
</html>

相關文章