Friday, 6 May 2016

How to create Spinner or Loaders with CSS3

Source Code




 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Progress bar using CSS and Jquery</title>  
           <style>  
           .wrapper{  
                width:500px;  
                margin:0 auto;  
           }  
           html{  
                height:100%;  
           }  
           body{  
                display:flex;  
                justify-content:space-around;  
                align-items:center;  
                background:#333333;  
           }  
           @keyframes spinner{  
                0%{  
                     transform:rotate(0deg);  
                }  
                100%{  
                     transform:rotate(360deg);  
                }  
           }  
           .loading{  
                animation:spinner 1s infinite linear;  
                border-radius:50%;  
                width:24px;  
                height:24px;  
                border:.25rem solid #999;  
                border-top-color:#ffffff;  
                border-style:double;  
                border-width:.5rem;  
           }  
           </style>  
      </head>  
      <body>  
           <div class="wrapper" align="center">  
                <br />  
                <div class="loading"></div>  
                <br />  
           </div>  
      </body>  
 </html>  

0 comments:

Post a Comment