Box-Loader.html


Quell Code


     <div class="box-loader"></div>   
     <style>
                body{  
                    background-color: #0f80d2;    
                    }       .box-loader{    
                        position: relative;        
                        margin: 0 auto;     
                        margin-top: 10%;      
                        width: 300px;      
                        border: 10px solid white;    
                        height: 300px;     
                        border-radius: 10px;   
                        }     
                        .box-loader:before{   
                            content: '';   
                            position: absolute;        
                            top: 6px;     
                            left: 6px;    
                            height: 200px;   
                            background-color: white;    
                            border-radius: 5px;   
                            animation: full 3s ease-in-out infinite reverse;   
                            }     
                            .box-loader:after{     
                                content: '';     
                                position: absolute;     
                                }   
                                @keyframes full{    
                                    0%{    
                                        left:2%;   
                                        top:2%;     
                                        width: 48%;    
                                        height:48%;    
                                        }    
                                        12.5%{      
                                            left:2%;      
                                            top:2%;     
                                            width: 48%;     
                                            height:96%;     
                                            }     
                                            25%{       
                                                left:2%;  
                                                top:50%;   
                                                width: 48%;  
                                                height:48%;  
                                                }   
                                                37.5%{      
                                                    left:2%;      
                                                    top:50%;     
                                                    width: 96%;    
                                                    height: 48%;    
                                                    }     
                                                    50%{     
                                                        left:50%;      
                                                        top:50%;      
                                                        width: 48%;      
                                                        height: 48%;    
                                                        }  
                                                        62.5%{    
                                                            left:50%;   
                                                            top:2%;     
                                                            width: 48%;    
                                                            height: 96%;    
                                                            }   
                                                            75%{   
                                                                left:50%;      
                                                                top:2%;     
                                                                width: 48%;    
                                                                height: 48%;    
                                                                }  
                                                                87.5%{     
                                                                    width: 96%;     
                                                                    height:48%;    
                                                                    left:2%;     
                                                                    top:2%;   
                                                                    }  
                 100%
                { 
                    width: 48%;    
                    height:48%;    
                    left:2%;       
                    top:2%;     
                    }      
     </style>