preloader style : demo 60

HTML

                        

CSS

                        .loader{
                            width: 46px;
                            height: 46px;
                            border-radius: 50%;
                            position: relative;
                            background: #ddd;
                            margin: 50px auto;
                            overflow: hidden;
                            box-shadow: 0 0 10px rgba(0, 0, 0, .1) inset, 0 0 25px rgba(0, 0, 255, 0.075);
                        }
                        .loader:after{
                            content: "";
                            display: block;
                            width: 13px;
                            height: 13px;
                            border-radius: 50%;
                            position: absolute;
                            top: 18%;
                            left: 17%;
                            border: 15px double #ddd;
                        }
                        .loader > span{
                            width: 50%;
                            height: 100%;
                            position: absolute;
                            overflow: hidden;
                        }
                        .loader .box-1{ left: 0; }
                        .loader .box-2{ left: 50%; }
                        .loader .loader-inner{
                            width: 100%;
                            height: 100%;
                            border-radius: 999px;
                            position: absolute;
                            top: 0;
                            left: 100%;
                            background: #0a9a8b;
                            opacity: 0.8;
                            -webkit-animation: loading 3s infinite;
                            animation: loading 3s infinite;
                            -webkit-transform-origin: 0 50% 0;
                            transform-origin: 0 50% 0;
                        }
                        .loader .box-1 .loader-inner{
                            border-top-left-radius: 0;
                            border-bottom-left-radius: 0;
                        }
                        .loader .box-2 .loader-inner{
                            border-top-right-radius: 0;
                            border-bottom-right-radius: 0;
                            left: -100%;
                            -webkit-transform-origin: 100% 50% 0;
                            transform-origin: 100% 50% 0;
                        }
                        @-webkit-keyframes loading{
                            0% {
                                -webkit-transform: rotate(0deg)
                            }
                            25% {
                                -webkit-transform: rotate(0deg)
                            }
                            50% {
                                -webkit-transform: rotate(180deg)
                            }
                            75% {
                                -webkit-transform: rotate(180deg)
                            }
                            100% {
                                -webkit-transform: rotate(360deg)
                            }
                        }
                        @keyframes loading{
                            0% {
                                transform: rotate(0deg)
                            }
                            25% {
                                transform: rotate(0deg)
                            }
                            50% {
                                transform: rotate(180deg)
                            }
                            75% {
                                transform: rotate(180deg)
                            }
                            100% {
                                transform: rotate(360deg)
                            }
                        }
                    
License Terms