preloader style : demo 111

HTML

                        

CSS

                        .demo{ background: #10a9c4; }
                        .loader{
                            width: 100px;
                            height: 100px;
                            border-radius: 50%;
                            border: 2px solid rgba(255,255,255,1);
                            text-align: center;
                            margin: 30px auto;
                            overflow: hidden;
                            z-index: 1;
                            position: relative;
                        }
                        .loader:before,
                        .loader:after{
                            content: "";
                            position: absolute;
                        }
                        .loader:before{
                            width: 100px;
                            height: 30px;
                            background: rgba(255,255,255,1);
                            bottom: 0;
                            left: -2px;
                        }
                        .loader:after{
                            width: 50px;
                            height: 2px;
                            background: rgba(255,255,255,1);
                            bottom: 30px;
                            -webkit-transform-origin: 1px 1px;
                            -moz-transform-origin: 1px 1px;
                            transform-origin: 1px 1px;
                            -webkit-animation: loading-1 2s linear infinite alternate;
                            animation: loading-1 2s linear infinite alternate;
                        }
                        @-webkit-keyframes loading-1{
                            0%{ -webkit-transform: rotate(-160deg);}
                            100%{ -webkit-transform: rotate(-20deg);}
                        }
                        @keyframes loading-1{
                            0%{ transform: rotate(-160deg); }
                            100%{ transform: rotate(-20deg); }
                        }
                    
License Terms