Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • To Make a Preloader Using HTML and CSS

    @nanda.puri
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 459
    Comment on it

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

    Html

    1. <div class="circle">
    2.     <div class="inner">
    3.         <div class="spot"></div>
    4.     </div>
    5. </div>
    6.     <h1>loading...   </h1>

    CSS

    1. @-webkit-keyframes spin {
    2.   0% {
    3.     opacity: 0.25;
    4.   }
    5.   50% {
    6.     opacity: 1;
    7.     background: red;
    8.   }
    9.   100% {
    10.     -webkit-transform: rotate(360deg);
    11.             transform: rotate(360deg);
    12.     opacity: 0.25;
    13.   }
    14. }
    15. @keyframes spin {
    16.   0% {
    17.     opacity: 0.25;
    18.   }
    19.   50% {
    20.     opacity: 1;
    21.     background: red;
    22.   }
    23.   100% {
    24.     -webkit-transform: rotate(360deg);
    25.             transform: rotate(360deg);
    26.     opacity: 0.25;
    27.   }
    28. }
    29. @-webkit-keyframes strange {
    30.   50% {
    31.     margin: 0;
    32.     width: 5em;
    33.     height: 5em;
    34.     background: red;
    35.   }
    36. }
    37. @keyframes strange {
    38.   50% {
    39.     margin: 0;
    40.     width: 5em;
    41.     height: 5em;
    42.     background: red;
    43.   }
    44. }
    45. @-webkit-keyframes toggleO {
    46.   50% {
    47.     opacity: 0.5;
    48.   }
    49. }
    50. @keyframes toggleO {
    51.   50% {
    52.     opacity: 0.5;
    53.   }
    54. }
    55. body {
    56.   padding-top: 4em;
    57.   text-align: center;
    58. }
    59.  
    60. h1 {
    61.   color: red;
    62.   font-size: 2em;
    63.   font-family: courier;
    64.   margin-top: 0.45em;
    65.   -webkit-animation: toggleO 1s infinite linear;
    66.           animation: toggleO 1s infinite linear;
    67. }
    68.  
    69. .circle, .inner, .spot {
    70.   border-radius: 50%;
    71.   position: relative;
    72. }
    73.  
    74. .circle {
    75.   background: -webkit-linear-gradient(#000000, #000000);
    76.   background: linear-gradient(#000000, #000000);
    77.   height: 6em;
    78.   width: 6em;
    79.   display: inline-block;
    80.   margin: 0 auto;
    81.   -webkit-animation: spin 1s infinite linear;
    82.           animation: spin 1s infinite linear;
    83. }
    84.  
    85. .inner {
    86.   padding: 0.2em;
    87.   background: #fff;
    88.   height: 4.5em;
    89.   width: 4.5em;
    90. }
    91.  
    92. .spot {
    93.   margin-top: 1.4em;
    94.   margin-left: 1.4em;
    95.   height: 1em;
    96.   width:  1em;
    97.   background: red;
    98.   -webkit-animation: strange 1s linear infinite;
    99.           animation: strange 1s linear infinite;
    100. }
    preloader using HTML and CSS html css
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: