html的c3loading大全

最新推荐文章于 2021-06-09 23:45:25 发布
最新推荐文章于 2021-06-09 23:45:25 发布
阅读量466 收藏
点赞数
文章标签： c3loading loading大全
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuggs_/article/details/103503430
版权

整理了一份c3loading大全，直接复制进html即可。。。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>CSS加载动画</title>

  <style>
    body {
      background-color: #fff;
      min-height: 100vh;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-content: space-around;
    }

    section {
      flex: 1 1 25%;
    }
    section>div{
      margin:auto;
    }

    .sk-rotating-plane {
      width: 4em;
      height: 4em;
      margin: auto;
      background-color: #337ab7;
      -webkit-animation: sk-rotating-plane 1.2s infinite ease-in-out;
      animation: sk-rotating-plane 1.2s infinite ease-in-out;
    }

    @-webkit-keyframes sk-rotating-plane {
      0% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      }

      50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      }

      100% {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      }
    }

    @keyframes sk-rotating-plane {
      0% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      }

      50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      }

      100% {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      }
    }

    .sk-double-bounce {
      width: 4em;
      height: 4em;
      position: relative;
      margin: auto;
    }

    .sk-double-bounce .sk-child {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #337ab7;
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-animation: sk-double-bounce 2.0s infinite ease-in-out;
      animation: sk-double-bounce 2.0s infinite ease-in-out;
    }

    .sk-double-bounce .sk-double-bounce-2 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }

    @-webkit-keyframes sk-double-bounce {

      0%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      50% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    @keyframes sk-double-bounce {

      0%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      50% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    .sk-wave {
      width: 6em;
      height: 4em;
      margin: auto;
      text-align: center;
      font-size: 1em;
    }

    .sk-wave .sk-rect {
      background-color: #337ab7;
      height: 100%;
      width: .5em;
      display: inline-block;
      -webkit-animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
      animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
    }

    .sk-wave .sk-rect-1 {
      -webkit-animation-delay: -1.2s;
      animation-delay: -1.2s;
    }

    .sk-wave .sk-rect-2 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }

    .sk-wave .sk-rect-3 {
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }

    .sk-wave .sk-rect-4 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    .sk-wave .sk-rect-5 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }

    @-webkit-keyframes sk-wave-stretch-delay {

      0%,
      40%,
      100% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
      }

      20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
      }
    }

    @keyframes sk-wave-stretch-delay {

      0%,
      40%,
      100% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
      }

      20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
      }
    }

    .sk-wandering-cubes {
      width: 4em;
      height: 4em;
      position: relative;
      margin: auto;
    }

    .sk-wandering-cubes .sk-cube {
      background-color: #337ab7;
      width: 1em;
      height: 1em;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both;
      animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both;
    }

    .sk-wandering-cubes .sk-cube-2 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    @-webkit-keyframes sk-wandering-cubes {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      25% {
        -webkit-transform: translateX(2em) rotate(-90deg) scale(0.5);
        transform: translateX(2em) rotate(-90deg) scale(0.5);
      }

      50% {
        /* Hack to make FF rotate in the right direction */
        -webkit-transform: translateX(2em) translateY(2em) rotate(-179deg);
        transform: translateX(2em) translateY(2em) rotate(-179deg);
      }

      50.1% {
        -webkit-transform: translateX(2em) translateY(2em) rotate(-180deg);
        transform: translateX(2em) translateY(2em) rotate(-180deg);
      }

      75% {
        -webkit-transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
        transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
      }

      100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
      }
    }

    @keyframes sk-wandering-cubes {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      25% {
        -webkit-transform: translateX(2em) rotate(-90deg) scale(0.5);
        transform: translateX(2em) rotate(-90deg) scale(0.5);
      }

      50% {
        /* Hack to make FF rotate in the right direction */
        -webkit-transform: translateX(2em) translateY(2em) rotate(-179deg);
        transform: translateX(2em) translateY(2em) rotate(-179deg);
      }

      50.1% {
        -webkit-transform: translateX(2em) translateY(2em) rotate(-180deg);
        transform: translateX(2em) translateY(2em) rotate(-180deg);
      }

      75% {
        -webkit-transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
        transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
      }

      100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
      }
    }

    .sk-spinner-pulse {
      width: 4em;
      height: 4em;
      margin: auto;
      background-color: #337ab7;
      border-radius: 100%;
      -webkit-animation: sk-spinner-pulse 1.0s infinite ease-in-out;
      animation: sk-spinner-pulse 1.0s infinite ease-in-out;
    }

    @-webkit-keyframes sk-spinner-pulse {
      0% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
      }
    }

    @keyframes sk-spinner-pulse {
      0% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
      }
    }

    .sk-chasing-dots {
      width: 4em;
      height: 4em;
      position: relative;
      margin: auto;
      text-align: center;
      -webkit-animation: sk-chasing-dots-rotate 2s infinite linear;
      animation: sk-chasing-dots-rotate 2s infinite linear;
    }

    .sk-chasing-dots .sk-child {
      width: 2em;
      height: 2em;
      display: inline-block;
      position: absolute;
      top: 0;
      background-color: #337ab7;
      border-radius: 100%;
      -webkit-animation: sk-chasing-dots-bounce 2s infinite ease-in-out;
      animation: sk-chasing-dots-bounce 2s infinite ease-in-out;
    }

    .sk-chasing-dots .sk-dot-2 {
      top: auto;
      bottom: 0;
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }

    @-webkit-keyframes sk-chasing-dots-rotate {
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes sk-chasing-dots-rotate {
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @-webkit-keyframes sk-chasing-dots-bounce {

      0%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      50% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    @keyframes sk-chasing-dots-bounce {

      0%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      50% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    .sk-three-bounce {
      width: 8em;
      margin: auto;
      text-align: center;
    }

    .sk-three-bounce .sk-child {
      width: 2em;
      height: 2em;
      background-color: #337ab7;
      border-radius: 100%;
      display: inline-block;
      -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
      animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
    }

    .sk-three-bounce .sk-bounce-1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }

    .sk-three-bounce .sk-bounce-2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }

    @-webkit-keyframes sk-three-bounce {

      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      40% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    @keyframes sk-three-bounce {

      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      40% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    .sk-circle-bounce {
      width: 4em;
      height: 4em;
      position: relative;
      margin: auto;
    }

    .sk-circle-bounce .sk-child {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }

    .sk-circle-bounce .sk-child:before {
      content: '';
      display: block;
      margin: 0 auto;
      width: 15%;
      height: 15%;
      background-color: #337ab7;
      border-radius: 100%;
      -webkit-animation: sk-circle-bounce-delay 1.2s infinite ease-in-out both;
      animation: sk-circle-bounce-delay 1.2s infinite ease-in-out both;
    }

    .sk-circle-bounce .sk-circle-2 {
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
    }

    .sk-circle-bounce .sk-circle-3 {
      -webkit-transform: rotate(60deg);
      transform: rotate(60deg);
    }

    .sk-circle-bounce .sk-circle-4 {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }

    .sk-circle-bounce .sk-circle-5 {
      -webkit-transform: rotate(120deg);
      transform: rotate(120deg);
    }

    .sk-circle-bounce .sk-circle-6 {
      -webkit-transform: rotate(150deg);
      transform: rotate(150deg);
    }

    .sk-circle-bounce .sk-circle-7 {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }

    .sk-circle-bounce .sk-circle-8 {
      -webkit-transform: rotate(210deg);
      transform: rotate(210deg);
    }

    .sk-circle-bounce .sk-circle-9 {
      -webkit-transform: rotate(240deg);
      transform: rotate(240deg);
    }

    .sk-circle-bounce .sk-circle-10 {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
    }

    .sk-circle-bounce .sk-circle-11 {
      -webkit-transform: rotate(300deg);
      transform: rotate(300deg);
    }

    .sk-circle-bounce .sk-circle-12 {
      -webkit-transform: rotate(330deg);
      transform: rotate(330deg);
    }

    .sk-circle-bounce .sk-circle-2:before {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }

    .sk-circle-bounce .sk-circle-3:before {
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }

    .sk-circle-bounce .sk-circle-4:before {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    .sk-circle-bounce .sk-circle-5:before {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }

    .sk-circle-bounce .sk-circle-6:before {
      -webkit-animation-delay: -0.7s;
      animation-delay: -0.7s;
    }

    .sk-circle-bounce .sk-circle-7:before {
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }

    .sk-circle-bounce .sk-circle-8:before {
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
    }

    .sk-circle-bounce .sk-circle-9:before {
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }

    .sk-circle-bounce .sk-circle-10:before {
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }

    .sk-circle-bounce .sk-circle-11:before {
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
    }

    .sk-circle-bounce .sk-circle-12:before {
      -webkit-animation-delay: -0.1s;
      animation-delay: -0.1s;
    }

    @-webkit-keyframes sk-circle-bounce-delay {

      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      40% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    @keyframes sk-circle-bounce-delay {

      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      40% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }
    }

    .sk-cube-grid {
      width: 4em;
      height: 4em;
      margin: auto;
      /*
   * Spinner positions
   * 1 2 3
   * 4 5 6
   * 7 8 9
   */
    }

    .sk-cube-grid .sk-cube {
      width: 33%;
      height: 33%;
      background-color: #337ab7;
      float: left;
      -webkit-animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
      animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
    }

    .sk-cube-grid .sk-cube-1 {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }

    .sk-cube-grid .sk-cube-2 {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }

    .sk-cube-grid .sk-cube-3 {
      -webkit-animation-delay: 0.4s;
      animation-delay: 0.4s;
    }

    .sk-cube-grid .sk-cube-4 {
      -webkit-animation-delay: 0.1s;
      animation-delay: 0.1s;
    }

    .sk-cube-grid .sk-cube-5 {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }

    .sk-cube-grid .sk-cube-6 {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }

    .sk-cube-grid .sk-cube-7 {
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
    }

    .sk-cube-grid .sk-cube-8 {
      -webkit-animation-delay: 0.1s;
      animation-delay: 0.1s;
    }

    .sk-cube-grid .sk-cube-9 {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }

    @-webkit-keyframes sk-cube-grid-scale-delay {

      0%,
      70%,
      100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
      }

      35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
      }
    }

    @keyframes sk-cube-grid-scale-delay {

      0%,
      70%,
      100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
      }

      35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
      }
    }

    .sk-fading-circle {
      width: 4em;
      height: 4em;
      position: relative;
      margin: auto;
    }

    .sk-fading-circle .sk-circle {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }

    .sk-fading-circle .sk-circle:before {
      content: '';
      display: block;
      margin: 0 auto;
      width: 15%;
      height: 15%;
      background-color: #ccc;
      border-radius: 100%;
      -webkit-animation: sk-fading-circle-delay 1.2s infinite ease-in-out both;
      animation: sk-fading-circle-delay 1.2s infinite ease-in-out both;
    }

    .sk-fading-circle .sk-circle-2 {
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
    }

    .sk-fading-circle .sk-circle-3 {
      -webkit-transform: rotate(60deg);
      transform: rotate(60deg);
    }

    .sk-fading-circle .sk-circle-4 {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }

    .sk-fading-circle .sk-circle-5 {
      -webkit-transform: rotate(120deg);
      transform: rotate(120deg);
    }

    .sk-fading-circle .sk-circle-6 {
      -webkit-transform: rotate(150deg);
      transform: rotate(150deg);
    }

    .sk-fading-circle .sk-circle-7 {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }

    .sk-fading-circle .sk-circle-8 {
      -webkit-transform: rotate(210deg);
      transform: rotate(210deg);
    }

    .sk-fading-circle .sk-circle-9 {
      -webkit-transform: rotate(240deg);
      transform: rotate(240deg);
    }

    .sk-fading-circle .sk-circle-10 {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
    }

    .sk-fading-circle .sk-circle-11 {
      -webkit-transform: rotate(300deg);
      transform: rotate(300deg);
    }

    .sk-fading-circle .sk-circle-12 {
      -webkit-transform: rotate(330deg);
      transform: rotate(330deg);
    }

    .sk-fading-circle .sk-circle-2:before {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }

    .sk-fading-circle .sk-circle-3:before {
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }

    .sk-fading-circle .sk-circle-4:before {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    .sk-fading-circle .sk-circle-5:before {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }

    .sk-fading-circle .sk-circle-6:before {
      -webkit-animation-delay: -0.7s;
      animation-delay: -0.7s;
    }

    .sk-fading-circle .sk-circle-7:before {
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }

    .sk-fading-circle .sk-circle-8:before {
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
    }

    .sk-fading-circle .sk-circle-9:before {
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }

    .sk-fading-circle .sk-circle-10:before {
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }

    .sk-fading-circle .sk-circle-11:before {
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
    }

    .sk-fading-circle .sk-circle-12:before {
      -webkit-animation-delay: -0.1s;
      animation-delay: -0.1s;
    }

    @-webkit-keyframes sk-fading-circle-delay {

      0%,
      39%,
      100% {
        opacity: 0;
      }

      40% {
        opacity: 1;
      }
    }

    @keyframes sk-fading-circle-delay {

      0%,
      39%,
      100% {
        opacity: 0;
      }

      40% {
        opacity: 1;
      }
    }

    .sk-folding-cube {
      width: 4em;
      height: 4em;
      position: relative;
      margin: auto;
      -webkit-transform: rotateZ(45deg);
      transform: rotateZ(45deg);
    }

    .sk-folding-cube .sk-cube {
      float: left;
      width: 50%;
      height: 50%;
      position: relative;
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }

    .sk-folding-cube .sk-cube:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #337ab7;
      -webkit-animation: sk-folding-cube-angle 2.4s infinite linear both;
      animation: sk-folding-cube-angle 2.4s infinite linear both;
      -webkit-transform-origin: 100% 100%;
      transform-origin: 100% 100%;
    }

    .sk-folding-cube .sk-cube-2 {
      -webkit-transform: scale(1.1) rotateZ(90deg);
      transform: scale(1.1) rotateZ(90deg);
    }

    .sk-folding-cube .sk-cube-3 {
      -webkit-transform: scale(1.1) rotateZ(180deg);
      transform: scale(1.1) rotateZ(180deg);
    }

    .sk-folding-cube .sk-cube-4 {
      -webkit-transform: scale(1.1) rotateZ(270deg);
      transform: scale(1.1) rotateZ(270deg);
    }

    .sk-folding-cube .sk-cube-2:before {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }

    .sk-folding-cube .sk-cube-3:before {
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
    }

    .sk-folding-cube .sk-cube-4:before {
      -webkit-animation-delay: 0.9s;
      animation-delay: 0.9s;
    }

    @-webkit-keyframes sk-folding-cube-angle {

      0%,
      10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
      }

      25%,
      75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
      }

      90%,
      100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
      }
    }

    @keyframes sk-folding-cube-angle {

      0%,
      10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
      }

      25%,
      75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
      }

      90%,
      100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
      }
    }
    .csshub-loading {
		width: 50px;margin:auto;
		height: 50px;
		position: relative;
	}
	.csshub-loading:before {
		content: '';
		width: 50px;
		height: 5px;
		background: #000;
		opacity: 0.1;
		position: absolute;
		top: 59px;
		left: 0;
		border-radius: 50%;
		animation: csshub-shadow .5s linear infinite;
		-webkit-animation:  csshub-shadow .5s linear infinite;
	}
	.csshub-loading:after {
		content: '';
		width: 50px;
		height: 50px;
		background: #337ab7;
		animation: csshub-animate .5s linear infinite;
		-webkit-animation: csshub-animate .5s linear infinite;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 3px;
	}
	@keyframes csshub-animate {
		17% {
			border-bottom-right-radius: 3px;
		}
		25% {
		transform: translateY(9px) rotate(22.5deg);
			}
		50% {
			transform: translateY(18px) scale(1, 0.9) rotate(45deg);
			border-bottom-right-radius: 40px;
		}
		75% {
			transform: translateY(9px) rotate(67.5deg);
		}
		100% {
			transform: translateY(0) rotate(90deg);
		}
	}
	@-webkit-keyframes csshub-animate {
		17% {
			border-bottom-right-radius: 3px;
		}
		25% {
			transform: translateY(9px) rotate(22.5deg);
		}
		50% {
			transform: translateY(18px) scale(1, 0.9) rotate(45deg);
			border-bottom-right-radius: 40px;
		}
		75% {
			transform: translateY(9px) rotate(67.5deg);
		}
		100% {
			transform: translateY(0) rotate(90deg);
		}
	}
	@keyframes csshub-shadow {
		0%,
		100% {
			transform: scale(1, 1);
		}
		50% {
			transform: scale(1.2, 1);
		}
	}
	@-webkit-keyframes csshub-shadow {
		0%,
		100% {
			transform: scale(1, 1);
		}
		50% {
			transform: scale(1.2, 1);
		}
  }
  .csshub-page{
    width:30px;
  }
  .csshub-circle-loader {
		display: block;
		width: 64px;
		height: 64px;
		-webkit-transform-origin: 16px 16px;
		transform-origin: 16px 16px;
		-webkit-animation: csshub-rotate-animation 5s infinite;
		animation: csshub-rotate-animation 5s infinite;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
	}
	.csshub-circle-loader .csshub-circle {
		-webkit-animation: move-animation 2.5s infinite;
		animation: move-animation 2.5s infinite;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		position: absolute;
		left: 50%;
		top: 50%;
	}
	.csshub-circle-loader .csshub-circle-line {
		width: 64px;
		height: 24px;
		position: absolute;
		top: 4px;
		left: 0;
		-webkit-transform-origin: 4px 4px;
		transform-origin: 4px 4px;
	}
	.csshub-circle-loader .csshub-circle-line:nth-child(0) {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	.csshub-circle-loader .csshub-circle-line:nth-child(1) {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.csshub-circle-loader .csshub-circle-line:nth-child(2) {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	.csshub-circle-loader .csshub-circle-line:nth-child(3) {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg);
	}
	.csshub-circle-loader .csshub-circle-line .csshub-circle:nth-child(1) {
		width: 8px;
		height: 8px;
		top: 50%;
		left: 50%;
		margin-top: -4px;
		margin-left: -4px;
		border-radius: 4px;
		-webkit-animation-delay: -0.3s;
		animation-delay: -0.3s;
	}
	.csshub-circle-loader .csshub-circle-line .csshub-circle:nth-child(2) {
		width: 16px;
		height: 16px;
		top: 50%;
		left: 50%;
		margin-top: -8px;
		margin-left: -8px;
		border-radius: 8px;
		-webkit-animation-delay: -0.6s;
		animation-delay: -0.6s;
	}
	.csshub-circle-loader .csshub-circle-line .csshub-circle:nth-child(3) {
		width: 24px;
		height: 24px;
		top: 50%;
		left: 50%;
		margin-top: -12px;
		margin-left: -12px;
		border-radius: 12px;
		-webkit-animation-delay: -0.9s;
		animation-delay: -0.9s;
	}
	.csshub-circle-loader .csshub-circle-blue {
		background-color: #1f4e5a;
	}
	.csshub-circle-loader .csshub-circle-red {
		background-color: #ff5955;
	}
	.csshub-circle-loader .csshub-circle-yellow {
		background-color: #ffb265;
	}
	.csshub-circle-loader .csshub-circle-green {
		background-color: #00a691;
	}
	@-webkit-keyframes csshub-rotate-animation {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	@keyframes csshub-rotate-animation {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	@-webkit-keyframes move-animation {
		0% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
		25% {
			-webkit-transform: translate(-64px, 0);
			transform: translate(-64px, 0);
		}
		75% {
			-webkit-transform: translate(32px, 0);
			transform: translate(32px, 0);
		}
		100% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
	}
	@keyframes move-animation {
		0% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
		25% {
			-webkit-transform: translate(-64px, 0);
			transform: translate(-64px, 0);
		}
		75% {
			-webkit-transform: translate(32px, 0);
			transform: translate(32px, 0);
		}
		100% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
  }
  .csshub-loading {
		position: relative;
		width: 100px;
		height: 100px;
		margin: 0 auto
	}
	.csshub-loading span {
		display: block;
		position: absolute;
		width: 50%;
		height: 50%;
	}
	.csshub-loading span:nth-child(1) {
		top: 0;
		left: 0;
		background-color: rgba(66, 133, 244, 0.75);
		-webkit-animation: csshub-move1 2s linear infinite;
		animation: csshub-move1 2s linear infinite;
	}
	.csshub-loading span:nth-child(2) {
		top: 0;
		right: 0;
		background-color: rgba(219, 68, 55, 0.75);
		-webkit-animation: csshub-move2 2s linear infinite;
		animation: csshub-move2 2s linear infinite;
	}
	.csshub-loading span:nth-child(3) {
		bottom: 0;
		left: 0;
		background-color: rgba(244, 180, 0, 0.75);
		-webkit-animation: csshub-move3 2s linear infinite;
		animation: csshub-move3 2s linear infinite;
	}
	.csshub-loading span:nth-child(4) {
		bottom: 0;
		right: 0;
		background-color: rgba(15, 157, 88, 0.75);
		-webkit-animation: csshub-move4 2s linear infinite;
		animation: csshub-move4 2s linear infinite;
	}
	@-webkit-keyframes csshub-move1 {
		0% {
			-webkit-transform: translate(0);
			transform: translate(0);
			z-index: 10;
		}
		25% {
			-webkit-transform: translate(100%, 0);
			transform: translate(100%, 0);
		}
		50% {
			-webkit-transform: translate(100%, 100%);
			transform: translate(100%, 100%);
		}
		75% {
			-webkit-transform: translate(0, 100%);
			transform: translate(0, 100%);
			z-index: 0;
		}
		100% {
			-webkit-transform: translate(0);
			transform: translate(0);
		}
	}
 
	@keyframes csshub-move1 {
		0% {
			-webkit-transform: translate(0);
			transform: translate(0);
			z-index: 10;
		}
		25% {
			-webkit-transform: translate(100%, 0);
			transform: translate(100%, 0);
		}
		50% {
			-webkit-transform: translate(100%, 100%);
			transform: translate(100%, 100%);
		}
		75% {
			-webkit-transform: translate(0, 100%);
			transform: translate(0, 100%);
			z-index: 0;
		}
		100% {
			-webkit-transform: translate(0);
			transform: translate(0);
		}
	}
	@-webkit-keyframes csshub-move2 {
		0% {
			-webkit-transform: translate(0);
			transform: translate(0);
		}
		25% {
			-webkit-transform: translate(0, 100%);
			transform: translate(0, 100%);
		}
		50% {
			-webkit-transform: translate(-100%, 100%);
			transform: translate(-100%, 100%);
			z-index: 0;
		}
		75% {
			-webkit-transform: translate(-100%, 0);
			transform: translate(-100%, 0);
			z-index: 10;
		}
		100% {
			-webkit-transform: translate(0);
			transform: translate(0);
		}
	}
	@keyframes csshub-move2 {
		0% {
			-webkit-transform: translate(0);
			transform: translate(0);
		}
		25% {
			-webkit-transform: translate(0, 100%);
			transform: translate(0, 100%);
		}
		50% {
			-webkit-transform: translate(-100%, 100%);
			transform: translate(-100%, 100%);
			z-index: 0;
		}
		75% {
			-webkit-transform: translate(-100%, 0);
			transform: translate(-100%, 0);
			z-index: 10;
		}
		100% {
			-webkit-transform: translate(0);
			transform: translate(0);
		}
	}
	@-webkit-keyframes csshub-move3 {
		0% {
			-webkit-transform: translate(0);
			transform: translate(0);
		}
		25% {
			-webkit-transform: translate(0, -100%);
			transform: translate(0, -100%);
			z-index: 10;
		}
		50% {
			-webkit-transform: translate(100%, -100%);
			transform: translate(100%, -100%);
		}
		75% {
			-webkit-transform: translate(100%, 0);
			transform: translate(100%, 0);
		}
		100% {
			-webkit-transform: translate(0);
			transform: translate(0);
			z-index: 0;
		}
	}
	@keyframes csshub-move3 {
		0% {
			-webkit-transform: translate(0);
			transform: translate(0);
		}
		25% {
			-webkit-transform: translate(0, -100%);
			transform: translate(0, -100%);
			z-index: 10;
		}
		50% {
			-webkit-transform: translate(100%, -100%);
			transform: translate(100%, -100%);
		}
		75% {
			-webkit-transform: translate(100%, 0);
			transform: translate(100%, 0);
		}
		100% {
			-webkit-transform: translate(0);
			transform: translate(0);
			z-index: 0;
		}
	}
	@-webkit-keyframes csshub-move4 {
		0% {
			-webkit-transform: translate(0);
			transform: translate(0);
		}
		25% {
			-webkit-transform: translate(-100%, 0);
			transform: translate(-100%, 0);
			z-index: 0;
		}
		50% {
			-webkit-transform: translate(-100%, -100%);
			transform: translate(-100%, -100%);
			z-index: 10;
		}
		75% {
			-webkit-transform: translate(0, -100%);
			transform: translate(0, -100%);
		}
		100% {
			-webkit-transform: translate(0);
			transform: translate(0);
		}
	}
	@keyframes csshub-move4 {
		0% {
			-webkit-transform: translate(0);
			transform: translate(0);
		}
		25% {
			-webkit-transform: translate(-100%, 0);
			transform: translate(-100%, 0);
			z-index: 0;
		}
		50% {
			-webkit-transform: translate(-100%, -100%);
			transform: translate(-100%, -100%);
			z-index: 10;
		}
		75% {
			-webkit-transform: translate(0, -100%);
			transform: translate(0, -100%);
		}
		100% {
			-webkit-transform: translate(0);
			transform: translate(0);
		}
  }
  .csshub-loading-text {
		text-align: center;
	}
	.csshub-loading-text span {
		display: inline-block;
		margin: 0 5px;
		color: #337ab7;
	}
	.csshub-loading-text span:nth-child(1) {
		-webkit-filter: blur(0px);
		filter: blur(0px);
		-webkit-animation: csshub-blur-text 1.5s 0s infinite linear alternate;
		animation: csshub-blur-text 1.5s 0s infinite linear alternate;
	}
	.csshub-loading-text span:nth-child(2) {
		-webkit-filter: blur(0px);
		filter: blur(0px);
		-webkit-animation: csshub-blur-text 1.5s 0.2s infinite linear alternate;
		animation: csshub-blur-text 1.5s 0.2s infinite linear alternate;
	}
	.csshub-loading-text span:nth-child(3) {
		-webkit-filter: blur(0px);
		filter: blur(0px);
		-webkit-animation: csshub-blur-text 1.5s 0.4s infinite linear alternate;
		animation: csshub-blur-text 1.5s 0.4s infinite linear alternate;
	}
	.csshub-loading-text span:nth-child(4) {
		-webkit-filter: blur(0px);
		filter: blur(0px);
		-webkit-animation: csshub-blur-text 1.5s 0.6s infinite linear alternate;
		animation: csshub-blur-text 1.5s 0.6s infinite linear alternate;
	}
	.csshub-loading-text span:nth-child(5) {
		-webkit-filter: blur(0px);
		filter: blur(0px);
		-webkit-animation: csshub-blur-text 1.5s 0.8s infinite linear alternate;
		animation: csshub-blur-text 1.5s 0.8s infinite linear alternate;
	}
	.csshub-loading-text span:nth-child(6) {
		-webkit-filter: blur(0px);
		filter: blur(0px);
		-webkit-animation: csshub-blur-text 1.5s 1s infinite linear alternate;
		animation: csshub-blur-text 1.5s 1s infinite linear alternate;
	}
	.csshub-loading-text span:nth-child(7) {
		-webkit-filter: blur(0px);
		filter: blur(0px);
		-webkit-animation: csshub-blur-text 1.5s 1.2s infinite linear alternate;
		animation: csshub-blur-text 1.5s 1.2s infinite linear alternate;
	}
	@-webkit-keyframes csshub-blur-text {
		0% {
			-webkit-filter: blur(0px);
			filter: blur(0px);
		}
		100% {
			-webkit-filter: blur(4px);
			filter: blur(4px);
		}
	}
	@keyframes csshub-blur-text {
		0% {
			-webkit-filter: blur(0px);
			filter: blur(0px);
		}
		100% {
			-webkit-filter: blur(4px);
			filter: blur(4px);
		}
  }
  .csshub-loader {
		background: transparent;
		margin: 50px auto;
		width: 100px;
		height: 100px;
		animation: spin 8s infinite;
		-webkit-animation: spin 8s infinite;
	}
	.csshub-square {
		background: #FA8D62;
		border-radius: 5px;
		float: left;
		clear: right;
		margin: 3px;
		width: 27px;
		height: 27px;
		animation: disappear alternate 800ms infinite;
		-webkit-animation: disappear alternate 800ms infinite;
	}
	.csshub-loader .csshub-square:nth-child(1) {
		animation-delay: 200ms;
		-webkit-animation-delay: 200ms;
	}
	.csshub-loader .csshub-square:nth-child(2) { 
		animation-delay: 400ms; 
		-webkit-animation-delay: 400ms; 
	}
	.csshub-loader .csshub-square:nth-child(3) { 
		animation-delay: 600ms; 
		-webkit-animation-delay: 600ms; 
	}
	.csshub-loader .csshub-square:nth-child(4) {
		animation-delay: 400ms; 
		-webkit-animation-delay: 400ms; 
	}
	.csshub-loader .csshub-square:nth-child(5) {
		animation-delay: 600ms; 
		-webkit-animation-delay: 600ms; 
	}
	.csshub-loader .csshub-square:nth-child(6) {
		animation-delay: 800ms; 
		-webkit-animation-delay: 800ms; 
	}
	.csshub-loader .csshub-square:nth-child(7) {
		animation-delay: 600ms; 
		-webkit-animation-delay: 600ms; 
	}
	.csshub-loader .csshub-square:nth-child(8) {
		animation-delay: 800ms; 
		-webkit-animation-delay: 800ms; 
	}
	.csshub-loader .csshub-square:nth-child(9) {
		animation-delay: 1s; 
		-webkit-animation-delay: 1s; 
	}
	@keyframes disappear {
		0% {
			background-color: #FA8D62;
			transform: scale(1, 1);
		}
		100% {
			background-color : #FFDE3F;
			transform: scale(0, 0);
		}
	}
	@-webkit-keyframes disappear {
		0% {
			background-color: #FA8D62;
			transform: scale(1, 1);
		}
		100% {
			background-color : #FFDE3F;
			transform: scale(0, 0);
		}
	}
	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}
		25% {
			transform: rotate(90deg);
		}
		50% {
			transform: rotate(180deg);
		}
		75% {
			transform: rotate(270deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	@-webkit-keyframes spin {
		0% {
			transform: rotate(0deg);
		}
		25% {
			transform: rotate(90deg);
		}
		50% {
			transform: rotate(180deg);
		}
		75% {
			transform: rotate(270deg);
		}
		100% {
			transform: rotate(360deg);
		}
  }
  .csshub-loading2 {
	text-align: center;
}
.csshub-loading2 > div {
	background-color: #337ab7;
	width: 4px;
	height: 35px;
	border-radius: 2px;
	margin: 2px;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	display: inline-block;
	-webkit-animation: csshub-line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
	animation: csshub-line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}
.csshub-loading2 > div:nth-child(2), .csshub-loading2 > div:nth-child(4) {
	-webkit-animation-delay: -0.4s !important;
	animation-delay: -0.4s !important;
}
.csshub-loading2 > div:nth-child(1), .csshub-loading2 > div:nth-child(5) {
	-webkit-animation-delay: -0.2s !important;
	animation-delay: -0.2s !important;
}
@-webkit-keyframes csshub-line-scale-pulse-out {
	0% {
		-webkit-transform: scaley(1);
		transform: scaley(1);
	}
	50% {
		-webkit-transform: scaley(0.4);
		transform: scaley(0.4);
	}
	100% {
		-webkit-transform: scaley(1);
		transform: scaley(1);
	}
}
@keyframes csshub-line-scale-pulse-out {
	0% {
		-webkit-transform: scaley(1);
		transform: scaley(1);
	}
	50% {
		-webkit-transform: scaley(0.4);
		transform: scaley(0.4);
	}
	100% {
		-webkit-transform: scaley(1);
		transform: scaley(1);
	}
}
.loading{
    width: 150px;
    height: 15px;
    margin: 0 auto;
    margin-top:100px;
    text-align: center;
}
.loading span{
    display: inline-block;
    width: 10%;
    height: 100%;
    margin-right: 5px;
    background: lightgreen;
    -webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child{
    margin-right: 0px; 
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
        -webkit-transform: scale(1.2);
    }
    100%{
        opacity: .2;
        -webkit-transform: scale(.2);
    }
}
.loading span:nth-child(1){
    -webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
    -webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
    -webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
    -webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
    -webkit-animation-delay:0.65s;
}
  </style>
</head>

<body>
  <!-- / 1 -->
  <section>
    <div class='sk-rotating-plane'></div>
  </section>
  <!-- / 2 -->
  <section>
    <div class='sk-double-bounce'>
      <div class='sk-child sk-double-bounce-1'></div>
      <div class='sk-child sk-double-bounce-2'></div>
    </div>
  </section>
  <!-- / 3 -->
  <section>
    <div class='sk-wave'>
      <div class='sk-rect sk-rect-1'></div>
      <div class='sk-rect sk-rect-2'></div>
      <div class='sk-rect sk-rect-3'></div>
      <div class='sk-rect sk-rect-4'></div>
      <div class='sk-rect sk-rect-5'></div>
    </div>
  </section>
  <!-- / 4 -->
  <section>
    <div class='sk-wandering-cubes'>
      <div class='sk-cube sk-cube-1'></div>
      <div class='sk-cube sk-cube-2'></div>
    </div>
  </section>
  <!-- / 5 -->
  <section>
    <div class='sk-spinner sk-spinner-pulse'></div>
  </section>
  <!-- / 6 -->
  <section>
    <div class='sk-chasing-dots'>
      <div class='sk-child sk-dot-1'></div>
      <div class='sk-child sk-dot-2'></div>
    </div>
  </section>
  <!-- / 7 -->
  <section>
    <div class='sk-three-bounce'>
      <div class='sk-bounce-1 sk-child'></div>
      <div class='sk-bounce-2 sk-child'></div>
      <div class='sk-bounce-3 sk-child'></div>
    </div>
  </section>
  <!-- / 8 -->
  <section>
    <div class='sk-circle-bounce'>
      <div class='sk-child sk-circle-1'></div>
      <div class='sk-child sk-circle-2'></div>
      <div class='sk-child sk-circle-3'></div>
      <div class='sk-child sk-circle-4'></div>
      <div class='sk-child sk-circle-5'></div>
      <div class='sk-child sk-circle-6'></div>
      <div class='sk-child sk-circle-7'></div>
      <div class='sk-child sk-circle-8'></div>
      <div class='sk-child sk-circle-9'></div>
      <div class='sk-child sk-circle-10'></div>
      <div class='sk-child sk-circle-11'></div>
      <div class='sk-child sk-circle-12'></div>
    </div>
  </section>
  <!-- / 9 -->
  <section>
    <div class='sk-cube-grid'>
      <div class='sk-cube sk-cube-1'></div>
      <div class='sk-cube sk-cube-2'></div>
      <div class='sk-cube sk-cube-3'></div>
      <div class='sk-cube sk-cube-4'></div>
      <div class='sk-cube sk-cube-5'></div>
      <div class='sk-cube sk-cube-6'></div>
      <div class='sk-cube sk-cube-7'></div>
      <div class='sk-cube sk-cube-8'></div>
      <div class='sk-cube sk-cube-9'></div>
    </div>
  </section>
  <!-- / 10 -->
  <section>
    <div class='sk-fading-circle'>
      <div class='sk-circle sk-circle-1'></div>
      <div class='sk-circle sk-circle-2'></div>
      <div class='sk-circle sk-circle-3'></div>
      <div class='sk-circle sk-circle-4'></div>
      <div class='sk-circle sk-circle-5'></div>
      <div class='sk-circle sk-circle-6'></div>
      <div class='sk-circle sk-circle-7'></div>
      <div class='sk-circle sk-circle-8'></div>
      <div class='sk-circle sk-circle-9'></div>
      <div class='sk-circle sk-circle-10'></div>
      <div class='sk-circle sk-circle-11'></div>
      <div class='sk-circle sk-circle-12'></div>
    </div>
  </section>
  <!-- / 11 -->
  <section>
    <div class='sk-folding-cube'>
      <div class='sk-cube sk-cube-1'></div>
      <div class='sk-cube sk-cube-2'></div>
      <div class='sk-cube sk-cube-4'></div>
      <div class='sk-cube sk-cube-3'></div>
    </div>
  </section>
  <section>
    <div class="csshub-loading"></div>
  </section>
  <section>
    <div class="csshub-page">
      <div class="csshub-circle-loader">
        <div class="csshub-circle-line">
        <div class="csshub-circle csshub-circle-blue"></div>
        <div class="csshub-circle csshub-circle-blue"></div>
        <div class="csshub-circle csshub-circle-blue"></div>
      </div>
      <div class="csshub-circle-line">
        <div class="csshub-circle csshub-circle-yellow"></div>
        <div class="csshub-circle csshub-circle-yellow"></div>
        <div class="csshub-circle csshub-circle-yellow"></div>
      </div>
      <div class="csshub-circle-line">
        <div class="csshub-circle csshub-circle-red"></div>
        <div class="csshub-circle csshub-circle-red"></div>
        <div class="csshub-circle csshub-circle-red"></div>
      </div>
      <div class="csshub-circle-line">
        <div class="csshub-circle csshub-circle-green"></div>
        <div class="csshub-circle csshub-circle-green"></div>
        <div class="csshub-circle csshub-circle-green"></div>
      </div>
    </div>
  </section>
  <section>
    <div class="csshub-loading-text">
      <span>L</span>
      <span>O</span>
      <span>A</span>
      <span>D</span>
      <span>I</span>
      <span>N</span>
      <span>G</span>
    </div>
  </section>
  <section>
    <div class="csshub-loader">
      <div class="csshub-square"></div>
      <div class="csshub-square"></div>
      <div class="csshub-square"></div>
      <div class="csshub-square"></div>
      <div class="csshub-square"></div>
      <div class="csshub-square"></div>
      <div class="csshub-square"></div>
      <div class="csshub-square"></div>
      <div class="csshub-square"></div>
    </div>
  </section>
  <section>
    <div class="csshub-loading2">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </section>
  <section>
    <div class="loading">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </section>
</body>

</html>

 

zuggs_
关注
CSS3实现Loading加载动画特效大全
u013683592的专栏
02-17 1611
目前大部分WEB开发加载(loading)特效是采用gif图片形式展现，随着HTML5+CSS3技术的成熟，纯CSS3版本的Loading加载动画效果已经可以比拟gif动画效果，当然是需要浏览器的兼容性要好，下面我们介绍8款CSS3 Loading加载动画效果。 .spinner { margin: 100px auto; width: 50px; height: 6
c3p0数据库连接池死锁问题和mysql重连，连接丢失
热门推荐
西楚小羽的专栏
08-31 1万+
最近项目中用的C3P0连接池出现各种bug，现在记录一下。 1、经常报连接池死锁 2016-08-31 15:24:00 [ WARN] - [com.mchange.v2.async.ThreadPoolAsynchronousRunner|run] - com.mchange.v2.async.ThreadPoolAsynchronousRunner$DeadlockDetector@74
loading图标大全
05-13
...............................................................
c3动画写的加载中
王永存
01-26 1153
<div class="loading"> <div class="wrapper"> <i>加载中...</i> <div id="preloader6"> <span></span> <span></span> ...
c3中基本动画
weixin_33963594的博客
03-27 285
动画：是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果；. 必要元素： a、通过@keyframes指定动画序列；自动补间动画，确定两个点，系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧 b、通过百分比将动画序列分割成多个节点； c、在各节点中分别定义各属性 d、通过animation将动画应用于相应元...
html如何添加时钟效果,基于HTML5+CSS3实现简单的时钟效果
weixin_29051245的博客
06-03 319
目的：利用html5，css实现钟摆效果知识点：1) 利用position/left/top和calc()实现元素的水平和垂直居中；2) 利用CSS3的animation/transform/transform-origin属性定义动画；3) 利用transform-origin实现旋转原点的圆心调整废话不多说了，直接看代码吧，具体代码如下所示：li{list-style:none;}#box{w...
酷炫 html5页面加载 loading动画效果 demo 基于原生无第三方依赖
01-04
本示例"酷炫html5页面加载loading动画效果demo"是基于原生JavaScript和CSS实现的，无需任何第三方库，简化了开发流程，提高了性能。 首先，我们来详细了解一下如何实现这种加载动画。在HTML结构中，我们需要在`...
基于HTML5的电商网站的设计与开发
03-09
此外，可能还涉及了优化加载性能的策略，如延迟加载（lazy loading）和图片压缩，以及对SEO（搜索引擎优化）友好的编码实践。 总的来说，"基于HTML5的电商网站的设计与开发"是一个综合性的课题，涉及到前端开发的多...
HTML5 CSS3 ： 进度条的实现实例源码
07-12
在提供的源码中，`11_loading`文件很可能是包含这个进度条实现的具体HTML和CSS代码。通过分析这些代码，你可以进一步了解和学习如何将理论知识应用到实际项目中。 总的来说，HTML5的`<progress>`元素和CSS3的样式...
angularjs拦截器实现loading
timeless的博客
03-07 4171
.mask-loading .loading-icon { -webkit-animation: rotate 1s linear infinite; -o-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite;
Loading全套样式资源文件
01-11
适用于winform、wpf、java等各种语言下的开发资源；主要提供全套等待界面UI，基本涵盖目前现有系统所有Loading
收集一些HTML5网页加载动画（Loading）.rar
07-10
收集一些基于HTML5技术生成的网页动画加载动画，canvas loaders，也就是大家所熟悉的网页Loading特效，这个不是真正的Loading，是基于CSS3绘制出来的Loading动画效果，可用于网页Loading中，这些小动画个个都十分精致，动画效果平滑流畅，实属精品。
常用loading,gif图片大全
03-24
常用loading,gif图片大全常用loading,gif图片大全常用loading,gif图片大全常用loading,gif图片大全
50个Loading动态图
05-28
50个用于加载数据的时候使用的动态刷新样式。
loading加载事件的动画
weixin_44540436的博客
01-20 918
作者：马光佳 撰写时间：2019.1.20 1、搭建结构的HTML代码如下： @*背景渐变*@ &amp;amp;lt;div class=&amp;quot;wrapper&amp;quot;&amp;amp;gt; @*文字*@ &amp;amp;lt;div class=&amp;quot;logo&amp;quot;&amp;amp;gt;loading&amp;amp;lt;/div&amp
[转载]HTML5+CSS3 最酷的 loading 效果大全
suxue1994的博客
05-03 330
原文地址：HTML5+CSS3 最酷的 loading 效果大全作者： 网页设计自学平台 用 gif 图片来做 loading 的时代已经过去了，它显得太 low 了，而用 HTML5/CSS3 以及 SVG 和 canvas 来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。 这里收集了几十个用 html5 和 css3 实现的 loading 效果，以供学习参考。...
html里c3动画是什么,C3动画+H5知识点使用总结
weixin_33787865的博客
06-09 904
概览Html5和CSS3就是在原有的基础上新加的一些特性，在前面的博客中已经用很多新特性了，Flex弹性布局大大的减少css代码，今天再总结一下工作中会用到的一些常用知识点。本编文章会讲到的知识点CSS3动画过渡、线性渐变、径向渐变动画2D动画3D动画animation动画Html5H5新增类名操作、自定义属性操作Flex布局CSS3动画过渡、线性渐变、径向渐变1.过渡transition过渡，两...
C3----几个常用的加载图标制作
weixin_34009794的博客
09-26 98
1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
html loading发散粒子,HTML5 Loading动画特效集锦
weixin_35699471的博客
06-07 416
1、HTML5 Canvas发光Loading动画之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的，整个loading动画是发光3D的视觉效果，HTML5非常强大。 2、HTML5/CSS3粒子效果进度条之前我已经分享了几款效果很不错的CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值