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

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 233
    Comment on it

    Hi all,

    Below is an example of pure css loader. Using css animate I just rotate the div and change the border radius. Check the code for details.

    CSS :

        div {
          height: 20px;
          width: 20px;
          background-color: transparent;
          border: solid #009f79;
          margin-top: 50px;
          margin-left: auto;
          margin-right: auto;
          -webkit-animation-name: transform;
                  animation-name: transform;
          -webkit-animation-duration: 3s;
                  animation-duration: 3s;
          -webkit-animation-iteration-count: infinite;
                  animation-iteration-count: infinite;
          -webkit-animation-timing-function: linear;
                  animation-timing-function: linear;
        }
    
        @-webkit-keyframes transform {
          0% {
            border-radius: 0;
          }
          12.5% {
            border-radius: 50% 0 0 0;
          }
          25% {
            border-radius: 50% 50% 0 0;
          }
          37.5% {
            border-radius: 50% 50% 50% 0;
          }
          50% {
            border-radius: 50%;
          }
          62.5% {
            border-radius: 0 50% 50% 50%;
          }
          75% {
            border-radius: 0 0 50% 50%;
          }
          87.5% {
            border-radius: 0 0 0 50%;
          }
          100% {
            border-radius: 0;
            -webkit-transform: rotate(720deg);
                    transform: rotate(720deg);
          }
        }
    
        @keyframes transform {
          0% {
            border-radius: 0;
          }
          12.5% {
            border-radius: 50% 0 0 0;
          }
          25% {
            border-radius: 50% 50% 0 0;
          }
          37.5% {
            border-radius: 50% 50% 50% 0;
          }
          50% {
            border-radius: 50%;
          }
          62.5% {
            border-radius: 0 50% 50% 50%;
          }
          75% {
            border-radius: 0 0 50% 50%;
          }
          87.5% {
            border-radius: 0 0 0 50%;
          }
          100% {
            border-radius: 0;
            -webkit-transform: rotate(720deg);
                    transform: rotate(720deg);
          }
        }
    

    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: