preloader style : demo 178

HTML

                        

CSS

                        .loader{
                            width: 200px;
                            height: 200px;
                            margin: 0 auto;
                            position: relative;
                        }
                        .loader:before,
                        .loader:after{
                            content: "";
                            width: 80px;
                            height: 80px;
                            border-radius: 50%;
                            border-width: 32px;
                            border-style: double;
                            border-color: #ea1756 #ffc1d4 #ea1756 #ffc1d4;
                            margin: -84px 0 0 -84px;
                            position: absolute;
                            top: 70%;
                            left: 70%;
                            animation: 3s loading-2 linear infinite;
                        }
                        .loader:after{
                            width: 168px;
                            height: 168px;
                            border-color: #ea1756 #ffc1d4 #ea1756 #ffc1d4;
                            margin: -128px 0 0 -128px;
                            animation: 1.5s loading-1 linear infinite;
                        }
                        @keyframes loading-1{
                            100%{
                                -webkit-transform: rotate(360deg);
                                transform: rotate(360deg)
                            }
                        }
                        @keyframes loading-2{
                            100%{
                                -webkit-transform: rotate(-360deg);
                                transform: rotate(-360deg)
                            }
                        }
                    
License Terms