css实现12款loading加载动画效果代码-html代码-BFW代码库

css实现12款loading加载动画效果代码

代码语言：html

代码描述：css实现12款loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <style>

        body {
          background-color: #a9fbff;
          margin-top: 25px;
        }
        
        .col-sm-2 {
          padding: 10px;
          border-radius: 4px;
          height: 125px;
          margin-bottom: 10px;
        }
        
        .sp {
          width: 32px;
          height: 32px;
          clear: both;
          margin: 20px auto;
        }
        
        /* Spinner Circle Rotation */
        .sp-circle {
          border: 4px rgba(0, 0, 0, 0.25) solid;
          border-top: 4px black solid;
          border-radius: 50%;
          -webkit-animation: spCircRot 0.6s infinite linear;
          animation: spCircRot 0.6s infinite linear;
        }
        
        @-webkit-keyframes spCircRot {
          from {
            -webkit-transform: rotate(0deg);
          }
          to {
            -webkit-transform: rotate(359deg);
          }
        }
        @keyframes spCircRot {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(359deg);
          }
        }
        /* Spinner 3Balls Scale */
        .sp-3balls, .sp-3balls:before, .sp-3balls:after {
          border-radius: 50%;
          background-color: #000;
          width: 18px;
          height: 18px;
          transform-origin: center center;
          display: inline-block;
        }
        
        .sp-3balls {
          position: relative;
          background-color: black;
          opacity: 1;
          -webkit-animation: spScaleAlpha 1s infinite linear;
          animation: spScaleAlpha 1s infinite linear;
        }
        
        .sp-3balls:before, .sp-3balls:after {
          content: "";
          position: relative;
          opacity: 0.25;
        }
        
        .sp-3balls:before {
          left: 30px;
          top: 0px;
          -webkit-animation: spScaleAlphaBefore 1s infinite linear;
          animation: spScaleAlphaBefore 1s infinite linear;
        }
        
        .sp-3balls:after {
          left: -30px;
          top: -23px;
          -webkit-animation: spScaleAlphaAfter 1s infinite linear;
          animation: spScaleAlphaAfter 1s infinite linear;
        }
        
        @-webkit-keyframes spScaleAlpha {
          0% {
            opacity: 1;
          }
          33% {
            opacity: 0.25;
          }
          66% {
            opacity: 0.25;
          }
          100% {
            opacity: 1;
          }
        }
        @keyframes spScaleAlpha {
          0% {
            opacity: 1;
          }
          33% {
            opacity: 0.25;
          }
          66% {
            opacity: 0.25;
          }
          100% {
            opacity: 1;
          }
        }
        @-webkit-keyframes spScaleAlphaBefore {
          0% {
            opacity: 0.25;
          }
          33% {
            opacity: 1;
          }
          66% {
            opacity: 0.25;
          }
        }
        @keyframes spScaleAlphaBefore {
          0% {
            opacity: 0.25;
          }
          33% {
            opacity: 1;
          }
          66% {
            opacity: 0.25;
          }
        }
        @-webkit-keyframes spScaleAlphaAfter {
          33% {
            opacity: 0.25;
    .........完整代码请登录后点击上方下载按钮下载查看