1. <div class="box-loader"></div>
2. <style>
3. body{
4. background-color: #0f80d2;
5. } .box-loader{
6. position: relative;
7. margin: 0 auto;
8. margin-top: 10%;
9. width: 300px;
10. border: 10px solid white;
11. height: 300px;
12. border-radius: 10px;
13. }
14. .box-loader:before{
15. content: '';
16. position: absolute;
17. top: 6px;
18. left: 6px;
19. height: 200px;
20. background-color: white;
21. border-radius: 5px;
22. animation: full 3s ease-in-out infinite reverse;
23. }
24. .box-loader:after{
25. content: '';
26. position: absolute;
27. }
28. @keyframes full{
29. 0%{
30. left:2%;
31. top:2%;
32. width: 48%;
33. height:48%;
34. }
35. 12.5%{
36. left:2%;
37. top:2%;
38. width: 48%;
39. height:96%;
40. }
41. 25%{
42. left:2%;
43. top:50%;
44. width: 48%;
45. height:48%;
46. }
47. 37.5%{
48. left:2%;
49. top:50%;
50. width: 96%;
51. height: 48%;
52. }
53. 50%{
54. left:50%;
55. top:50%;
56. width: 48%;
57. height: 48%;
58. }
59. 62.5%{
60. left:50%;
61. top:2%;
62. width: 48%;
63. height: 96%;
64. }
65. 75%{
66. left:50%;
67. top:2%;
68. width: 48%;
69. height: 48%;
70. }
71. 87.5%{
72. width: 96%;
73. height:48%;
74. left:2%;
75. top:2%;
76. }
77. 100%
78. {
79. width: 48%;
80. height:48%;
81. left:2%;
82. top:2%;
83. }
84. </style>

     <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>