preloader style : demo 257

HTML

                        

CSS

                        .loader{
                            width: 150px;
                            height: 150px;
                            margin: 50px auto 0;
                            transform: rotate(45deg);
                            position: relative;
                        }
                        .loader:before{
                            content: "";
                            background: #fff;
                            width: 50px;
                            height: 50px;
                            position: absolute;
                            top: 50px;
                            left: 50px;
                            animation: animate 0.5s infinite;
                        }
                        .loader div{
                            background-color: #FFF;
                            width: 20px;
                            height: 20px;
                            margin-right: 110px;
                            margin-bottom: 110px;
                            float: left;
                        }
                        .loader div:nth-child(2n){ margin-right: 0px; }
                        .loader div:nth-child(1){ animation: animate_1 2s infinite; }
                        .loader div:nth-child(2){ animation: animate_2 2s infinite; }
                        .loader div:nth-child(3){ animation: animate_3 2s infinite; }
                        .loader div:nth-child(4){ animation: animate_4 2s infinite; }
                        @keyframes animate{
                            25%{ transform: scale(0.5); }
                        }
                        @keyframes animate_1{
                            25%{ transform: translate(130px,0) rotate(-90deg); }
                            50%{ transform: translate(130px,130px) rotate(-180deg); }
                            75%{ transform: translate(0,130px) rotate(-270deg); }
                            100%{ transform: rotate(-360deg); }
                        }
                        @keyframes animate_2{
                            25%{ transform: translate(0,130px) rotate(-90deg); }
                            50%{ transform: translate(-130px,130px) rotate(-180deg); }
                            75%{ transform: translate(-130px,0) rotate(-270deg); }
                            100%{ transform: rotate(-360deg); }
                        }
                        @keyframes animate_3{
                            25%{ transform: translate(0,-130px) rotate(-90deg); }
                            50%{ transform: translate(130px,-130px) rotate(-180deg); }
                            75%{ transform: translate(130px,0) rotate(-270deg); }
                            100%{ transform: rotate(-360deg); }
                        }
                        @keyframes animate_4{
                            25%{ transform: translate(-130px,0) rotate(-90deg); }
                            50%{ transform: translate(-130px,-130px) rotate(-180deg); }
                            75%{ transform: translate(0,-130px) rotate(-270deg); }
                            100%{ transform: rotate(-360deg); }
                        }
                    
License Terms