preloader style : demo 304

HTML

                        

CSS

                        .loader{
                            width: 200px;
                            height: 175px;
                            margin: 0 auto;
                            position: relative;
                        }
                        .loader:before{
                            content: '';
                            background-color: #e7e7e7;
                            width: 100px;
                            height: 100px;
                            border-radius: 100px;
                            transform: translateX(-50%) rotateX(65deg);
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                        }
                        .loader:after{
                            content: '';
                            background: #DC005A;
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            transform: translateX(-50%);
                            position: absolute;
                            left: 50%;
                            animation: bounce .98s ease-out 0s infinite;
                        }
                        @keyframes bounce{
                            0%,100%{ margin-top: 5px; }
                            5%,95%{ margin-top: 10px; }
                            10%,90%{ margin-top: 20px; }
                            15%,85%{ margin-top: 30px; }
                            20%{ margin-top: 40px; }
                            25%{ margin-top: 50px; }
                            30%{ margin-top: 60px; }
                            35%{ margin-top: 70px; }
                            40%{ margin-top: 80px; }
                            45%{
                                margin-top: 90px;
                                transform: translateX(-50%) scaleX(1.1);
                            }
                            50%{
                                margin-top: 100px;
                                transform: translateX(-50%) scaleX(1.6);
                            }
                            55%{
                                margin-top: 90px;
                                transform: translateX(-50%) scaleY(0.5);
                            }
                            60%{
                                margin-top: 80px;
                                transform: translateX(-50%) scaleX(0.6);
                            }
                            65%{
                                margin-top: 70px;
                                transform: translateX(-50%) scaleX(0.7);
                            }
                            70%{
                                margin-top: 60px;
                                transform: translateX(-50%) scaleX(0.8);
                            }
                            75%{
                                margin-top: 50px;
                                transform: translateX(-50%) scaleX(0.9);
                            }
                            80%{
                                margin-top: 40px;
                                transform: translateX(-50%) scaleX(1);
                            }
                        }
                    
License Terms