preloader style : demo 230

HTML

                        

CSS

                        .demo{ background: #1B9CFC; }
                        .loader{
                            width: 16em;
                            height: 8em;
                            margin: 50px auto 0;
                            position: relative;
                            overflow: hidden;
                        }
                        .loader:before,
                        .loader:after{
                            content: '';
                            position: absolute;
                            bottom: 0;
                        }
                        .loader:before{
                            background-color: hsla(0, 0%, 85%);
                            width: inherit;
                            height: 0.2em;
                        }
                        .loader:after{
                            width: 50%;
                            height: inherit;
                            border: 0.2em solid hsla(0, 0%, 85%);
                            border-radius: 50%;
                            left: 25%;
                        }
                        .loader span{
                            background-color: #fff;
                            width: 5%;
                            height: 10%;
                            border-radius: 50%;
                            transform-origin: 50% -3em;
                            position: absolute;
                            left: -5%;
                            bottom: 0.2em;
                            animation: 2s linear infinite;
                            animation-name: run, rotating;
                        }
                        .loader span:nth-child(2){ animation-delay: 0.075s; }
                        .loader span:nth-child(3){ animation-delay: 0.15s; }
                        @keyframes run{
                            0%{ left: -5%; }
                            10%, 60%{ left: calc((100% - 5%) / 2); }
                            70%, 100%{ left: 100%; }
                        }
                        @keyframes rotating{
                            0%, 10%{ transform: rotate(0deg); }
                            60%, 100%{ transform: rotate(-1turn); }
                        }
                    
License Terms