preloader style : demo 28

HTML

                        

CSS

                        .box{
                            margin: 30px 0;
                        }
                        .loader {
                            display: block;
                            position: relative;
                            width: 90px;
                            height: 90px;
                            border-radius: 50%;
                            border: 3px solid #00b796;
                            margin: 0 auto;
                            animation-delay:0.2s
                        }
                        .loader:before {
                            content: "";
                            width: 58px;
                            height: 58px;
                            border-radius: 50%;
                            display: block;
                            position: absolute;
                            top: 53%;
                            left: 53%;
                            border: 3px solid #d94e67;
                            margin: -32px 0 0 -32px;
                            animation-delay:0.4s
                        }
                        .loader:after {
                            content: "";
                            display: block;
                            position: absolute;
                            border: 3px solid #ffca00;
                            width: 26px;
                            height: 26px;
                            top: 53%;
                            left: 53%;
                            margin: -16px 0 0 -16px;
                            border-radius: 50%;
                            animation-delay:0.6s
                        }
                        .loader,
                        .loader:before,
                        .loader:after {
                            animation-name: Scale;
                            animation-duration: 3s;
                            animation-iteration-count: infinite;
                            animation-timing-function: ease-in-out;
                            animation-direction: alternate;
                            -webkit-animation-name: Scale;
                            -webkit-animation-duration: 3s;
                            -webkit-animation-iteration-count: infinite;
                            -webkit-animation-timing-function: ease-in-out;
                            -webkit-animation-direction: alternate;
                        }
                        @keyframes Scale {
                            25% {
                                transform: scale(-1.2, 1.2)
                            }
                            50% {
                                transform: scale(-1, -1)
                            }
                            75% {
                                transform: scale(1.2, -1.2)
                            }
                            100% {transform: scale(1, 1)}
                        }
                        @-webkit-keyframes Scale {
                            25% {
                                -webkit-transform: scale(-1.2, 1.2)
                            }
                            50% {
                                -webkit-transform: scale(-1, -1)
                            }
                            75% {
                                -webkit-transform: scale(1.2, -1.2)
                            }
                        }
                    
License Terms