preloader style : demo 56

HTML

                        

CSS

                        .loader{
                            width: 96px;
                            height: 96px;
                            margin: 30px auto;
                            position: relative;
                        }
                        .loader .box{
                            width: 91px;
                            height: 91px;
                            position: absolute;
                            opacity: 0;
                            -moz-transform: rotate(225deg);
                            -moz-animation: loading 7.15s infinite;
                            -webkit-transform: rotate(225deg);
                            -webkit-animation: loading 7.15s infinite;
                            -o-transform: rotate(225deg);
                            -o-animation: loading 7.15s infinite;
                            -ms-transform: rotate(225deg);
                            -ms-animation: loading 7.15s infinite;
                        }
                        .loader .box-1{
                            -moz-animation-delay: 1.56s;
                            -webkit-animation-delay: 1.56s;
                            -o-animation-delay: 1.56s;
                            -ms-animation-delay: 1.56s;
                        }
                        .loader .box-2{
                            -moz-animation-delay: 0.31s;
                            -webkit-animation-delay: 0.31s;
                            -o-animation-delay: 0.31s;
                            -ms-animation-delay: 0.31s;
                        }
                        .loader .box-3{
                            -moz-animation-delay: 0.62s;
                            -webkit-animation-delay: 0.62s;
                            -o-animation-delay: 0.62s;
                            -ms-animation-delay: 0.62s;
                        }
                        .loader .box-4{
                            -moz-animation-delay: 0.94s;
                            -webkit-animation-delay: 0.94s;
                            -o-animation-delay: 0.94s;
                            -ms-animation-delay: 0.94s;
                        }
                        .loader .box-5{
                            -moz-animation-delay: 1.25s;
                            -webkit-animation-delay: 1.25s;
                            -o-animation-delay: 1.25s;
                            -ms-animation-delay: 1.25s;
                        }
                        .loader .loader-inner{
                            width: 12px;
                            height: 12px;
                            background: #fff;
                            position: absolute;
                            top: 0;
                            left: 0;
                            -moz-border-radius: 12px;
                            -webkit-border-radius: 12px;
                            -o-border-radius: 12px;
                            -ms-border-radius: 12px;
                        }
                        @-moz-keyframes loading{
                            0% {
                                opacity: 1;
                                z-index: 99;
                                -moz-transform: rotate(180deg);
                                -moz-animation-timing-function: ease-out;
                            }
                            7% {
                                opacity: 1;
                                -moz-transform: rotate(300deg);
                                -moz-animation-timing-function: linear;
                                -moz-origin: 0%;
                            }
                            30% {
                                opacity: 1;
                                -moz-transform: rotate(410deg);
                                -moz-animation-timing-function: ease-in-out;
                                -moz-origin: 7%;
                            }
                            39% {
                                opacity: 1;
                                -moz-transform: rotate(645deg);
                                -moz-animation-timing-function: linear;
                                -moz-origin: 30%;
                            }
                            70% {
                                opacity: 1;
                                -moz-transform: rotate(770deg);
                                -moz-animation-timing-function: ease-out;
                                -moz-origin: 39%;
                            }
                            75% {
                                opacity: 1;
                                -moz-transform: rotate(900deg);
                                -moz-animation-timing-function: ease-out;
                                -moz-origin: 70%;
                            }
                            76% {
                                opacity: 0;
                                -moz-transform: rotate(900deg);
                            }
                            100% {
                                opacity: 0;
                                -moz-transform: rotate(900deg);
                            }
                        }
                        @-webkit-keyframes loading {
                            0% {
                                opacity: 1;
                                z-index: 99;
                                -webkit-transform: rotate(180deg);
                                -webkit-animation-timing-function: ease-out;
                            }
                            7% {
                                opacity: 1;
                                -webkit-transform: rotate(300deg);
                                -webkit-animation-timing-function: linear;
                                -webkit-origin: 0%;
                            }
                            30% {
                                opacity: 1;
                                -webkit-transform: rotate(410deg);
                                -webkit-animation-timing-function: ease-in-out;
                                -webkit-origin: 7%;
                            }
                            39% {
                                opacity: 1;
                                -webkit-transform: rotate(645deg);
                                -webkit-animation-timing-function: linear;
                                -webkit-origin: 30%;
                            }
                            70% {
                                opacity: 1;
                                -webkit-transform: rotate(770deg);
                                -webkit-animation-timing-function: ease-out;
                                -webkit-origin: 39%;
                            }
                            75% {
                                opacity: 1;
                                -webkit-transform: rotate(900deg);
                                -webkit-animation-timing-function: ease-out;
                                -webkit-origin: 70%;
                            }
                            76% {
                                opacity: 0;
                                -webkit-transform: rotate(900deg);
                            }
                            100% {
                                opacity: 0;
                                -webkit-transform: rotate(900deg);
                            }
                        }
                        @-o-keyframes loading {
                            0% {
                                opacity: 1;
                                z-index: 99;
                                -o-transform: rotate(180deg);
                                -o-animation-timing-function: ease-out;
                            }
                            7% {
                                opacity: 1;
                                -o-transform: rotate(300deg);
                                -o-animation-timing-function: linear;
                                -o-origin: 0%;
                            }
                            30% {
                                opacity: 1;
                                -o-transform: rotate(410deg);
                                -o-animation-timing-function: ease-in-out;
                                -o-origin: 7%;
                            }
                            39% {
                                opacity: 1;
                                -o-transform: rotate(645deg);
                                -o-animation-timing-function: linear;
                                -o-origin: 30%;
                            }
                            70% {
                                opacity: 1;
                                -o-transform: rotate(770deg);
                                -o-animation-timing-function: ease-out;
                                -o-origin: 39%;
                            }
                            75% {
                                opacity: 1;
                                -o-transform: rotate(900deg);
                                -o-animation-timing-function: ease-out;
                                -o-origin: 70%;
                            }
                            76% {
                                opacity: 0;
                                -o-transform: rotate(900deg);
                            }
                            100% {
                                opacity: 0;
                                -o-transform: rotate(900deg);
                            }
                        }
                        @-ms-keyframes loading {
                            0% {
                                opacity: 1;
                                z-index: 99;
                                -ms-transform: rotate(180deg);
                                -ms-animation-timing-function: ease-out;
                            }
                            7% {
                                opacity: 1;
                                -ms-transform: rotate(300deg);
                                -ms-animation-timing-function: linear;
                                -ms-origin: 0%;
                            }
                            30% {
                                opacity: 1;
                                -ms-transform: rotate(410deg);
                                -ms-animation-timing-function: ease-in-out;
                                -ms-origin: 7%;
                            }
                            39% {
                                opacity: 1;
                                -ms-transform: rotate(645deg);
                                -ms-animation-timing-function: linear;
                                -ms-origin: 30%;
                            }
                            70% {
                                opacity: 1;
                                -ms-transform: rotate(770deg);
                                -ms-animation-timing-function: ease-out;
                                -ms-origin: 39%;
                            }
                            75% {
                                opacity: 1;
                                -ms-transform: rotate(900deg);
                                -ms-animation-timing-function: ease-out;
                                -ms-origin: 70%;
                            }
                            76% {
                                opacity: 0;
                                -ms-transform: rotate(900deg);
                            }
                            100% {
                                opacity: 0;
                                -ms-transform: rotate(900deg);
                            }
                        }
                    
License Terms