40款一个div+css实现的loading加载动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：40款一个div+css实现的loading加载动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Podkova:400,700'>
    <style>
        @charset "UTF-8";
    /**
     * Computes a CSS calc function that betweens a value from
     * A to B over viewport-width A to viewport-width B.
     * Requires a media query to cap the value at B.
     */
    i {
      font-style: oblique;
    }
    
    [class*=loader] {
      position: relative;
      top: 40%;
      display: inline-block;
      margin: 0 auto;
      cursor: wait;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .loader-playflix-button {
      display: flex;
      font-size: 0.75em;
      font-family: 'Podkova', serif;
      height: 3em;
      border-radius: 0.25em;
      background-color: #083D56;
      color: #19A6CF;
      overflow: hidden;
      counter-reset: playflix-counter 5;
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      border: none;
      cursor: pointer;
      transition: all 0.25s;
      -webkit-animation: playflix-text 5s linear infinite forwards;
              animation: playflix-text 5s linear infinite forwards;
    }
    .loader-playflix-button:hover {
      background-color: #0b4e66;
    }
    .loader-playflix-button:active {
      color: #fff;
    }
    .loader-playflix-button:active, .loader-playflix-button:active:after, .loader-playflix-button:active:before {
      -webkit-animation: none;
              animation: none;
    }
    .loader-playflix-button:active:before {
      background-color: #080;
      width: calc(100% + 1em);
      counter-reset: playflix-counter 0;
    }
    .loader-playflix-button:before, .loader-playflix-button:after {
      pointer-events: none;
    }
    .loader-playflix-button:before {
      content: attr(data-icon);
      font-size: 2em;
      line-height: 1.2;
      position: absolute;
      width: 0%;
      left: -0.5em;
      top: 0;
      z-index: 0;
      text-align: left;
      padding: 0.25em;
      text-indent: 0.5em;
      -webkit-animation: playflix 5s linear infinite forwards;
              animation: playflix 5s linear infinite forwards;
    }
    .loader-playflix-button:after {
      content: attr(data-label) "  " counter(playflix-counter);
      font-weight: 700;
      display: block;
      font-size: 1.5em;
      line-height: 1;
      padding: 0.5em;
      position: relative;
      white-space: nowrap;
      -webkit-animation: playflix-countdown 5s linear infinite forwards;
              animation: playflix-countdown 5s linear infinite forwards;
    }
    .loader-playflix-button[data-icon]:not([data-icon=""]):after {
      padding-left: 2em;
    }
    
    @-webkit-keyframes playflix {
      0% {
        width: 0%;
        background-color: #0E5F76;
      }
      89% {
        width: calc(100% + .5em);
        background-color: #0E5F76;
      }
      89.5%, 100% {
        width: calc(100% + .5em);
        background-color: #080;
      }
    }
    
    @keyframes playflix {
      0% {
        width: 0%;
        background-color: #0E5F76;
      }
      89% {
        width: calc(100% + .5em);
        background-color: #0E5F76;
      }
      89.5%, 100% {
        width: calc(100% + .5em);
        background-color: #080;
      }
    }
    @-webkit-keyframes playflix-countdown {
      0% {
        counter-increment: playflix-counter 0;
      }
      20% {
        counter-increment: playflix-counter -1;
      }
      40% {
        counter-increment: playflix-counter -2;
      }
      60% {
        counter-increment: playflix-counter -3;
      }
      80% {
        counter-increment: playflix-counter -4;
      }
      100% {
        counter-increment: playflix-counter -5;
      }
    }
    @keyframes playflix-countdown {
      0% {
        counter-increment: playflix-counter 0;
      }
      20% {
        counter-increment: playflix-counter -1;
      }
      40% {
        counter-increment: playflix-counter -2;
      }
      60% {
        counter-increment: playflix-counter -3;
      }
      80% {
        counter-increment: playflix-counter -4;
      }
      100% {
        counter-increment: playflix-counter -5;
      }
    }
    @-webkit-keyframes playflix-text {
      0%, 89% {
        color: #19A6CF;
      }
      89.5%, 100% {
        color: #fff;
      }
    }
    @keyframes playflix-text {
      0%, 89% {
        color: #19A6CF;
      }
      89.5%, 100% {
        color: #fff;
      }
    }
    .loader-wobble {
      font-size: 0.8em;
      top: 50%;
      display: inline-block;
      width: 5em;
      height: 1em;
      line-height: 1.3;
      position: relative;
      color: #0E5F76;
      text-align: center;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
      border-bottom: 0.1em solid;
      margin-left: -5em;
      transform: translateX(50%);
      -webkit-animation: loadingText 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, loadingBar 8s infinite cubic-bezier(0.445, 0.050, 0.550, 0.950) alternate;
              animation: loadingText 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, loadingBar 8s infinite cubic-bezier(0.445, 0.050, 0.550, 0.950) alternate;
    }
    #toggle:checked ~ #sect .loader-wobble {
      -webkit-animation: loadingTextMove 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, loadingText 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, loadingBar 8s infinite cubic-bezier(0.445, 0.050, 0.550, 0.950) alternate;
              animation: loadingTextMove 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, loadingText 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate, loadingBar 8s infinite cubic-bezier(0.445, 0.050, 0.550, 0.950) alternate;
      filter: drop-shadow(0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5));
    }
    .loader-wobble:before, .loader-wobble:after {
      content: "";
      width: 7em;
      height: 7em;
      position: absolute;
      top: -3em;
      left: -0.5em;
      right: 0;
      bottom: 0;
      border-radius: 50%;
    }
    .loader-wobble:before {
      box-shadow: inset 0 0 0 0.2em rgba(8, 61, 86, 0.5);
      -webkit-animation: loadingInner 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate;
              animation: loadingInner 1s infinite cubic-bezier(1, -2.3, 1, 2.5) alternate;
    }
    .loader-wobble:after {
      color: #083D56;
      border-radius: 50%;
      border: 0.2em dashed;
      border-top: 0.2em solid #0E5F76;
      transform-origin: center center;
      -webkit-animation: loading 1s infinite cubic-bezier(0.6, 0, 0.4, 1);
              animation: loading 1s infinite cubic-bezier(0.6, 0, 0.4, 1);
    }
    
    @-webkit-keyframes loading {
      to {
        transform: rotate(360deg);
      }
    }
    
    @keyframes loading {
      to {
        transform: rotate(360deg);
      }
    }
    @-webkit-keyframes loadingInner {
      to {
        transform: scale(0);
      }
    }
    @keyframes loadingInner {
      to {
        transform: scale(0);
      }
    }
    @-webkit-keyframes loadingText {
      0% {
        color: #0E5F76;
        width: 0em;
      }
      100% {
        color: #081E3F;
        width: 4em;
      }
    }
    @keyframes loadingText {
      0% {
        color: #0E5F76;
        width: 0em;
      }
      100% {
        color: #081E3F;
        width: 4em;
      }
    }
    @-webkit-keyframes loadingTextMove {
      0% {
        text-indent: 1em;
      }
      100% {
        text-indent: -1em;
      }
    }
    @keyframes loadingTextMove {
      0% {
        text-indent: 1em;
      }
      100% {
        text-indent: -1em;
      }
    }
    @-webkit-keyframes loadingBar {
      0% {
        width: 0em;
      }
      100% {
        width: 6em;
      }
    }
    @keyframes loadingBar {
      0% {
        width: 0em;
      }
      100% {
        width: 6em;
      }
    }
    .loader-bricks {
      position: relative;
      display: inline-block;
      font-size: 1rem;
      width: 8em;
      height: 1em;
      z-index: 1;
      border-style: solid;
      border-width: 0.1rem 0;
      color: #19A6CF;
      background-image: linear-gradient(to right, transparent 0%, transparent 49.9%, #0E5F76 50%, #0E5F76 100%);
      background-size: 25%;
      -webkit-animation: loaderBar 1s infinite linear;
              animation: loaderBar 1s infinite linear;
    }
    #toggle:checked ~ #sect .loader-bricks {
      filter: drop-shadow(0.3em 0.3em 0.3em rgba(0, 0, 0, 0.5));
    }
    .loader-bricks:before, .loader-bricks:after {
      content: "";
      position: absolute;
      right: 0;
      z-index: 0;
      width: 1em;
      height: 1em;
      margin-top: -0.1rem;
      border: 0.1rem solid #19A6CF;
      border-width: 0.1rem 0;
      color: #0E5F76;
      background-color: currentColor;
      -webkit-animation: loaderBox 2s infinite linear;
              animation: loaderBox 2s infinite linear;
    }
    .loader-bricks:after {
      -webkit-animation-delay: 1s;
              animation-delay: 1s;
    }
    
    @-webkit-keyframes loaderBar {
      0% {
        background-position-x: 0;
      }
      100% {
        background-position-x: 2em;
      }
    }
    
    @keyframes loaderBar {
      0% {
        background-position-x: 0;
      }
      100% {
        background-position-x: 2em;
      }
    }
    @-webkit-keyframes loaderBox {
      0% {
        color: #0E5F76;
        width: 1em;
        right: 0;
        top: 0;
        border-color: #19A6CF;
      }
      27% {
        color: #0E5F76;
        width: 1em;
        right: -1em;
        top: 0;
        border-color: transparent;
      }
      37.5% {
        color: #083D56;
        width: 1em;
        right: -1em;
        top: -1em;
        border-color: transparent;
      }
      50% {
        color: #083D56;
        width: 1em;
        right: 8em;
        top: -1em;
        border-color: transparent;
      }
      55% {
        color: #0E5F76;
        width: 1em;
        right: 8em;
        top: 0em;
        border-color: transparent;
      }
      100% {
        color: #0E5F76;
        width: 0em;
        right: 7em;
        top: 0;
        border-color: #19A6CF;
      }
    }
    @keyframes loaderBox {
      0% {
        color: #0E5F76;
        width: 1em;
        right: 0;
        top: 0;
        border-color: #19A6CF;
      }
      27% {
        color: #0E5F76;
        width: 1em;
        right: -1em;
        top: 0;
        border-color: transparent;
      }
      37.5% {
        color: #083D56;
        width: 1em;
        right: -1em;
        top: -1em;
        border-color: transparent;
      }
      50% {
        color: #083D56;
        width: 1em;
        right: 8em;
        top: -1em;
        border-color: transparent;
      }
      55% {
        color: #0E5F76;
        width: 1em;
        right: 8em;
        top: 0em;
        border-color: transparent;
      }
      100% {
        color: #0E5F76;
        width: 0em;
        right: 7em;
        top: 0;
        border-color: #19A6CF;
      }
    }
    .loader-funky-bar {
      display: inline-block;
      width: 5em;
      height: 1em;
      border-radius: 2px;
      position: relative;
      overflow: hidden;
      z-index: 0;
      color: #fff;
      box-shadow: 0 0 0 2px #081E3F, 0 0 0 4px #0E5F76;
    }
    #toggle:checked ~ #sect .loader-funky-bar {
      filter: drop-shadow(0.25em 0.25em 0.25em rgba(0, 0, 0, 0.5));
    }
    .loader-funky-bar:before {
      content: "loading...";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
      -webkit-animation: loaderText 1s infinite alternate cubic-bezier(0.55, 0.15, 0.45, 0.85);
              animation: loaderText 1s infinite alternate cubic-bezier(0.55, 0.15, 0.45, 0.85);
    }
    #toggle:checked ~ #sect .loader-funky-bar:before {
      -webkit-animation: loaderText 2s infinite alternate cubic-bezier(0.55, 0.15, 0.45, 0.85), textIndent 1s infinite alternate cubic-bezier(0.55, 0.15, 0.45, 0.85);
              animation: loaderText 2s infinite alternate cubic-bezier(0.55, 0.15, 0.45, 0.85), textIndent 1s infinite alternate cubic-bezier(0.55, 0.15, 0.45, 0.85);
    }
    .loader-funky-bar:after {
      content: "";
      width: 11em;
      height: 11em;
      position: absolute;
      left: -6em;
      top: -5em;
      z-index: 1;
      box-shadow: inset 0 0 0 0.5em #0E5F76, inset 0 0 0 1em #083D56, inset 0 0 0 1.5em #0E5F76, inset 0 0 0 2em #083D56, inset 0 0 0 2.5em #0E5F76, inset 0 0 0 3em #083D56, inset 0 0 0 3.5em #0E5F76, inset 0 0 0 4em #083D56, inset 0 0 0 4.5em #0E5F76, inset 0 0 0 5em #083D56, inset 0 0 0 5.5em #0E5F76, inset 0 0 0 6em #083D56;
      border-radius: 16em 14em/16em 20em;
      transform-origin: center center;
      -webkit-animation: loaderRotate 5s linear infinite, loaderMover 15s linear infinite;
              animation: loaderRotate 5s linear infinite, loaderMover 15s linear infinite;
    }
    
    @-webkit-keyframes loaderRotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    
    @keyframes loaderRotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    @-webkit-keyframes loaderMover {
      from {
        left: -11em;
      }
      to {
        left: -6em;
      }
    }
    @keyframes loaderMover {
      from {
        left: -11em;
      }
      to {
        left: -6em;
      }
    }
    @-webkit-keyframes textIndent {
      from {
        text-indent: -2em;
 .........完整代码请登录后点击上方下载按钮下载查看