preloader style : demo 191

HTML

                        

CSS

                        .demo{ background: #0b6e71; }
                        .loader{
                            width: 100%;
                            height: 200px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            overflow: hidden;
                        }
                        .loader .loader-inner{
                            width: 10px;
                            height: 10px;
                            position: relative;
                        }
                        .loader .box{
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            background: #ffdd04;
                            position: absolute;
                            -webkit-animation: loading-1 .8s linear infinite;
                            animation: loading-1 .8s linear infinite;
                        }
                        .loader .box:nth-of-type(1){
                            left: 100%;
                            -webkit-transform-origin: 80px bottom;
                            transform-origin: 80px bottom;
                        }
                        .loader .box:nth-of-type(2){
                            right: 100%;
                            -webkit-transform-origin: -80px top;
                            transform-origin: -80px top;
                        }
                        @-webkit-keyframes loading-1{
                            60%{
                                -webkit-transform: rotate(340deg);
                                transform: rotate(340deg);
                            }
                            100%{
                                -webkit-transform: rotate(360deg);
                                transform: rotate(360deg);
                            }
                        }
                        @keyframes loading-1{
                            60%{
                                -webkit-transform: rotate(340deg);
                                transform: rotate(340deg);
                            }
                            100%{
                                -webkit-transform: rotate(360deg);
                                transform: rotate(360deg);
                            }
                        }
                    
License Terms