preloader style : demo 59

HTML

                        

CSS

                        .loader{
                            width: 85px;
                            height: 85px;
                            position: relative;
                            margin: 50px auto;
                        }
                        .loader-inner{
                            border: 40px solid #000;
                            border-radius: 50%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            animation: 750ms linear 0s normal none infinite running loading;
                        }
                        @-webkit-keyframes loading{
                            0% {
                                border-color: #000 rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75);
                            }
                            25% {
                                border-color: rgba(0, 0, 0, 0.75) #000 rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5);
                            }
                            50% {
                                border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75) #000 rgba(0, 0, 0, 0.25);
                            }
                            75% {
                                border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75) rgba(0, 0, 0, 0.75);
                            }
                            100% {
                                border-color: #000 rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75);
                            }
                        }
                        @keyframes loading{
                            0% {
                                border-color: #000 rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75);
                            }
                            25% {
                                border-color: rgba(0, 0, 0, 0.75) #000 rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5);
                            }
                            50% {
                                border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75) #000 rgba(0, 0, 0, 0.25);
                            }
                            75% {
                                border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75) rgba(0, 0, 0, 0.75);
                            }
                            100% {
                                border-color: #000 rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.75);
                            }
                        }
                    
License Terms