preloader style : demo 103

HTML

                        

CSS

                        .loader{
                            height: 24px;
                            margin: 70px auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 24px;
                            height: 24px;
                            border-radius: 50%;
                            background: #3626a7;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            margin-top: -12px;
                            margin-left: -12px;
                        }
                        .loader .loader-inner:first-child{
                            margin-left: -52px;
                        }
                        .loader .loader-inner:last-child{
                            margin-left: 28px;
                        }
                        .loader .loader-inner:before{
                            content: "";
                            display: block;
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            background: #fff;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }
                        .loader .loader-inner:nth-child(1){
                            -webkit-animation: loading-1 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
                            animation: loading-1 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
                        }
                        .loader .loader-inner:nth-child(1):before{
                            -webkit-animation: loading-2 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
                            animation: loading-2 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
                        }
                        .loader .loader-inner:nth-child(2){
                            -webkit-animation: loading-3 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
                            animation: loading-3 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
                        }
                        .loader .loader-inner:nth-child(2):before{
                            -webkit-animation: loading-4 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
                            animation: loading-4 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
                        }
                        .loader .loader-inner:nth-child(3){
                            -webkit-animation: loading-5 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
                            animation: loading-5 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
                        }
                        .loader .loader-inner:nth-child(3):before{
                            -webkit-animation: loading-6 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
                            animation: loading-6 2.1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
                        }
                        @-webkit-keyframes loading-1{
                            0%, 25%, 50%, 75%, 100% {
                                -webkit-transform: scale(0.2);
                                transform: scale(0.2);
                            }
                            25% {
                                -webkit-transform: scale(1);
                                transform: scale(1);
                            }
                        }
                        @keyframes loading-1{
                            0%, 25%, 50%, 75%, 100% {
                                -webkit-transform: scale(0.2);
                                transform: scale(0.2);
                            }
                            25% {
                                -webkit-transform: scale(1);
                                transform: scale(1);
                            }
                        }
                        @-webkit-keyframes loading-2{
                            0%, 25%, 50%, 75%, 100% {
                                -webkit-transform: scale(0);
                                transform: scale(0);
                            }
                            25% {
                                -webkit-transform: scale(0.8);
                                transform: scale(0.8);
                            }
                        }
                        @keyframes loading-2{
                            0%, 25%, 50%, 75%, 100% {
                                -webkit-transform: scale(0);
                                transform: scale(0);
                            }
                            25% {
                                -webkit-transform: scale(0.8);
                                transform: scale(0.8);
                            }
                        }
                        @-webkit-keyframes loading-3{
                            0%, 25%, 50%, 75%, 100% {
                                -webkit-transform: scale(0.2);
                                transform: scale(0.2);
                            }
                            50% {
                                -webkit-transform: scale(1);
                                transform: scale(1);
                            }
                        }
                        @keyframes loading-3{
                            0%, 25%, 50%, 75%, 100% {
                                -webkit-transform: scale(0.2);
                                transform: scale(0.2);
                            }
                            50% {
                                -webkit-transform: scale(1);
                                transform: scale(1);
                            }
                        }
                        @-webkit-keyframes loading-4{
                            0%, 25%, 50%, 75%, 100% {
                                -webkit-transform: scale(0);
                                transform: scale(0);
                            }
                            50% {
                                -webkit-transform: scale(0.8);
                                transform: scale(0.8);
                            }
                        }
                        @keyframes loading-4{
                            0%, 25%, 50%, 75%, 100% {
                                -webkit-transform: scale(0);
                                transform: scale(0);
                            }
                            50% {
                                -webkit-transform: scale(0.8);
                                transform: scale(0.8);
                            }
                        }
                        @-webkit-keyframes loading-5{
                            0%, 25%, 50%, 75%, 100% {
                                -webkit-transform: scale(0.2);
                                transform: scale(0.2);
                            }
                            75% {
                                -webkit-transform: scale(1);
                                transform: scale(1);
                            }
                        }
                        @keyframes loading-5{
                            0%, 25%, 50%, 75%, 100% {
                                -webkit-transform: scale(0.2);
                                transform: scale(0.2);
                            }
                            75% {
                                -webkit-transform: scale(1);
                                transform: scale(1);
                            }
                        }
                        @-webkit-keyframes loading-6{
                            0%, 25%, 50%, 75%, 100% {
                                -webkit-transform: scale(0);
                                transform: scale(0);
                            }
                            75% {
                                -webkit-transform: scale(0.8);
                                transform: scale(0.8);
                            }
                        }
                        @keyframes loading-6{
                            0%, 25%, 50%, 75%, 100% {
                                -webkit-transform: scale(0);
                                transform: scale(0);
                            }
                            75% {
                                -webkit-transform: scale(0.8);
                                transform: scale(0.8);
                            }
                        }
                    
License Terms