preloader style : demo 109

HTML

                        

CSS

                        .demo{ background: #564056; }
                        .loader{
                            width: 270px;
                            height: 170px;
                            margin: 40px auto 0;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 86px;
                            height: 86px;
                            background: #564056;
                            position: absolute;
                            top: 0;
                            left: 30%;
                        }
                        .loader .box-1{
                            width: 18px;
                            height: 18px;
                            border-radius: 15%;
                            position: absolute;
                            bottom: -3px;
                            left: 0;
                            background: transparent;
                            border: 4px solid #f5f5f5;
                            transform: translate(0, -1em) rotate(-45deg);
                            animation: loading-1 2.5s cubic-bezier(.79, 0, .47, .97) infinite;
                        }
                        .loader .box-2{
                            width: 113px;
                            height: 113px;
                            position: absolute;
                            top: 27px;
                            left: 27px;
                            border-left: 4px solid #f5f5f5;
                            transform: rotate(45deg);
                        }
                        @-webkit-keyframes loading-1{
                            0%{
                                transform: translate(0, -1em) rotate(-45deg);
                            }
                            5%{
                                transform: translate(0, -1em) rotate(-50deg);
                            }
                            20%{
                                transform: translate(1em, -2em) rotate(47deg);
                            }
                            25%{
                                transform: translate(1em, -2em) rotate(45deg);
                            }
                            30%{
                                transform: translate(1em, -2em) rotate(40deg);
                            }
                            45%{
                                transform: translate(2em, -3em) rotate(137deg);
                            }
                            50%{
                                transform: translate(2em, -3em) rotate(135deg);
                            }
                            55%{
                                transform: translate(2em, -3em) rotate(130deg);
                            }
                            70%{
                                transform: translate(3em, -4em) rotate(217deg);
                            }
                            75%{
                                transform: translate(3em, -4em) rotate(220deg);
                            }
                            100%{
                                transform: translate(0, -1em) rotate(-225deg);
                            }
                        }
                        @keyframes loading-1{
                            0%{
                                transform: translate(0, -1em) rotate(-45deg);
                            }
                            5%{
                                transform: translate(0, -1em) rotate(-50deg);
                            }
                            20%{
                                transform: translate(1em, -2em) rotate(47deg);
                            }
                            25%{
                                transform: translate(1em, -2em) rotate(45deg);
                            }
                            30%{
                                transform: translate(1em, -2em) rotate(40deg);
                            }
                            45%{
                                transform: translate(2em, -3em) rotate(137deg);
                            }
                            50%{
                                transform: translate(2em, -3em) rotate(135deg);
                            }
                            55%{
                                transform: translate(2em, -3em) rotate(130deg);
                            }
                            70%{
                                transform: translate(3em, -4em) rotate(217deg);
                            }
                            75%{
                                transform: translate(3em, -4em) rotate(220deg);
                            }
                            100%{
                                transform: translate(0, -1em) rotate(-225deg);
                            }
                        }
                    
License Terms