preloader style : demo 310

HTML

                        

CSS

                    .loader{
                        width: 130px;
                        height: 170px;
                        margin: 0 auto;
                    }
                    .loader div{
                        background: #e74c3c;
                        width: 45px;
                        height: 45px;
                        border-radius: 5px;
                        border: 3px solid #c0392b;
                        margin: 10px;
                        position: relative;
                        animation: anime1 1s infinite linear;
                    }
                    .loader div:nth-child(2){
                        margin-left: 72.5px; 
                        background: #2ecc71;
                        border-color: #27ae60;
                        animation: anime2 1s infinite linear;
                    }
                    .loader div:nth-child(3){ 
                        margin-top: -60px;
                        background: #3498db;
                        border-color: #2980b9;
                        animation: anime3 1s infinite linear;
                    }
                    .loader div:nth-child(4){
                        margin-left: 72.5px;
                        background: #9b59b6;
                        border-color: #8e44ad;
                        animation: anime4 1s infinite linear;
                    }
                    @keyframes anime1{
                        0%{
                            left: 0;
                            transform: rotate(0deg);
                        }
                        50%{
                            left: 62.5px;
                            bottom: 0;
                            transform: rotate(90deg);
                        }
                        100%{
                            left: 62.5px;
                            bottom: -61.25px;
                            transform: rotate(90deg);
                        }
                    }
                    @keyframes anime2{
                        50%{ bottom: 0; }
                        100%{ bottom: -61.25px; }
                    }
                    @keyframes anime3{
                        50%{ top: 0; }
                        100%{ top: -61.25px; }
                    }
                    @keyframes anime4{
                        0%{
                            left: 0;
                            transform: rotate(0deg);
                        }
                        50%{
                            left: -62.5px;
                            top: 0;
                            transform: rotate(90deg);
                        }
                        100%{
                            left: -62.5px;
                            top: -61.25px;
                            transform: rotate(90deg);
                        }
                    }
                    
License Terms