HTML5 SVG Loading加载特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5 SVG Loading加载特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML5 SVG Loading加载特效</title>
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>
  <div class="l-wrapper">
    <svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="circle" class="g-circles g-circles--v1">
          <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
          <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
          <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
          <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
          <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
          <circle id="7" cx="60" cy="110" r="10"></circle>
          <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
          <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
          <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
          <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
          <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
          <circle id="1" cx="60" cy="10" r="10"></circle>
      </g>

      <use xlink:href="#circle" class="use"/>
  </svg>
  <svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="circle" class="g-circles g-circles--v2">
          <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
          <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
          <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
          <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
          <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
          <circle id="7" cx="60" cy="110" r="10"></circle>
          <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
          <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
          <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
          <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
          <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
          <circle id="1" cx="60" cy="10" r="10"></circle>
      </g>
  </svg>

  <svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="circle" class="g-circles g-circles--v3">
          <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
          <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
          <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
          <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
          <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
          <circle id="7" cx="60" cy="110" r="10"></circle>
          <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
          <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
          <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
          <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
          <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
          <circle id="1" cx="60" cy="10" r="10"></circle>
      </g>
  </svg>

  <svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="circle" class="g-circles g-circles--v4">
          <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
          <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
          <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
          <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
          <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
          <circle id="7" cx="60" cy="110" r="10"></circle>
          <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
          <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
          <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
          <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
          <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
          <circle id="1" cx="60" cy="10" r="10"></circle>
      </g>
  </svg>
</div>
</body>
</html>

CSS代码(style.css):

BODY{background:-webkit-linear-gradient(45deg,rgba(255,255,255,0) 48%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0) 52%),-webkit-linear-gradient(135deg,rgba(255,255,255,0) 48%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0) 52%);background:linear-gradient(45deg,rgba(255,255,255,0) 48%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0) 52%),linear-gradient(-45deg,rgba(255,255,255,0) 48%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0) 52%);-webkit-background-size:1em 1em;background-size:1em 1em;background-color:#000;}
.l-wrapper{position:absolute;width:480px;height:300px;top:0;right:0;bottom:0;left:0;margin:auto;text-align:center;}
svg{height:120px;width:120px;margin:0 2em 2em;overflow:visible;/* border:1px solid red;*/
}
.g-circles{-webkit-transform:scale(0.9) translate(7px,7px);-ms-transform:scale(0.9) translate(7px,7px);transform:scale(0.9) translate(7px,7px);}
circle{fill:dodgerblue;fill-opacity:0;-webkit-animation:opacity 1.2s linear infinite;animation:opacity 1.2s linear infinite;}
circle:nth-child(12n + 1){-webkit-animation-delay:-0.1s;animation-delay:-0.1s;}
circle:nth-child(12n + 2){-webkit-animation-delay:-0.2s;animation-delay:-0.2s;}
circle:nth-child(12n + 3){-webkit-animation-delay:-0.3s;animation-delay:-0.3s;}
circle:nth-child(12n + 4){-webkit-animation-delay:-0.4s;animation-delay:-0.4s;}
circle:nth-child(12n + 5){-webkit-animation-delay:-0.5s;animation-delay:-0.5s;}
circle:nth-child(12n + 6){-webkit-animation-delay:-0.6s;animation-delay:-0.6s;}
circle:nth-child(12n + 7){-webkit-animation-delay:-0.7s;animation-delay:-0.7s;}
circle:nth-child(12n + 8){-webkit-animation-delay:-0.8s;animation-delay:-0.8s;}
circle:nth-child(12n + 9){-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
circle:nth-child(12n + 10){-webkit-animation-delay:-1s;animation-delay:-1s;}
circle:nth-child(12n + 11){-webkit-animation-delay:-1.1s;animation-delay:-1.1s;}
circle:nth-child(12n + 12){-webkit-animation-delay:-1.2s;animation-delay:-1.2s;}
.g-circles--v2 circle{fill-opacity:0;stroke-opacity:0;stroke-width:1;stroke:yellowgreen;-webkit-animation-name:opacity-stroke,colors,colors-stroke,transform-2;animation-name:opacity-stroke,colors,colors-stroke,transform-2;}
.g-circles--v3 circle{fill-opacity:1;-webkit-animation-name:opacity,colors;animation-name:opacity,colors;}
.g-circles--v4 circle{fill-opacity:1;fill:orange;-webkit-transform-origin:60px 60px;-ms-transform-origin:60px 60px;transform-origin:60px 60px;-webkit-animation-name:opacity,colors-3,transform;animation-name:opacity,colors-3,transform;}
@-webkit-keyframes opacity{3%{fill-opacity:1;}
75%{fill-opacity:0;}
}
@keyframes opacity{3%{fill-opacity:1;}
75%{fill-opacity:0;}
}
@-webkit-keyframes opacity-stroke{10%{stroke-opacity:1;}
85%{stroke-opacity:0;}
}
@keyframes opacity-stroke{10%{stroke-opacity:1;}
85%{stroke-opacity:0;}
}
@-webkit-keyframes colors{0%{fill:yellowgreen;}
10%{fill:gold;}
75%{fill:crimson;}
}
@keyframes colors{0%{fill:yellowgreen;}
10%{fill:gold;}
75%{fill:crimson;}
}
@-webkit-keyframes colors-stroke{0%{stroke:yellowgreen;}
10%{stroke:gold;}
75%{stroke:crimson;}
}
@keyframes colors-stroke{0%{stroke:yellowgreen;}
10%{stroke:gold;}
75%{stroke:crimson;}
}
@-webkit-keyframes colors-2{0%{fill:yellow;}
50%{fill:red;}
65%{fill:orangered;}
95%{fill:gold;}
}
@keyframes colors-2{0%{fill:yellow;}
50%{fill:red;}
65%{fill:orangered;}
95%{fill:gold;}
}
@-webkit-keyframes colors-3{0%{fill:yellowgreen;}
50%{fill:turquoise;}
65%{fill:yellow;}
95%{fill:orange;}
}
@keyframes colors-3{0%{fill:yellowgreen;}
50%{fill:turquoise;}
65%{fill:yellow;}
95%{fill:orange;}
}
@-webkit-keyframes transform{10%{-webkit-transform:scale(0.75);transform:scale(0.75);}
}
@keyframes transform{10%{-webkit-transform:scale(0.75);transform:scale(0.75);}
}
@-webkit-keyframes transform-2{40%{-webkit-transform:scale(0.85);transform:scale(0.85);}
60%{stroke-width:20;}
}
@keyframes transform-2{40%{-webkit-transform:scale(0.85);transform:scale(0.85);}
60%{stroke-width:20;}
}

附件:下载该文件资源,减少时间成本(增值服务)