preloader style : demo 210

HTML

                        

CSS

                        .demo{ background-color: #ea2a3d; }
                        .preloader{
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-top: 25px;
                        }
                        .loader{
                            background-color: #c0b283;
                            width: 12em;
                            height: 12em;
                            margin: 0 auto;
                            border-radius: 50%;
                            box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
                            position: relative;
                            animation: bottom-ripple 1s ease-in-out infinite -50ms;
                        }
                        .loader::before,
                        .loader::after {
                            content: "";
                            border-radius: inherit;
                            box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
                            position: absolute;
                            left: 50%;
                            top: 50%;
                        }
                        .loader::before{
                            background-color: #dcd0c0;
                            height: 8em;
                            width: 8em;
                            margin: -4em 0 0 -4em;
                            animation: middle-ripple 1s ease-in-out infinite -25ms;
                        }
                        .loader::after{
                            background-color: #f4f4f4;
                            height: 4em;
                            width: 4em;
                            margin: -2em 0 0 -2em;
                            animation: top-ripple 1s ease-in-out infinite;
                        }
                        @keyframes bottom-ripple{
                            0%{
                                box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
                                transform: scale(1);
                            }
                            50%{
                                box-shadow: 0 1.5em 1.5em rgba(0,0,0, 0.4);
                                transform: scale(1.25);
                            }
                        }
                        @keyframes middle-ripple{
                            0%{
                                box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
                                transform: scale(1);
                            }
                            50%{
                            box-shadow: 0 1.5em 1.5em rgba(0,0,0, 0.4);
                            transform: scale(1.1);
                            }
                        }
                        @keyframes top-ripple{
                            0%{
                                box-shadow: 0 0.5em 0.5em rgba(0,0,0, 0.4);
                                transform: scale(1);
                            }
                            50%{
                                box-shadow: 0 1.5em 1.5em rgba(0,0,0, 0.4);
                                transform: scale(1.4);
                            }
                        }
                    
License Terms