preloader style : demo 176

HTML

                        

CSS

                        .demo{ background: #036a8c; }
                        .loader{
                            padding: 20px 0;
                            margin: 20px 0;
                            text-align: center;
                        }
                        .loader .loader-inner{
                            display: inline-block;
                            border: 3px solid #ffa630;
                            margin: 5px;
                            position: relative;
                            transform-style: preserve-3d;
                            transform: rotateY(90deg);
                        }
                        .loader .box-1{ animation: loading-1 3s ease-in-out infinite; }
                        .loader .box-2{ animation: loading-2 3s ease-in-out infinite; }
                        .loader .box-3{
                            width: 100px;
                            height: 100px;
                            animation: loading-3 3s ease-in-out infinite;
                        }
                        @keyframes loading-1{
                            0%{
                                -webkit-transform: rotateY(90deg);
                                transform: rotateY(90deg);
                            }
                            50%{
                                -webkit-transform: rotateX(200deg);
                                transform: rotateX(200deg);
                            }
                            100%{
                                -webkit-transform: rotateY(0deg);
                                transform: rotateY(0deg);
                            }
                        }
                        @keyframes loading-2{
                            0%{
                                -webkit-transform: rotateY(120deg);
                                transform: rotateY(120deg);
                            }
                            50%{
                                -webkit-transform: rotateX(250deg);
                                transform: rotateX(250deg);
                            }
                            100%{
                                -webkit-transform: rotateY(0deg);
                                transform: rotateY(0deg);
                            }
                        }
                        @keyframes loading-3{
                            0%{
                                -webkit-transform: rotateY(30deg);
                                transform: rotateY(30deg);
                            }
                            50%{
                                -webkit-transform: rotateX(390deg);
                                transform: rotateX(390deg);
                            }
                            100%{
                                -webkit-transform: rotateY(0deg);
                                transform: rotateY(0deg);
                            }
                        }
                    
License Terms