loaders.css实现28款不同的loading加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：loaders.css实现28款不同的loading加载动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        /**
         *
         *
         */
        html, body {
          padding: 0;
          margin: 0;
          height: 100%;
          font-size: 16px;
          background: #ed5565;
          color: #fff;
          font-family: 'Source Sans Pro'; }
        
        h1 {
          font-size: 2.8em;
          font-weight: 700;
          letter-spacing: -1px;
          margin: 0.6rem 0; }
          h1 > span {
            font-weight: 300; }
        
        h2 {
          font-size: 1.15em;
          font-weight: 300;
          margin: 0.3rem 0; }
        
        main {
          width: 95%;
          max-width: 1000px;
          margin: 4em auto;
          opacity: 0; }
          main.loaded {
            transition: opacity .25s linear;
            opacity: 1; }
          main header {
            width: 100%; }
            main header > div {
              width: 50%; }
            main header > .left, main header > .right {
              height: 100%; }
          main .loaders {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            flex: 0 1 auto;
            flex-direction: row;
            flex-wrap: wrap; }
            main .loaders .loader {
              box-sizing: border-box;
              display: flex;
              flex: 0 1 auto;
              flex-direction: column;
              flex-grow: 1;
              flex-shrink: 0;
              flex-basis: 25%;
              max-width: 25%;
              height: 200px;
              align-items: center;
              justify-content: center; }
        
        /**
         * Util classes
         */
        .left {
          float: left; }
        
        .right {
          float: right; }
        
        .cf, main header {
          content: "";
          display: table;
          clear: both; }
        
        /**
         * Buttons
         */
        .btn {
          color: #fff;
          padding: .75rem 1.25rem;
          border: 2px solid #fff;
          border-radius: 4px;
          text-decoration: none;
          transition: transform .1s ease-out, border .1s ease-out, background-color .15s ease-out, color .1s ease-out;
          margin: 2rem 0; }
          .btn:hover {
            transform: scale(1.01562);
            background-color: #fff;
            color: #ed5565; }
        /**
         *
         *
         */
        $gray: #dcdcdc;
        $text: #fff;
        $bg-color: #ed5565;
        
        html,
        body {
          padding: 0;
          margin: 0;
          height: 100%;
          font-size: 16px;
          background: $bg-color;
          color: $text;
          font-family: 'Source Sans Pro';
        }
        
        h1 {
          font-size: 2.8em;
          font-weight: 700;
          letter-spacing: -1px;
          margin: 0.6rem 0;
        
          > span {
            font-weight: 300;
          }
        }
        
        h2 {
          font-size: 1.15em;
          font-weight: 300;
          margin: 0.3rem 0;
        }
        
        main {
          width: 95%;
          max-width: 1000px;
          margin: 4em auto;
          opacity: 0;
        
          &.loaded {
            transition: opacity .25s linear;
            opacity: 1;
          }
        
          header {
            @extend .cf;
        
            width: 100%;
        
            > div {
              width: 50%;
            }
        
            > .left,
            > .right {
              height: 100%;
            }
        
          }
        
          .loaders {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            flex: 0 1 auto;
            flex-direction: row;
            flex-wrap: wrap;
        
            .loader {
              box-sizing: border-box;
              display: flex;
              flex: 0 1 auto;
              flex-direction: column;
              flex-grow: 1;
              flex-shrink: 0;
              flex-basis: 25%;
              max-width: 25%;
              height: 200px;
              align-items: center;
              justify-content: center;
            }
          }
        }
        
        /**
         * Util classes
         */
        
        .left {
          float: left;
        }
        
        .right {
          float: right;
        }
        
        .cf {
          content: "";
          display: table;
          clear: both;
        }
        
        /**
         * Buttons
         */
        
        .btn {
          color: $text;
          padding: .75rem 1.25rem;
          border: 2px solid $text;
          border-radius: 4px;
          text-decoration: none;
          transition: transform .1s ease-out, border .1s ease-out, background-color .15s ease-out, color .1s ease-out;
          margin: 2rem 0;
        
          &:hover {
            transform: scale(1.01562);
            background-color: #fff;
            color: $bg-color;
          }
        }
        
    </style>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/loaders.css">


    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:600,300" rel="stylesheet" type="text/css" />

</head>

<body>
    <main>
        <header>
            <div class="left">
                <h1>Loaders<span>.css</span></h1>
                <h2>Delightful and performance-focused pure css loading animations.</h2>
            </div>
         
        </header>
        <div class="loaders">
            <div class="loader">
                <div class="loader-inner ball-pulse">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-grid-pulse">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-clip-rotate">
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-clip-rotate-pulse">
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner square-spin">
                    <div></div>
                </div>
            </div>
            <div class="loader">
                <div class="loader-inner ball-clip-rotate-multiple">
                    <div></div>
                    <div></div>.........完整代码请登录后点击上方下载按钮下载查看