preloader style : demo 50

HTML

                        

CSS

                        .loader {
                            width: 200px;
                            height: 200px;
                            text-align: center;
                            margin: 20px auto;
                            position: relative;
                        }
                        .loader-inner1 {
                            position: absolute;
                            width: 200px;
                            height: 200px;
                            border: 5px solid #f794c2;
                            -webkit-animation: loading3 3s infinite;
                            animation: loading3 3s infinite;
                            -webkit-animation-delay: 0.5s;
                            animation-delay: 0.5s;
                            -webkit-animation-timing-function: ease-in-out;
                            animation-timing-function: ease-in-out;
                        }
                        .loader-inner2 {
                            margin-left: 20px;
                            margin-top: 20px;
                            position: absolute;
                            width: 160px;
                            height: 160px;
                            border: 5px solid #f794c2;
                            -webkit-animation: loading2 3s infinite;
                            animation: loading2 3s infinite;
                            -webkit-animation-delay: 0.4s;
                            animation-delay: 0.4s;
                            -webkit-animation-timing-function: ease-in-out;
                            animation-timing-function: ease-in-out;
                        }
                        .loader-inner3 {
                            margin-left: 40px;
                            margin-top: 40px;
                            position: absolute;
                            width: 120px;
                            height: 120px;
                            border: 5px solid #f794c2;
                            -webkit-animation: loading 3s infinite;
                            animation: loading 3s infinite;
                            -webkit-animation-delay: 0.3s;
                            animation-delay: 0.3s;
                            -webkit-animation-timing-function: ease-in-out;
                            animation-timing-function: ease-in-out;
                        }
                        .loader-inner4 {
                            margin-left: 60px;
                            margin-top: 60px;
                            position: absolute;
                            width: 80px;
                            height: 80px;
                            border: 5px solid #f794c2;
                            -webkit-animation: loading4 3s infinite;
                            animation: loading4 3s infinite;
                            -webkit-animation-delay: 0.2s;
                            animation-delay: 0.2s;
                            -webkit-animation-timing-function: ease-in-out;
                            animation-timing-function: ease-in-out;
                        }
                        .loader-inner5 {
                            margin-left: 80px;
                            margin-top: 80px;
                            position: absolute;
                            width: 40px;
                            height: 40px;
                            border: 5px solid #f794c2;
                            -webkit-animation: loading5 3s infinite;
                            animation: loading5 3s infinite;
                            -webkit-animation-delay: 0.1s;
                            animation-delay: 0.1s;
                            -webkit-animation-timing-function: ease-in-out;
                            animation-timing-function: ease-in-out;
                        }
                        .loader-inner6 {
                            margin-left: 95px;
                            margin-top: 95px;
                            width: 10px;
                            height: 10px;
                            background: #f794c2;
                            position: absolute;
                            animation: 3s ease-in-out 0s normal none infinite running loading6;
                        }
                        @-webkit-keyframes loading {
                            0% {
                                -webkit-transform: rotate(0deg);
                                -ms-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            85% {
                                -webkit-transform: rotate(360deg);
                                -ms-transform: rotate(360deg);
                                transform: rotate(360deg);
                            }
                            100% {
                                -webkit-transform: rotate(360deg);
                                -ms-transform: rotate(360deg);
                                transform: rotate(360deg);
                            }
                        }
                        @keyframes loading {
                            0% {
                                -webkit-transform: rotate(0deg);
                                -ms-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            85% {
                                -webkit-transform: rotate(360deg);
                                -ms-transform: rotate(360deg);
                                transform: rotate(360deg);
                            }
                            100% {
                                -webkit-transform: rotate(360deg);
                                -ms-transform: rotate(360deg);
                                transform: rotate(360deg);
                            }
                        }
                        @-webkit-keyframes loading2 {
                            0% {
                                -webkit-transform: rotate(0deg);
                                -ms-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            85% {
                                -webkit-transform: rotate(180deg);
                                -ms-transform: rotate(180deg);
                                transform: rotate(180deg);
                            }
                            100% {
                                -webkit-transform: rotate(180deg);
                                -ms-transform: rotate(180deg);
                                transform: rotate(180deg);
                            }
                        }
                        @keyframes loading2 {
                            0% {
                                -webkit-transform: rotate(0deg);
                                -ms-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            85% {
                                -webkit-transform: rotate(180deg);
                                -ms-transform: rotate(180deg);
                                transform: rotate(180deg);
                            }
                            100% {
                                -webkit-transform: rotate(180deg);
                                -ms-transform: rotate(180deg);
                                transform: rotate(180deg);
                            }
                        }
                        @-webkit-keyframes loading3 {
                            0% {
                                -webkit-transform: rotate(0deg);
                                -ms-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            85% {
                                -webkit-transform: rotate(90deg);
                                -ms-transform: rotate(90deg);
                                transform: rotate(90deg);
                            }
                            100% {
                                -webkit-transform: rotate(90deg);
                                -ms-transform: rotate(90deg);
                                transform: rotate(90deg);
                            }
                        }
                        @keyframes loading3 {
                            0% {
                                -webkit-transform: rotate(0deg);
                                -ms-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            85% {
                                -webkit-transform: rotate(90deg);
                                -ms-transform: rotate(90deg);
                                transform: rotate(90deg);
                            }
                            100% {
                                -webkit-transform: rotate(90deg);
                                -ms-transform: rotate(90deg);
                                transform: rotate(90deg);
                            }
                        }
                        @-webkit-keyframes loading4 {
                            0% {
                                -webkit-transform: rotate(0deg);
                                -ms-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            85% {
                                -webkit-transform: rotate(450deg);
                                -ms-transform: rotate(450deg);
                                transform: rotate(450deg);
                            }
                            100% {
                                -webkit-transform: rotate(450deg);
                                -ms-transform: rotate(450deg);
                                transform: rotate(450deg);
                            }
                        }
                        @keyframes loading4 {
                            0% {
                                -webkit-transform: rotate(0deg);
                                -ms-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            85% {
                                -webkit-transform: rotate(450deg);
                                -ms-transform: rotate(450deg);
                                transform: rotate(450deg);
                            }
                            100% {
                                -webkit-transform: rotate(450deg);
                                -ms-transform: rotate(450deg);
                                transform: rotate(450deg);
                            }
                        }
                        @-webkit-keyframes loading5 {
                            0% {
                                -webkit-transform: rotate(0deg);
                                -ms-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            85% {
                                -webkit-transform: rotate(540deg);
                                -ms-transform: rotate(540deg);
                                transform: rotate(540deg);
                            }
                            100% {
                                -webkit-transform: rotate(540deg);
                                -ms-transform: rotate(540deg);
                                transform: rotate(540deg);
                            }
                        }
                        @keyframes loading5 {
                            0% {
                                -webkit-transform: rotate(0deg);
                                -ms-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            85% {
                                -webkit-transform: rotate(540deg);
                                -ms-transform: rotate(540deg);
                                transform: rotate(540deg);
                            }
                            100% {
                                -webkit-transform: rotate(540deg);
                                -ms-transform: rotate(540deg);
                                transform: rotate(540deg);
                            }
                        }
                        @-webkit-keyframes loading6 {
                            0% {
                                -webkit-transform: rotate(0deg);
                                -ms-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            85% {
                                -webkit-transform: rotate(630deg);
                                -ms-transform: rotate(630deg);
                                transform: rotate(630deg);
                            }
                            100% {
                                -webkit-transform: rotate(630deg);
                                -ms-transform: rotate(630deg);
                                transform: rotate(630deg);
                            }
                        }
                        @keyframes loading6 {
                            0% {
                                -webkit-transform: rotate(0deg);
                                -ms-transform: rotate(0deg);
                                transform: rotate(0deg);
                            }
                            85% {
                                -webkit-transform: rotate(630deg);
                                -ms-transform: rotate(630deg);
                                transform: rotate(630deg);
                            }
                            100% {
                                -webkit-transform: rotate(630deg);
                                -ms-transform: rotate(630deg);
                                transform: rotate(630deg);
                            }
                        }
                    
License Terms