preloader style : demo 199

HTML

                        

CSS

                        .loader{
                            width: 300px;
                            height: 100px;
                            margin: 40px auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 100px;
                            height: 100px;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            animation: loading-5 2s infinite alternate;
                        }
                        .loader .loader-inner div{
                            width: 100%;
                            height: 100%;
                            background: #ec5766;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }
                        .loader .box-1{
                            clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
                            animation: loading-1 2s infinite alternate;
                        }
                        .loader .box-2{
                            clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
                            animation: loading-2 2s infinite alternate;
                        }
                        .loader .box-3{
                            clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
                            animation: loading-3 2s infinite alternate;
                        }
                        .loader .box-4{
                            clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
                            animation: loading-4 2s infinite alternate;
                        }
                        @keyframes loading-1{
                            0%,10%{
                                background: #ec5766;
                                -webkit-clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
                                clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
                            }
                            90%,100%{
                                background: #004260;
                                -webkit-clip-path: polygon(0% 100%, 25% 100%, 12.5% 0%);
                                clip-path: polygon(0% 100%, 25% 100%, 12.5% 0%);
                            }
                        }
                        @keyframes loading-2{
                            0%,10%{
                                background: #ec5766;
                                -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
                                clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
                            }
                            90%,100%{
                                background: #004260;
                                -webkit-clip-path: polygon(25% 0%, 50% 0%, 37.5% 100%);
                                clip-path: polygon(25% 0%, 50% 0%, 37.5% 100%);
                            }
                        }
                        @keyframes loading-3{
                            0%,10%{
                                background: #ec5766;
                                -webkit-clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
                                clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
                            }
                            90%,100%{
                                background: #004260;
                                -webkit-clip-path: polygon(62.5% 0%, 75% 100%, 50% 100%);
                                clip-path: polygon(62.5% 0%, 75% 100%, 50% 100%);
                            }
                        }
                        @keyframes loading-4{
                            0%,10%{
                                background: #ec5766;
                                -webkit-clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
                                clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
                            }
                            90%,100%{
                                background: #004260;
                                -webkit-clip-path: polygon(100% 0%, 87.5% 100%, 75% 0%);
                                clip-path: polygon(100% 0%, 87.5% 100%, 75% 0%);
                            }
                        }
                        @keyframes loading-5{
                            0%,10%{
                                width: 100px;
                                height: 100px;
                            }
                            90%,100%{
                                width: 250px;
                                height: 60px;
                            }
                        }
                    
License Terms