preloader style : demo 238

                        

                            

                                

                                

                            
                            
 Loading
                        
                    

                        :root{
                          --c_01: #ff1ead;
                          --c_02: #000;
                          --c_03: #fff;
                          --size: 12vmin;
                          --loader_w: calc(var(--size) * 6);
                          --loader_h: calc(var(--size) * 2.3);
                          --bubble: calc(var(--size) * 1.5);
                          --shine: calc(var(--size) / 5);
                        }
                        .demo{ background-color: var(--c_02); }
                        .loader{
                            font-family: 'Major Mono Display', monospace;
                            padding: 65px 0 0;
                            margin: 20px auto 0;
                            position: relative;
                        }
                        .bubble{
                            background-color: var(--c_01);
                            width: var(--bubble);
                            height: var(--bubble);
                            border-radius: 50%;
                            outline: 1px solid transparent;
                            transform: scale(0.5) translateY(50%);
                            position: absolute;
                            bottom: calc(var(--size) / 1.3);
                            left: 50%;
                            animation: blow 1.3s linear alternate infinite;
                        }
                        .bubble__shine{
                            background-color: var(--c_03);
                            position: absolute;
                        }
                        .bubble__shine--lg{
                            width: var(--shine);
                            height: calc(var(--shine) * 2.5);
                            border-radius: 100% 50% 40% 100% / 50% 30% 30% 100%;
                            transform: rotateZ(60deg);
                            top: 2%;
                            left: 26%;
                        }
                        .bubble__shine--sm{
                            width: calc(var(--shine) / 2);
                            height: calc(var(--shine) / 2);
                            border-radius: 50% 50% 40% 100% / 50% 50% 50% 100%;
                            top: 32%;
                            left: 9%;
                        }
                        .text{
                            color: var(--c_01);
                            font-size: var(--size);
                            text-align: center;
                            text-transform: uppercase;
                            margin: 0;
                        }
                        .text__highlight{ color: var(--c_03); }
                        @keyframes blow{
                          0%{ transform: scale(0.5) translateY(50%); }
                          20%{ transform: scale(0.6) translateY(33%); }
                          40%{ transform: scale(0.7) translateY(21%); }
                          60%{ transform: scale(0.8) translateY(12%); }
                          80%{ transform: scale(0.9) translateY(5%); }
                          93%, 100%{ transform: scale(1) translateY(0) translateZ(0); }
                        }