preloader style : demo 255

HTML

                        

CSS

                        .loader{
                            width: 20px;
                            height: 20px;
                            margin: 70px auto;
                            position: relative;
                        }
                        .loader:before,
                        .loader:after {
                            content: '';
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            animation: animate 0.8s linear;
                        }
                        .loader:after{ animation: animate_1 0.8s 0.8s linear infinite; }
                        @keyframes animate{
                            0%{
                                box-shadow: #00cec9 0px -36px, #00cec9 25.45584px -25.45584px, #00cec9 36px 0px, #00cec9 25.45584px 25.45584px, #00cec9 0px 36px, #00cec9 -25.45584px 25.45584px, #00cec9 -36px 0px, #00cec9 -25.45584px -25.45584px;
                            }
                            11.1111%{
                                box-shadow: #00cec9 0px -41.4px, #00cec9 25.45584px -25.45584px, #00cec9 36px 0px, #00cec9 25.45584px 25.45584px, #00cec9 0px 36px, #00cec9 -25.45584px 25.45584px, #00cec9 -36px 0px, #00cec9 -25.45584px -25.45584px;
                            }
                            22.2222%{
                                box-shadow: #00cec9 0px -46.8px, #00cec9 29.27422px -29.27422px, #00cec9 36px 0px, #00cec9 25.45584px 25.45584px, #00cec9 0px 36px, #00cec9 -25.45584px 25.45584px, #00cec9 -36px 0px, #00cec9 -25.45584px -25.45584px;
                            }
                            33.3333%{
                                box-shadow: #00cec9 0px -52.2px, #00cec9 33.0926px -33.0926px, #00cec9 41.4px 0px, #00cec9 25.45584px 25.45584px, #00cec9 0px 36px, #00cec9 -25.45584px 25.45584px, #00cec9 -36px 0px, #00cec9 -25.45584px -25.45584px;
                            }
                            44.4444%{
                                box-shadow: #00cec9 0px -46.8px, #00cec9 36.91097px -36.91097px, #00cec9 46.8px 0px, #00cec9 29.27422px 29.27422px, #00cec9 0px 36px, #00cec9 -25.45584px 25.45584px, #00cec9 -36px 0px, #00cec9 -25.45584px -25.45584px;
                            }
                            55.5556%{
                                box-shadow: #00cec9 0px -41.4px, #00cec9 33.0926px -33.0926px, #00cec9 52.2px 0px, #00cec9 33.0926px 33.0926px, #00cec9 0px 41.4px, #00cec9 -25.45584px 25.45584px, #00cec9 -36px 0px, #00cec9 -25.45584px -25.45584px;
                            }
                            66.6667%{
                                box-shadow: #00cec9 0px -36px, #00cec9 29.27422px -29.27422px, #00cec9 46.8px 0px, #00cec9 36.91097px 36.91097px, #00cec9 0px 46.8px, #00cec9 -29.27422px 29.27422px, #00cec9 -36px 0px, #00cec9 -25.45584px -25.45584px;
                            }
                            77.7778%{
                                box-shadow: #00cec9 0px -36px, #00cec9 25.45584px -25.45584px, #00cec9 41.4px 0px, #00cec9 33.0926px 33.0926px, #00cec9 0px 52.2px, #00cec9 -33.0926px 33.0926px, #00cec9 -41.4px 0px, #00cec9 -25.45584px -25.45584px;
                            }
                            88.8889%{
                                box-shadow: #00cec9 0px -36px, #00cec9 25.45584px -25.45584px, #00cec9 36px 0px, #00cec9 29.27422px 29.27422px, #00cec9 0px 46.8px, #00cec9 -36.91097px 36.91097px, #00cec9 -46.8px 0px, #00cec9 -29.27422px -29.27422px;
                            }
                            100%{
                                box-shadow: #00cec9 0px -41.4px, #00cec9 25.45584px -25.45584px, #00cec9 36px 0px, #00cec9 25.45584px 25.45584px, #00cec9 0px 41.4px, #00cec9 -33.0926px 33.0926px, #00cec9 -52.2px 0px, #00cec9 -33.0926px -33.0926px;
                            }
                        }
                        @keyframes animate_1{
                            0%{
                                box-shadow: #00cec9 0px -41.4px, #00cec9 25.45584px -25.45584px, #00cec9 36px 0px, #00cec9 25.45584px 25.45584px, #00cec9 0px 41.4px, #00cec9 -33.0926px 33.0926px, #00cec9 -52.2px 0px, #00cec9 -33.0926px -33.0926px;
                            }
                            12.5%{
                                box-shadow: #00cec9 0px -46.8px, #00cec9 29.27422px -29.27422px, #00cec9 36px 0px, #00cec9 25.45584px 25.45584px, #00cec9 0px 36px, #00cec9 -29.27422px 29.27422px, #00cec9 -46.8px 0px, #00cec9 -36.91097px -36.91097px;
                            }
                            25%{
                                box-shadow: #00cec9 0px -52.2px, #00cec9 33.0926px -33.0926px, #00cec9 41.4px 0px, #00cec9 25.45584px 25.45584px, #00cec9 0px 36px, #00cec9 -25.45584px 25.45584px, #00cec9 -41.4px 0px, #00cec9 -33.0926px -33.0926px;
                            }
                            37.5%{
                                box-shadow: #00cec9 0px -46.8px, #00cec9 36.91097px -36.91097px, #00cec9 46.8px 0px, #00cec9 29.27422px 29.27422px, #00cec9 0px 36px, #00cec9 -25.45584px 25.45584px, #00cec9 -36px 0px, #00cec9 -29.27422px -29.27422px;
                            }
                            50% {
                                box-shadow: #00cec9 0px -41.4px, #00cec9 33.0926px -33.0926px, #00cec9 52.2px 0px, #00cec9 33.0926px 33.0926px, #00cec9 0px 41.4px, #00cec9 -25.45584px 25.45584px, #00cec9 -36px 0px, #00cec9 -25.45584px -25.45584px;
                            }
                            62.5%{
                                box-shadow: #00cec9 0px -36px, #00cec9 29.27422px -29.27422px, #00cec9 46.8px 0px, #00cec9 36.91097px 36.91097px, #00cec9 0px 46.8px, #00cec9 -29.27422px 29.27422px, #00cec9 -36px 0px, #00cec9 -25.45584px -25.45584px;
                            }
                            75%{
                                box-shadow: #00cec9 0px -36px, #00cec9 25.45584px -25.45584px, #00cec9 41.4px 0px, #00cec9 33.0926px 33.0926px, #00cec9 0px 52.2px, #00cec9 -33.0926px 33.0926px, #00cec9 -41.4px 0px, #00cec9 -25.45584px -25.45584px;
                            }
                            87.5%{
                                box-shadow: #00cec9 0px -36px, #00cec9 25.45584px -25.45584px, #00cec9 36px 0px, #00cec9 29.27422px 29.27422px, #00cec9 0px 46.8px, #00cec9 -36.91097px 36.91097px, #00cec9 -46.8px 0px, #00cec9 -29.27422px -29.27422px;
                            }
                            100%{
                                box-shadow: #00cec9 0px -41.4px, #00cec9 25.45584px -25.45584px, #00cec9 36px 0px, #00cec9 25.45584px 25.45584px, #00cec9 0px 41.4px, #00cec9 -33.0926px 33.0926px, #00cec9 -52.2px 0px, #00cec9 -33.0926px -33.0926px;
                            }
                        }
                    
License Terms