preloader style : demo 273

HTML

                        

CSS

                        .loader{
                            width: 150px;
                            height: 150px;
                            margin: 20px auto 0;
                            perspective: 300px;
                            transform-style: preserve-3d;
                            position: relative;
                        }
                        .loader div{
                            width: 100px;
                            height: 100px;
                            transform-style: preserve-3d;
                            position: absolute;
                            top: calc(50% - 50px);
                            left: calc(50% - 50px);
                            animation-duration: 2s;
                            animation-iteration-count: infinite;
                        }
                        .loader .inner_loader_1{
                            background-color: #eb2f06;
                            animation-name: side1;
                        }
                        .loader .inner_loader_2{
                            background-color: #ff9f43;
                            animation-name: side2;
                        }
                        .loader .inner_loader_3{
                            background-color: #be2edd;
                            animation-name: side3;
                        }
                        .loader .inner_loader_4{
                            background-color: #10ac84;
                            animation-name:side4;
                        }
                        .loader .inner_loader_5{
                            background-color: #4834d4;
                            animation-name: side5;
                        }
                        .loader .inner_loader_6{
                            background-color: #1e3799;
                            animation-name: side6;
                        }
                        @keyframes side1{
                            0%{
                                border-radius: 0px;
                                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(50px);
                            }
                            25%{
                                border-radius: 25px;
                                transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(75px);
                            }
                            50%{
                                border-radius: 50px;
                                transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) translateZ(100px);
                            }
                            75%{
                                border-radius: 25px;
                                transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg) translateZ(75px);
                            }
                            100%{
                                border-radius: 0px;
                                transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg) translateZ(50px);
                            }
                        }
                        @keyframes side2{
                            0%{
                                border-radius: 0px;
                                transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(50px);
                            }
                            25%{
                                border-radius: 25px;
                                transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) translateZ(75px);
                            }
                            50%{
                                border-radius: 50px;
                                transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg) translateZ(100px);
                            }
                            75%{
                                border-radius: 25px;
                                transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg) translateZ(75px);
                            }
                            100%{
                                border-radius: 0px;
                                transform: rotateX(0deg) rotateY(450deg) rotateZ(0deg) translateZ(50px);
                            }
                        }
                        @keyframes side3{
                            0%{
                                border-radius: 0px;
                                transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) translateZ(50px);
                            }
                            25%{
                                border-radius: 25px;
                                transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg) translateZ(75px);
                            }
                            50%{
                                border-radius: 50px;
                                transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg) translateZ(100px);
                            }
                            75%{
                                border-radius: 25px;
                                transform: rotateX(0deg) rotateY(450deg) rotateZ(0deg) translateZ(75px);
                            }
                            100%{
                                border-radius: 0px;
                                transform: rotateX(0deg) rotateY(540deg) rotateZ(0deg) translateZ(50px);
                            }
                        }
                        @keyframes side4{
                            0%{
                                border-radius: 0px;
                                transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg) translateZ(50px);
                            }
                            25%{
                                border-radius: 25px;
                                transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg) translateZ(75px);
                            }
                            50%{
                                border-radius: 50px;
                                transform: rotateX(0deg) rotateY(450deg) rotateZ(0deg) translateZ(100px);
                            }
                            75%{
                                border-radius: 25px;
                                transform: rotateX(0deg) rotateY(540deg) rotateZ(0deg) translateZ(75px);
                            }
                            100%{
                                border-radius: 0px;
                                transform: rotateX(0deg) rotateY(630deg) rotateZ(0deg) translateZ(50px);
                            }
                        }
                        @keyframes side5{
                            0%{
                                border-radius: 0px;
                                transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(50px);
                            }
                            25%{
                                border-radius: 25px;
                                transform: rotateX(90deg) rotateY(0deg) rotateZ(-90deg) translateZ(75px);
                            }
                            50%{
                                border-radius: 50px;
                                transform: rotateX(90deg) rotateY(0deg) rotateZ(-180deg) translateZ(100px)
                             }
                            75%{
                                border-radius: 25px;
                                transform: rotateX(90deg) rotateY(0deg) rotateZ(-270deg) translateZ(75px);
                            }
                            100%{
                                border-radius: 0px;
                                transform: rotateX(90deg) rotateY(0deg) rotateZ(-360deg) translateZ(50px);
                            }
                        }
                        @keyframes side6{
                            0%{
                                border-radius: 0px;
                                transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(50px);
                            }
                            25%{
                                border-radius: 25px;
                                transform: rotateX(-90deg) rotateY(0deg) rotateZ(90deg) translateZ(75px);
                            }
                            50%{
                                border-radius: 50px;
                                transform: rotateX(-90deg) rotateY(0deg) rotateZ(180deg) translateZ(100px);
                            }
                            75%{
                                border-radius: 25px;
                                transform: rotateX(-90deg) rotateY(0deg) rotateZ(270deg) translateZ(75px);
                            }
                            100%{
                                border-radius: 0px;
                                transform: rotateX(-90deg) rotateY(0deg) rotateZ(360deg) translateZ(50px);
                            }
                        }
                    
License Terms