preloader style : demo 311

HTML

                        

CSS

                    .loader{
                        width: 180px;
                        height: 180px;
                        margin: 0 auto;
                        position: relative;
                    }
                    .loader div{
                        width: 100%;
                        height: 100%;
                        border: 15px solid #111;
                        border-radius: 10px;
                        transform: translateX(-50%) translateY(-50%);
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        animation: animate 3.5s infinite linear;
                        animation-duration: 2s;
                    }
                    .loader div:nth-child(2){
                        width: 110px;
                        height: 110px; 
                        animation-duration: 2.8s;
                    }
                    .loader div:nth-child(3){ 
                        width: 50px;
                        height: 50px; 
                    }
                    .loader div:before,
                    .loader div:after{
                        content: '';
                        background: #e84118;
                        width: 15px;  
                        height: 75%;
                        position: absolute;
                        top: -15px;  
                        left: -15px;
                    }
                    .loader div:after{
                        top: auto;
                        bottom: -15px; 
                        left: auto;  
                        right: -15px;
                    }
                    @keyframes animate{
                        0%{ transform: translateX(-50%) translateY(-50%) perspective(1000px) rotateY(0deg); }
                        100%{ transform: translateX(-50%) translateY(-50%) perspective(1000px) rotateY(360deg); }
                    }
                    
License Terms