preloader style : demo 162

HTML

                        

CSS

                        .loader{
                            width: 210px;
                            height: 210px;
                            background: #22181c;
                            margin: 70px auto;
                            position: relative;
                            transform: rotate(45deg);
                        }
                        .loader .loader-inner{
                            width: 70px;
                            height: 70px;
                            background: #ef626c;
                            float: left;
                            -webkit-animation: loading-1 3s linear infinite;
                            animation: loading-1 3s linear infinite;
                        }
                        .loader .loader-inner:nth-child(1){ animation-delay: 0s; }
                        .loader .loader-inner:nth-child(2){ animation-delay: 0.5625s; }
                        .loader .loader-inner:nth-child(3){ animation-delay: 1s; }
                        .loader .loader-inner:nth-child(4){ animation-delay: 0.1875s; }
                        .loader .loader-inner:nth-child(5){ animation-delay: 0.75s; }
                        .loader .loader-inner:nth-child(6){  animation-delay: 1.1875s; }
                        .loader .loader-inner:nth-child(7){ animation-delay: 0.375s; }
                        .loader .loader-inner:nth-child(8){ animation-delay: 0.935s; }
                        .loader .loader-inner:nth-child(9){ animation-delay: 1.375s; }
                        @-webkit-keyframes loading-1{
                            0%{
                                transform: rotateY(0deg);
                            }
                            8%{
                                transform: rotateY(90deg);
                            }
                            50%{
                                transform: rotateY(90deg);
                            }
                            55%{
                                transform: rotateY(0deg);
                            }
                        }
                        @keyframes loading-1{
                            0%{
                                transform: rotateY(0deg);
                            }
                            8%{
                                transform: rotateY(90deg);
                            }
                            50%{
                                transform: rotateY(90deg);
                            }
                            55%{
                                transform: rotateY(0deg);
                            }
                        }
                    
License Terms