preloader style : demo 149

HTML

                        

CSS

                        .loader{
                            width: 200px;
                            height: 200px;
                            margin: 30px auto;
                            position: relative;
                        }
                        .loader:before,
                        .loader:after{
                            content: "";
                            border-width: 10vh;
                            border-style: solid;
                            border-color: #53dd6c #6d348e #f46036 #ffbe0b;
                            border-radius: 50%;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            -webkit-animation: loading 1.5s infinite ease-in-out;
                            animation: loading 1.5s infinite ease-in-out;
                        }
                        .loader:after{
                            width: 190px;
                            height: 190px;
                            border-width: 2.5vh;
                            animation-direction: reverse;
                        }
                        @-webkit-keyframes loading{
                            0%{ transform: translate(-50%, -50%) rotate(0); }
                            100%{ transform: translate(-50%, -50%) rotate(360deg); }
                        }
                        @keyframes loading{
                            0%{ transform: translate(-50%, -50%) rotate(0); }
                            100%{ transform: translate(-50%, -50%) rotate(360deg); }
                        }
                    
License Terms