preloader style : demo 316

HTML

                        

CSS

                    .loader{
                        width: 70px;
                        height: 300px;
                        position: relative;
                        margin: 0 auto;
                    }
                    .loader div{
                        background-color: #14213d; 
                        width: 48px;
                        height: 48px;
                        border-radius: 5px;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        z-index: 1;
                        animation: jump 2.25s linear infinite;
                    }
                    .loader div:nth-child(1):after{
                        content: '';
                        width: calc(48px * 2 / 3);
                        height: calc(48px * 2 / 3);
                        border-radius: 50%;
                        border-top: 4px solid #14213d;
                        border-left: 4px solid #14213d;
                        transform: rotate(135deg);
                        position: absolute;
                        left: 28px;
                        bottom: calc(48px / 6);
                    }
                    .loader div:nth-child(2){
                        background-color: #fca311;
                        width: calc(48px / 2);
                        height: calc(48px / 2);
                        left: calc(5px * 2.2);
                        z-index: 0;
                        animation: jump1 2.25s linear infinite;
                    }
                    .loader div:nth-child(3){
                        background-color: #f72585;
                        width: calc(48px / 3);
                        height: calc(48px / 3);
                        left: calc(5px * 5 / 2);
                        z-index: 0;
                        animation: jump2 2.25s linear infinite;
                    }
                    @keyframes jump{
                        0%{
                            transform: scaleY(1) scaleX(1);
                            transform-origin: bottom;
                            bottom: 0;
                        }
                        8%{
                            transform: scaleY(0.5) scaleX(1.4);
                            transform-origin: bottom;
                            bottom: 0;
                            animation-timing-function: cubic-bezier(0, 0.8, 0.74, 1);
                        }
                        25%{
                            transform: scaleY(1) scaleX(1);
                            bottom: calc(48px * 3);
                            animation-timing-function: cubic-bezier(0.8, 0.42, 1, 0.64);
                        }
                        95%{
                            transform: scaleY(1) scaleX(1) rotate(0turn);
                            bottom: 0;
                        }
                        100%{
                            transform: scaleY(1) scaleX(1) rotate(0turn);
                            bottom: 0;
                        }
                    }
                    @keyframes jump1{
                        0%{
                            transform: scaleY(1) scaleX(1);
                            transform-origin: bottom;
                            bottom: 0;
                        }
                        8%{
                            transform: scaleY(1) scaleX(1);
                            transform-origin: bottom;
                            bottom: 0;
                            animation-timing-function: cubic-bezier(0, 0.8, 0.74, 1);
                        }
                        55%{
                            transform: scaleY(1) scaleX(1) rotate(-1turn);
                            transform-origin: center;
                            bottom: calc(48px * 5.5);
                            animation-timing-function: cubic-bezier(0.29, 0.01, 1, 0.55);
                        }
                        100%{
                            transform: scaleY(1) scaleX(1) rotate(-2turn);
                            bottom: 0;
                        }
                    }
                    @keyframes jump2{
                        0%{
                            transform: scaleY(1) scaleX(1);
                            transform-origin: bottom;
                            bottom: 0;
                        }
                        8%{
                            transform: scaleY(1) scaleX(1);
                            transform-origin: bottom;
                            bottom: 0;
                            animation-timing-function: cubic-bezier(0, 0.8, 0.74, 1);
                        }
                        55%{
                            transform: scaleY(1) scaleX(1) rotate(1turn);
                            transform-origin: center;
                            bottom: calc(48px * 6.5);
                            animation-timing-function: cubic-bezier(0.29, 0.01, 1, 0.55);
                        }
                        100%{
                            transform: scaleY(1) scaleX(1) rotate(2turn);
                            bottom: 0;
                        }
                    }
                    
License Terms