preloader style : demo 248

HTML

                        

CSS

                        .loader{
                            width: 84px;
                            height: 84px;
                            margin: 50px auto;
                            transform: rotate(45deg);
                            position: relative;
                            animation: animate 1.2s infinite ease-in-out;
                        }
                        .loader span{
                            background-color: #ff6600;
                            width: 40px;
                            height: 40px;
                            border: 1px #ff6600 solid;
                            border-radius: 5px;
                            display: block;
                            position: absolute;
                            animation: animate_1 1.2s infinite ease-in-out both;
                        }
                        .loader span:nth-child(1){
                            top: 0;
                            left: 0;
                        }
                        .loader span:nth-child(2){
                            background-color: red;
                            border: 1px red solid;
                            top: 0;
                            right: 0;
                            animation: animate_2 1.2s infinite ease-in-out both;
                        }
                        .loader span:nth-child(3){
                            background-color: green;
                            border: 1px green solid;
                            bottom: 0;
                            left: 0;
                            animation: animate_2 1.2s infinite ease-in-out both;
                        }
                        .loader span:nth-child(4){
                            background-color: purple;
                            border: 1px purple solid;
                            bottom: 0;
                            right: 0;
                        }
                        @keyframes animate{
                            0%, 10%, 100%{
                                width: 84px;
                                height: 84px;
                            }
                            65%{
                                width: 150px;
                                height: 150px;
                            }
                        }
                        @keyframes  animate_1{
                            0%, 30%{ transform: rotate(0); }
                            55%{
                                background-color: transparent;
                                transform: scale(0.5);
                            }
                            100%{ transform: rotate(180deg); }
                        }
                        @keyframes  animate_2{
                            0%, 30%{ transform: rotate(0); }
                            55%{
                                background-color: transparent;
                                transform: scale(0.5);
                            }
                            100%{ transform: rotate(180deg); }
                        }
                    
License Terms