preloader style : demo 213

                        .demo{ background: linear-gradient(to right,#7b4379,#dc2430);}
                        .preloader{
                            height: 80px;
                            width: 80px;
                            margin: 20px auto 0;
                            position: relative;
                        }
                        .preloader:before,
                        .preloader:after{
                            content: '';
                            height: 100%;
                            width: 100%;
                            border: 9px solid #fff;
                            border-color: transparent #fff;
                            position: absolute;
                            left: 0;
                            top: 0;
                            animation: spin 2.2s linear 0s infinite normal;
                        }
                        .preloader:after{
                            width: 50%;
                            height: 50%;
                            margin: auto;
                            border-style: dotted;
                            border-radius: 50px;
                            left: 0;
                            top: 0;
                            bottom: 0;
                            right: 0;
                            animation: spinback 1.5s linear 0s infinite normal;
                        }
                        @keyframes spin{
                            from{ transform: rotate(0); }
                            to{ transform: rotate(360deg); }
                        }
                        @keyframes spinback{
                            from{ transform:rotate(0); }
                            to{ transform:rotate(-360deg); }
                        }