preloader style : demo 19

HTML

                        

CSS

                        .loader {
                            position: relative;
                            width: 100px;
                            height: 100px;
                            border-radius: 50%;
                            margin: 20px auto;
                            -o-border-radius: 50%;
                            -ms-border-radius: 50%;
                            -webkit-border-radius: 50%;
                            -moz-border-radius: 50%;
                            -webkit-perspective: 780px;
                            perspective: 780px;
                        }
                        .loader-inner {
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            box-sizing: border-box;
                            -o-box-sizing: border-box;
                            -ms-box-sizing: border-box;
                            -webkit-box-sizing: border-box;
                            -moz-box-sizing: border-box;
                            border-radius: 50%;
                            -o-border-radius: 50%;
                            -ms-border-radius: 50%;
                            -webkit-border-radius: 50%;
                            -moz-border-radius: 50%;
                        }
                        .loader-inner.box1{
                            left: 0%;
                            top: 0%;
                            animation: cssload-rotate-one 1.15s linear infinite;
                            -o-animation: cssload-rotate-one 1.15s linear infinite;
                            -ms-animation: cssload-rotate-one 1.15s linear infinite;
                            -webkit-animation: cssload-rotate-one 1.15s linear infinite;
                            -moz-animation: cssload-rotate-one 1.15s linear infinite;
                            border-bottom: 3px solid #5C5EDC;
                        }
                        .loader-inner.box2{
                            right: 0%;
                            top: 0%;
                            animation: cssload-rotate-two 1.15s linear infinite;
                            -o-animation: cssload-rotate-two 1.15s linear infinite;
                            -ms-animation: cssload-rotate-two 1.15s linear infinite;
                            -webkit-animation: cssload-rotate-two 1.15s linear infinite;
                            -moz-animation: cssload-rotate-two 1.15s linear infinite;
                            border-right: 3px solid rgba(76, 70, 101, 0.99);
                        }
                        .loader-inner.box3{
                            right: 0%;
                            bottom: 0%;
                            animation: cssload-rotate-three 1.15s linear infinite;
                            -o-animation: cssload-rotate-three 1.15s linear infinite;
                            -ms-animation: cssload-rotate-three 1.15s linear infinite;
                            -webkit-animation: cssload-rotate-three 1.15s linear infinite;
                            -moz-animation: cssload-rotate-three 1.15s linear infinite;
                            border-top: 3px solid #e9908a;
                        }
                        @keyframes cssload-rotate-one {
                            0% {
                                -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
                                transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
                            }
                            100% {
                                -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
                                transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
                            }
                        }
                        @-webkit-keyframes cssload-rotate-one {
                            0% {
                                -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
                            }
                            100% {
                                -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
                            }
                        }
                        @keyframes cssload-rotate-two {
                            0% {
                                -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
                                transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
                            }
                            100% {
                                -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
                                transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
                            }
                        }
                        @-webkit-keyframes cssload-rotate-two {
                            0% {
                                -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
                            }
                            100% {
                                -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
                            }
                        }
                        @keyframes cssload-rotate-three {
                            0% {
                                -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
                                transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
                            }
                            100% {
                                -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
                                transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
                            }
                        }
                        @-webkit-keyframes cssload-rotate-three {
                            0% {
                                -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
                            }
                            100% {
                                -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
                            }
                        }
                    
License Terms