Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Pre loader using pure css

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 313
    Comment on it

    Hi All,

    Below is some example of pure css loader. Using css animation. All are single element loader.

    Please, check the below code for details.

    section{
      margin: 10px 0;
    }
    .loader {
      position: absolute;
      z-index: 1;
      left: 0;
      right: 0;
      margin: 0 auto; 
    }
    
    
    .loader-1 {
      height: 100px;
    }
    .loader-1 .loader {
      width: 100px;
      height: 100px;
      background-color: #03445d;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      -o-border-radius: 100%;
      border-radius: 100%;
    }
    .loader-1 .loader:before {
      display: block;
      position: absolute;
      z-index: 2;
      left: 0;
      right: 0;
      top: 10px;
      margin: 0 auto;
      width: 20px;
      height: 20px;
      background-color: #7c7803;
      content: "";
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: 20px;
      border-radius: 20px;
      -webkit-transform-origin: 10px 40px;
      -moz-transform-origin: 10px 40px;
      -ms-transform-origin: 10px 40px;
      -o-transform-origin: 10px 40px;
      transform-origin: 10px 40px;
      -webkit-animation: loader-1 1s infinite linear;
      -moz-animation: loader-1 1s infinite linear;
      -ms-animation: loader-1 1s infinite linear;
      -o-animation: loader-1 1s infinite linear;
      animation: loader-1 1s infinite linear;
    }
    
    @-webkit-keyframes loader-1 {
      from {
        -webkit-transform: rotate(0deg);
      }
    
      to {
        -webkit-transform: rotate(360deg);
      }
    }
    
    @-moz-keyframes loader-1 {
      from {
        -moz-transform: rotate(0deg);
      }
    
      to {
        -moz-transform: rotate(360deg);
      }
    }
    
    @-ms-keyframes loader-1 {
      from {
        -ms-transform: rotate(0deg);
      }
    
      to {
        -ms-transform: rotate(360deg);
      }
    }
    
    @-o-keyframes loader-1 {
      from {
        -o-transform: rotate(0deg);
      }
    
      to {
        -o-transform: rotate(360deg);
      }
    }
    
    @keyframes loader-1 {
      from {
        transform: rotate(0deg);
      }
    
      to {
        transform: rotate(360deg);
      }
    }
    
    /* ============================================================
      loader 2
    ============================================================ */
    .loader-2 {
      height: 100px;
    }
    .loader-2 .loader {
      width: 100px;
      height: 100px;
    }
    .loader-2 .loader:before {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      border-top: solid 20px #7c7803;
      border-bottom: solid 20px #7c7803;
      border-left: solid 20px transparent;
      border-right: solid 20px transparent;
      content: "";
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      -ms-border-radius: 50px;
      -o-border-radius: 50px;
      border-radius: 50px;
      -webkit-animation: loader-2 1s infinite ease;
      -moz-animation: loader-2 1s infinite ease;
      -ms-animation: loader-2 1s infinite ease;
      -o-animation: loader-2 1s infinite ease;
      animation: loader-2 1s infinite ease;
    }
    .loader-2 .loader:after {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      width: 40px;
      height: 40px;
      background-color: #03445d;
      content: "";
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: 20px;
      border-radius: 20px;
    }
    
    @-webkit-keyframes loader-2 {
      from {
        -webkit-transform: rotate(0deg);
      }
    
      to {
        -webkit-transform: rotate(360deg);
      }
    }
    
    @-moz-keyframes loader-2 {
      from {
        -moz-transform: rotate(0deg);
      }
    
      to {
        -moz-transform: rotate(360deg);
      }
    }
    
    @-ms-keyframes loader-2 {
      from {
        -ms-transform: rotate(0deg);
      }
    
      to {
        -ms-transform: rotate(360deg);
      }
    }
    
    @-o-keyframes loader-2 {
      from {
        -o-transform: rotate(0deg);
      }
    
      to {
        -o-transform: rotate(360deg);
      }
    }
    
    @keyframes loader-2 {
      from {
        transform: rotate(0deg);
      }
    
      to {
        transform: rotate(360deg);
      }
    }
    
    /* ============================================================
      loader 3
    ============================================================ */
    .loader-3 {
      height: 100px;
    }
    .loader-3 .loader {
      width: 100px;
      height: 100px;
    }
    .loader-3 .loader:before, .loader-3 .loader:after {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
      width: 40px;
      height: 40px;
      content: "";
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: 20px;
      border-radius: 20px;
    }
    .loader-3 .loader:before {
      left: 0;
      background-color: #03445d;
      -webkit-animation: loader-3-left 1s infinite linear;
      -moz-animation: loader-3-left 1s infinite linear;
      -ms-animation: loader-3-left 1s infinite linear;
      -o-animation: loader-3-left 1s infinite linear;
      animation: loader-3-left 1s infinite linear;
    }
    .loader-3 .loader:after {
      right: 0;
      background-color: #7c7803;
      -webkit-animation: loader-3-right 1s infinite linear;
      -moz-animation: loader-3-right 1s infinite linear;
      -ms-animation: loader-3-right 1s infinite linear;
      -o-animation: loader-3-right 1s infinite linear;
      animation: loader-3-right 1s infinite linear;
    }
    
    /* left ball */
    @-webkit-keyframes loader-3-left {
      0% {
        -webkit-transform: translate(0, 0);
      }
    
      25% {
        -webkit-transform: translate(30px, 0);
      }
    
      50% {
        -webkit-transform: translate(30px, -30px);
      }
    
      75% {
        -webkit-transform: translate(30px, 0);
      }
    
      100% {
        -webkit-transform: translate(0, 0);
      }
    }
    
    @-mos-keyframes loader-3-left {
      0% {
        -mos-transform: translate(0, 0);
      }
    
      25% {
        -mos-transform: translate(30px, 0);
      }
    
      50% {
        -mos-transform: translate(30px, -30px);
      }
    
      75% {
        -mos-transform: translate(30px, 0);
      }
    
      100% {
        -mos-transform: translate(0, 0);
      }
    }
    
    @-ms-keyframes loader-3-left {
      0% {
        -ms-transform: translate(0, 0);
      }
    
      25% {
        -ms-transform: translate(30px, 0);
      }
    
      50% {
        -ms-transform: translate(30px, -30px);
      }
    
      75% {
        -ms-transform: translate(30px, 0);
      }
    
      100% {
        -ms-transform: translate(0, 0);
      }
    }
    
    @-o-keyframes loader-3-left {
      0% {
        -o-transform: translate(0, 0);
      }
    
      25% {
        -o-transform: translate(30px, 0);
      }
    
      50% {
        -o-transform: translate(30px, -30px);
      }
    
      75% {
        -o-transform: translate(30px, 0);
      }
    
      100% {
        -o-transform: translate(0, 0);
      }
    }
    
    @keyframes loader-3-left {
      0% {
        transform: translate(0, 0);
      }
    
      25% {
        transform: translate(30px, 0);
      }
    
      50% {
        transform: translate(30px, -30px);
      }
    
      75% {
        transform: translate(30px, 0);
      }
    
      100% {
        transform: translate(0, 0);
      }
    }
    
    /* right ball */
    @-webkit-keyframes loader-3-right {
      0% {
        -webkit-transform: translate(0, 0);
      }
    
      25% {
        -webkit-transform: translate(-30px, 0);
      }
    
      50% {
        -webkit-transform: translate(-30px, 30px);
      }
    
      75% {
        -webkit-transform: translate(-30px, 0);
      }
    
      100% {
        -webkit-transform: translate(0, 0);
      }
    }
    
    @-moz-keyframes loader-3-right {
      0% {
        -moz-transform: translate(0, 0);
      }
    
      25% {
        -moz-transform: translate(-30px, 0);
      }
    
      50% {
        -moz-transform: translate(-30px, 30px);
      }
    
      75% {
        -moz-transform: translate(-30px, 0);
      }
    
      100% {
        -moz-transform: translate(0, 0);
      }
    }
    
    @-ms-keyframes loader-3-right {
      0% {
        -ms-transform: translate(0, 0);
      }
    
      25% {
        -ms-transform: translate(-30px, 0);
      }
    
      50% {
        -ms-transform: translate(-30px, 30px);
      }
    
      75% {
        -ms-transform: translate(-30px, 0);
      }
    
      100% {
        -ms-transform: translate(0, 0);
      }
    }
    
    @-o-keyframes loader-3-right {
      0% {
        -o-transform: translate(0, 0);
      }
    
      25% {
        -o-transform: translate(-30px, 0);
      }
    
      50% {
        -o-transform: translate(-30px, 30px);
      }
    
      75% {
        -o-transform: translate(-30px, 0);
      }
    
      100% {
        -o-transform: translate(0, 0);
      }
    }
    
    @keyframes loader-3-right {
      0% {
        transform: translate(0, 0);
      }
    
      25% {
        transform: translate(-30px, 0);
      }
    
      50% {
        transform: translate(-30px, 30px);
      }
    
      75% {
        transform: translate(-30px, 0);
      }
    
      100% {
        transform: translate(0, 0);
      }
    }
    
    /* ============================================================
      loader 4
    ============================================================ */
    .loader-4 {
      height: 100px;
    }
    .loader-4 .loader {
      width: 100px;
      height: 100px;
    }
    .loader-4 .loader:before, .loader-4 .loader:after {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
      width: 50px;
      height: 50px;
      content: "";
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      -ms-border-radius: 25px;
      -o-border-radius: 25px;
      border-radius: 25px;
    }
    .loader-4 .loader:before {
      left: 0;
      background-color: #03445d;
      -webkit-animation: loader-4-left 0.5s infinite ease;
      -moz-animation: loader-4-left 0.5s infinite ease;
      -ms-animation: loader-4-left 0.5s infinite ease;
      -o-animation: loader-4-left 0.5s infinite ease;
      animation: loader-4-left 0.5s infinite ease;
    }
    .loader-4 .loader:after {
      right: 0;
      background-color: #7c7803;
      -webkit-animation: loader-4-right 0.5s infinite ease;
      -moz-animation: loader-4-right 0.5s infinite ease;
      -ms-animation: loader-4-right 0.5s infinite ease;
      -o-animation: loader-4-right 0.5s infinite ease;
      animation: loader-4-right 0.5s infinite ease;
    }
    
    /* left ball */
    @-webkit-keyframes loader-4-left {
      0% {
        -webkit-transform: scale(0.5);
      }
    
      50% {
        -webkit-transform: scale(1);
      }
    
      100% {
        -webkit-transform: scale(0.5);
      }
    }
    
    @-moz-keyframes loader-4-left {
      0% {
        -moz-transform: scale(0.5);
      }
    
      50% {
        -moz-transform: scale(1);
      }
    
      100% {
        -moz-transform: scale(0.5);
      }
    }
    
    @-ms-keyframes loader-4-left {
      0% {
        -ms-transform: scale(0.5);
      }
    
      50% {
        -ms-transform: scale(1);
      }
    
      100% {
        -ms-transform: scale(0.5);
      }
    }
    
    @-o-keyframes loader-4-left {
      0% {
        -o-transform: scale(0.5);
      }
    
      50% {
        -o-transform: scale(1);
      }
    
      100% {
        -o-transform: scale(0.5);
      }
    }
    
    @keyframes loader-4-left {
      0% {
        transform: scale(0.5);
      }
    
      50% {
        transform: scale(1);
      }
    
      100% {
        transform: scale(0.5);
      }
    }
    
    /* right ball */
    @-webkit-keyframes loader-4-right {
      0% {
        -webkit-transform: scale(1);
      }
    
      50% {
        -webkit-transform: scale(0.5);
      }
    
      100% {
        -webkit-transform: scale(1);
      }
    }
    
    @-moz-keyframes loader-4-right {
      0% {
        -moz-transform: scale(1);
      }
    
      50% {
        -moz-transform: scale(0.5);
      }
    
      100% {
        -moz-transform: scale(1);
      }
    }
    
    @-ms-keyframes loader-4-right {
      0% {
        -ms-transform: scale(1);
      }
    
      50% {
        -ms-transform: scale(0.5);
      }
    
      100% {
        -ms-transform: scale(1);
      }
    }
    
    @-o-keyframes loader-4-right {
      0% {
        -o-transform: scale(1);
      }
    
      50% {
        -o-transform: scale(0.5);
      }
    
      100% {
        -o-transform: scale(1);
      }
    }
    
    @keyframes loader-4-right {
      0% {
        transform: scale(1);
      }
    
      50% {
        transform: scale(0.5);
      }
    
      100% {
        transform: scale(1);
      }
    }
    

    Output-

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: