preloader style : demo 75

HTML

                        

CSS

                        .demo{
                            background: #4b4673;
                        }
                        .loader{
                            width: 150px;
                            height: 150px;
                            margin: 30px auto;
                            position: relative;
                        }
                        .loading{
                            position: absolute;
                            border-top: 2px solid #ed8a87;
                            border-bottom: 2px solid transparent;
                            border-left:  2px solid #ed8a87;
                            border-right: 2px solid transparent;
                            border-radius: 50%;
                            -webkit-animation: loading-1 2s infinite;
                            animation: loading-1 2s infinite;
                        }
                        .loader .loader-inner-1{
                            width: 50px;
                            height: 50px;
                            top: 50px;
                            left: 50px;
                        }
                        .loader .loader-inner-2{
                            width: 70px;
                            height: 70px;
                            top: 40px;
                            left: 40px;
                            -webkit-animation-delay: 0.2s;
                            animation-delay: 0.2s;
                        }
                        .loader .loader-inner-3{
                            width: 90px;
                            height: 90px;
                            top: 30px;
                            left: 30px;
                            -webkit-animation-delay: 0.4s;
                            animation-delay: 0.4s;
                        }
                        .loader .loader-inner-4{
                            width: 110px;
                            height: 110px;
                            top: 20px;
                            left: 20px;
                            -webkit-animation-delay: 0.6s;
                            animation-delay: 0.6s;
                        }
                        @-webkit-keyframes loading-1{
                            50% { -webkit-transform: rotate(360deg) scale(0.8); transform: rotate(360deg) scale(0.8); }
                        }
                        @keyframes loading-1{
                            50% { -webkit-transform: rotate(360deg) scale(0.8); transform: rotate(360deg) scale(0.8); }
                        }
                    
License Terms