preloader style : demo 57

HTML

                        

CSS

                        .loader{
                            width: 70px;
                            text-align: center;
                            margin: 50px auto;
                        }
                        .loader-inner{
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            position: relative;
                            display: inline-flex;
                            animation: loading 1.5s infinite linear;
                            -webkit-animation: loading 1.5s infinite linear;
                        }
                        .loader-inner:before{
                            content: "";
                            width: 10%;
                            height: 10%;
                            border-radius: 50%;
                            position: absolute;
                            top: 90%;
                            left: 30%;
                            border: 3px solid #4f9c3a;
                            z-index: 1;
                        }
                        .loader-inner:after{
                            content: "";
                            width: 80%;
                            height: 80%;
                            border-radius: 50%;
                            position: absolute;
                            top: 10%;
                            left: 10%;
                            border: 5px solid #cfd8dc;
                            z-index: 1;
                        }
                        @-webkit-keyframes loading{
                            0% {
                                transform: rotateZ(0deg);
                                -webkit-transform: rotateZ(0deg);
                            }
                            100% {
                                transform: rotateZ(360deg);
                                -webkit-transform: rotateZ(360deg);
                            }
                        }
                        @keyframes loading{
                            0% {
                                transform: rotateZ(0deg);
                                -webkit-transform: rotateZ(0deg);
                            }
                            100% {
                                transform: rotateZ(360deg);
                                -webkit-transform: rotateZ(360deg);
                            }
                        }
                    
License Terms