preloader style : demo 117

HTML

                        

CSS

                        .loader{
                            width: 100px;
                            height: 100px;
                            margin: 50px auto;
                            overflow: hidden;
                            position: relative;
                        }
                        .loader span{
                            display: inline-block;
                            position: absolute;
                            animation-fill-mode: both;
                            animation: loading-1 9s cubic-bezier(.45,.05,.55,.95) infinite;
                        }
                        .loader span:nth-child(1){
                            background: #ff4b7d;
                            animation-name: loading-1;
                        }
                        .loader span:nth-child(2){
                            background: #3485ef;
                            animation-name: loading-2;
                        }
                        .loader span:nth-child(3){
                            background: #5fad56;
                            animation-name: loading-3;
                        }
                        .loader span:nth-child(4){
                            background: #e9573d;
                            animation-name: loading-4;
                        }
                        @keyframes loading-1{
                            0%{
                                width: 25%;
                                height: 25%;
                                border-radius: 100% 0 0 0;
                                background: #ff4b7d;
                                bottom: 50%;
                                left: 25%;
                            }
                            5%{
                                width: 25%;
                                height: 25%;
                                border-radius: 100% 0 0 0;
                                background: #ff4b7d;
                                bottom: 50%;
                                left: 25%;
                            }
                            10%{
                                width: 25%;
                                height: 25%;
                                border-radius: 100% 100% 0 0;
                                background: #ff4b7d;
                                bottom: 50%;
                                left: 25%;
                            }
                            13%{
                                width: 25%;
                                height: 25%;
                                border-radius: 100% 100% 0 0;
                                background: #5fad56;
                                bottom: 50%;
                                left: 12.5%;
                            }
                            18%{
                                width: 25%;
                                height: 25%;
                                border-radius: 100% 100% 0 0;
                                background: #5fad56;
                                bottom: 50%;
                                left: 12.5%;
                            }
                            20%{
                                width: 32.5%;
                                height: 32.5%;
                                border-radius: 50%;
                                background: #5fad56;
                                bottom: 50%;
                                left: 6.25%;
                            }
                            25%{
                                width: 25%;
                                height: 25%;
                                border-radius: 50%;
                                background: #3485ef;
                                bottom: 62.5%;
                                left: 12.5%;
                            }
                            30%{
                                width: 25%;
                                height: 25%;
                                border-radius: 50%;
                                background: #3485ef;
                                bottom: 62.5%;
                                left: 12.5%;
                            }
                            35%{
                                width: 14%;
                                height: 10%;
                                border-radius: 999px;
                                background: #ff4b7d;
                                left: 0%;
                                bottom: 0%;
                            }
                            40%{ height:100%; }
                            55%{ height: 10%; }
                            60%{ height:100%; }
                            70%{
                                width: 14%;
                                height: 25%;
                                border-radius: 999px;
                                background: #ff4b7d;
                                bottom: 0%;
                                left: 0%;
                            }
                            75%{
                                width: 25%;
                                height: 25%;
                                border-radius: 100%;
                                bottom: 57.5%;
                                left: 17.5%;
                            }
                            97%{
                                width: 25%;
                                height: 25%;
                                border-radius: 100%;
                                bottom: 57.5%;
                                left: 17.5%;
                            }
                            100%{
                                width: 50%;
                                height: 50%;
                                border-radius: 100%;
                                bottom: 25%;
                                left: 25%;
                            }
                        }
                        @keyframes loading-2{
                            0%{
                                width: 25%;
                                height: 25%;
                                background: #ff4b7d;
                                border-radius: 0 0 0 100%;
                                bottom: 25%;
                                left: 25%;
                            }
                            5%{
                                width: 25%;
                                height: 25%;
                                background: #ff4b7d;
                                border-radius: 0 0 0 100%;
                                bottom: 25%;
                                left: 25%;
                            }
                            10%{
                                width: 25%;
                                height: 25%;
                                background: #ff4b7d;
                                border-radius: 0 0 100% 100%;
                                bottom: 25%;
                                left: 25%;
                            }
                            13%{
                                width: 25%;
                                height: 25%;
                                background: #5fad56;
                                border-radius: 0 0 100% 100%;
                                bottom: 25%;
                                left: 12.5%;
                            }
                            18%{
                                width: 25%;
                                height: 25%;
                                background: #5fad56;
                                border-radius: 0 0 100% 100%;
                                bottom: 25%;
                                left: 12.5%;
                            }
                            20%{
                                width: 32.5%;
                                height: 32.5%;
                                background: #5fad56;
                                border-radius: 50%;
                                bottom: 25%;
                                left: 6.25%;
                            }
                            25%{
                                width: 25%;
                                height: 25%;
                                background: #3485ef;
                                border-radius: 50%;
                                bottom: 12.5%;
                                left: 12.5%;
                            }
                            30%{
                                left: 12.5%;
                                bottom: 12.5%;
                                border-radius: 50%;
                                height: 25%;
                                width: 25%;
                                background:#3485EF;
                            }
                            35%{
                                left: 28%;
                                bottom: 0%;
                                border-radius: 999px;
                                height: 10%;
                                width: 14%;
                                background:#3485EF;
                            }
                            40%{ height:10%; }
                            45%{ height:100%; }
                            60%{ height: 10%; }
                            65%{ height:100%; }
                            75%{
                                left: 28%;
                                bottom: 0%;
                                border-radius: 999px;
                                height: 25%;
                                width: 14%;
                                background:#3485EF;
                            }
                            80%{
                                left: 17.5%;
                                bottom: 17.5%;
                                border-radius: 100%;
                                height: 25%;
                                width: 25%;
                            }
                            97%{
                                left: 17.5%;
                                bottom: 17.5%;
                                border-radius: 100%;
                                height: 25%;
                                width: 25%;
                                box-shadow: none;
                            }
                            100%{
                                box-shadow: -3px -3px 5px -5px #3485EF;
                                border-radius: 100%;
                                left: 25%;
                                bottom: -50%;
                                height: 50%;
                                width: 50%;
                            }
                        }
                        @keyframes loading-3{
                            0%{
                                left: 50%;
                                bottom: 50%;
                                border-radius: 0 100% 0 0;
                                height: 25%;
                                width: 25%;
                                background:#FF4B7D;
                            }
                            5%{
                                left: 50%;
                                bottom: 50%;
                                border-radius: 0 100% 0 0;
                                height: 25%;
                                width: 25%;
                                background:#FF4B7D;
                            }
                            10%{
                                left: 50%;
                                bottom: 50%;
                                border-radius: 100% 100% 0 0;
                                height: 25%;
                                width: 25%;
                                background:#FF4B7D;
                            }
                            13%{
                                left: 62.5%;
                                bottom: 50%;
                                border-radius: 100% 100% 0 0;
                                height: 25%;
                                width: 25%;
                                background:#5FAD56;
                            }
                            18%{
                                left: 62.5%;
                                bottom: 50%;
                                border-radius: 100% 100% 0 0;
                                height: 25%;
                                width: 25%;
                                background:#5FAD56;
                            }
                            20%{
                                left: 66.25%;
                                bottom: 50%;
                                border-radius: 50%;
                                height: 32.5%;
                                width: 32.5%;
                                background: #5FAD56;
                            }
                            25%{
                                left: 62.5%;
                                bottom: 62.5%;
                                border-radius: 50%;
                                height: 25%;
                                width: 25%;
                                background:#3485EF;
                            }
                            30%{
                                left: 62.5%;
                                bottom: 62.5%;
                                border-radius: 50%;
                                height: 25%;
                                width: 25%;
                                background:#3485EF;
                            }
                            35%{
                                left: 56%;
                                bottom: 0%;
                                border-radius: 999px;
                                height: 10%;
                                width: 14%;
                                background:#5FAD56;
                            }
                            45%{ height:10%; }
                            50%{ height:100%; }
                            65%{ height: 10%; }
                            70%{ height:100%; }
                            80%{
                                left: 56%;
                                bottom: 0%;
                                border-radius: 999px;
                                height: 25%;
                                width: 14%;
                                background:#5FAD56;
                            }
                            85%{
                                left: 57.5%;
                                bottom: 57.5%;
                                border-radius: 100%;
                                height: 25%;
                                width: 25%;
                            }
                            97%{
                                left: 57.5%;
                                bottom: 57.5%;
                                border-radius: 100%;
                                height: 25%;
                                width: 25%;
                                box-shadow: none;
                            }
                            100%{
                                box-shadow: -3px -3px 5px -5px #5FAD56;
                                border-radius: 100%;
                                left: 100%;
                                bottom: 25%;
                                height: 50%;
                                width: 50%;
                            }
                        }
                        @keyframes loading-4{
                            0%{
                                left: 50%;
                                bottom: 25%;
                                border-radius: 0 0 100% 0;
                                height: 25%;
                                width: 25%;
                                background:#FF4B7D;
                            }
                            5%{
                                left: 50%;
                                bottom: 25%;
                                border-radius: 0 0 100% 0;
                                height: 25%;
                                width: 25%;
                                background:#FF4B7D;
                            }
                            10%{
                                left: 50%;
                                bottom: 25%;
                                border-radius: 0 0 100% 100%;
                                height: 25%;
                                width: 25%;
                                background:#FF4B7D;
                            }
                            13%{
                                left: 62.5%;
                                bottom: 25%;
                                border-radius: 0 0 100% 100%;
                                height: 25%;
                                width: 25%;
                                background:#5FAD56;
                            }
                            18%{
                                left: 62.5%;
                                bottom: 25%;
                                border-radius: 0 0 100% 100%;
                                height: 25%;
                                width: 25%;
                                background: #5FAD56;
                            }
                            20%{
                                left: 66.25%;
                                bottom: 25%;
                                border-radius: 50%;
                                height: 32.5%;
                                width: 32.5%;
                                background:#5FAD56;
                            }
                            25%{
                                left: 62.5%;
                                bottom: 12.5%;
                                border-radius: 50%;
                                height: 25%;
                                width: 25%;
                                background:#3485EF;
                            }
                            30%{
                                left: 62.5%;
                                bottom: 12.5%;
                                border-radius: 50%;
                                height: 25%;
                                width: 25%;
                                background:#3485EF;
                            }
                            35%{
                                left: 84%;
                                bottom: 0%;
                                border-radius: 999px;
                                height: 10%;
                                width: 14%;
                                background: #e9573d;
                            }
                            50%{ height:10%; }
                            55%{ height:100%; }
                            70%{ height: 10%; }
                            75%{ height:100%; }
                            85%{
                                left: 84%;
                                bottom: 0%;
                                border-radius: 999px;
                                height: 25%;
                                width: 14%;
                                background:#E9573D;
                            }
                            90%{
                                left: 57.5%;
                                bottom: 17.5%;
                                border-radius: 100%;
                                height: 25%;
                                width: 25%;
                            }
                            97%{
                                left: 57.5%;
                                bottom: 17.5%;
                                border-radius: 100%;
                                height: 25%;
                                width: 25%;
                                box-shadow: none;
                            }
                            100%{
                                box-shadow: -3px -3px 5px -5px #e9573d;
                                border-radius: 100%;
                                left: 100%;
                                bottom: -50%;
                                height: 50%;
                                width: 50%;
                            }
                        }
                    
License Terms