Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • To Make a Preloader Using HTML and CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 400
    Comment on it

    Hello readers,
    If you want to make a preloader using HTML and CSS follow the below code:

    Html

    <div class="circle">
        <div class="inner">
            <div class="spot"></div>
        </div>
    </div>
        <h1>loading...   </h1>
    

    CSS

    @-webkit-keyframes spin {
      0% {
        opacity: 0.25;
      }
      50% {
        opacity: 1;
        background: red;
      }
      100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
        opacity: 0.25;
      }
    }
    @keyframes spin {
      0% {
        opacity: 0.25;
      }
      50% {
        opacity: 1;
        background: red;
      }
      100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
        opacity: 0.25;
      }
    }
    @-webkit-keyframes strange {
      50% {
        margin: 0;
        width: 5em;
        height: 5em;
        background: red;
      }
    }
    @keyframes strange {
      50% {
        margin: 0;
        width: 5em;
        height: 5em;
        background: red;
      }
    }
    @-webkit-keyframes toggleO {
      50% {
        opacity: 0.5;
      }
    }
    @keyframes toggleO {
      50% {
        opacity: 0.5;
      }
    }
    body {
      padding-top: 4em;
      text-align: center;
    }
    
    h1 {
      color: red;
      font-size: 2em;
      font-family: courier;
      margin-top: 0.45em;
      -webkit-animation: toggleO 1s infinite linear;
              animation: toggleO 1s infinite linear;
    }
    
    .circle, .inner, .spot {
      border-radius: 50%;
      position: relative;
    }
    
    .circle {
      background: -webkit-linear-gradient(#000000, #000000);
      background: linear-gradient(#000000, #000000);
      height: 6em;
      width: 6em;
      display: inline-block;
      margin: 0 auto;
      -webkit-animation: spin 1s infinite linear;
              animation: spin 1s infinite linear;
    }
    
    .inner {
      padding: 0.2em;
      background: #fff;
      height: 4.5em;
      width: 4.5em;
    }
    
    .spot {
      margin-top: 1.4em;
      margin-left: 1.4em;
      height: 1em;
      width:  1em;
      background: red;
      -webkit-animation: strange 1s linear infinite;
              animation: strange 1s linear infinite;
    }
    

 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: