preloader style : demo 83

HTML

                        

CSS

                        .loader{
                            width: 160px;
                            height: 160px;
                            margin: 20px auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                        }
                        .loader .box-1{
                            width: 74px;
                            height: 74px;
                            border-radius: 4px;
                        }
                        .loader .box-1:before,
                        .loader .box-1:after{
                            bottom: 2px;
                        }
                        .loader .box-1:before{
                            left: 2px;
                        }
                        .loader .box-1:after{
                            right: 2px;
                        }
                        .loader .box-2{
                            left: 2px;
                            top: 2px;
                            -webkit-animation-name: loading-1;
                            animation-name: loading-1;
                        }
                        .loader .box-1{
                            -webkit-animation-name: loading-2;
                            animation-name: loading-2;
                            -webkit-animation-duration: 2s;
                            animation-duration: 2s;
                            -webkit-animation-timing-function: steps(4);
                            animation-timing-function: steps(4);
                        }
                        .loader .box-2{
                            -webkit-animation-duration: 0.5s;
                            animation-duration: 0.5s;
                        }
                        .box-1{
                            position: absolute;
                            color: #006aa4;
                            border: 2px solid;
                            -webkit-transform: translate(-50%, -50%) rotate(-45deg);
                            transform: translate(-50%, -50%) rotate(-45deg);
                            -webkit-animation-timing-function: ease-in-out;
                            animation-timing-function: ease-in-out;
                            -webkit-animation-duration: 1s;
                            animation-duration: 1s;
                            -webkit-animation-iteration-count: infinite;
                            animation-iteration-count: infinite;
                        }
                        .loader .box-1:before,
                        .loader .box-1:after{
                            content: "";
                            width: 32px;
                            height: 32px;
                            border-radius: 4px;
                            background: #e3b23c;
                            position: absolute;
                        }
                        .loader .box-1:before{
                            left: 2px;
                        }
                        .loader .box-1:after{
                            right: 2px;
                        }
                        .box-2{
                            position: absolute;
                            width: 32px;
                            height: 32px;
                            border-radius: 4px;
                            background: #e3b23c;
                            -webkit-animation-timing-function: ease-in-out;
                            animation-timing-function: ease-in-out;
                            -webkit-animation-duration: 1s;
                            animation-duration: 1s;
                            -webkit-animation-iteration-count: infinite;
                            animation-iteration-count: infinite;
                        }
                        @-webkit-keyframes loading-1{
                            33%{
                                left: 2px;
                            }
                            67%,100%{
                                left: 36px;
                            }
                        }
                        @keyframes loading-1{
                            33%{
                                left: 2px;
                            }
                            67%,100%{
                                left: 36px;
                            }
                        }
                        @-webkit-keyframes loading-2{
                            to{
                                -webkit-transform: translate(-50%, -50%) rotate(-405deg);
                                transform: translate(-50%, -50%) rotate(-405deg);
                            }
                        }
                        @keyframes loading-2{
                            to{
                                -webkit-transform: translate(-50%, -50%) rotate(-405deg);
                                transform: translate(-50%, -50%) rotate(-405deg);
                            }
                        }
                    
License Terms