preloader style : demo 118

HTML

                        

CSS

                        .loader{
                            width: 256px;
                            height: 256px;
                            margin: 100px auto 0;
                            position: relative;
                        }
                        .loader:after{
                            content: "";
                            width: 64px;
                            height: 12px;
                            border-radius: 50%;
                            background: rgba(0,0,0,0.05);
                            position: absolute;
                            top: 205px;
                            left: 96px;
                            animation: loading-3 1.25s linear infinite;
                        }
                        .loader .box-1{
                            width: 64px;
                            height: 64px;
                            background: #72e82b;
                            border-radius: 2px;
                            position: absolute;
                            top: 146px;
                            left: 96px;
                            z-index: 1;
                            animation: loading-1 1.25s linear infinite;
                        }
                        .loader .box-2{
                            width: 32px;
                            height: 32px;
                            background: #ff1160;
                            border-radius: 2px;
                            position: absolute;
                            top: 114px;
                            left: 112px;
                            animation: loading-2 1.25s linear infinite;
                        }
                        @-webkit-keyframes loading-1{
                            0%{
                                width: 128px;
                                height: 32px;
                                transform: translateX(-32px) translateY(35px) rotate(0deg);
                            }
                            5%{
                                width: 128px;
                                height: 32px;
                                transform: translateX(-32px) translateY(35px) rotate(0deg);
                            }
                            22%{
                                transform: translateX(0) translateY(0) rotate(0deg);
                            }
                            25%{
                                width: 64px;
                                height: 64px;
                                transform: translateX(0) translateY(-10px) rotate(0deg);
                            }
                            35%{
                                transform: translateX(0) translateY(-90px) rotate(30deg);
                            }
                            45%{
                                transform: translateX(0) translateY(-130px) rotate(60deg);
                            }
                            50%{
                                transform: translateX(0) translateY(-145px) rotate(75deg);
                            }
                            55%{
                                transform: translateX(0) translateY(-150px) rotate(90deg);
                            }
                            60%{
                                transform: translateX(0) translateY(-140px) rotate(105deg);
                            }
                            65%{
                                transform: translateX(0) translateY(-130px) rotate(120deg);
                            }
                            75% {
                                transform: translateX(0) translateY(-90px) rotate(150deg);
                            }
                            85%{
                                width: 64px;
                                height: 64px;
                                transform: translateX(0) translateY(0) rotate(180deg);
                            }
                            100%{
                                width: 128px;
                                height: 32px;
                                transform: translateX(-32px) translateY(35px) rotate(180deg);
                            }
                        }
                        @keyframes loading-1{
                            0%{
                                width: 128px;
                                height: 32px;
                                transform: translateX(-32px) translateY(35px) rotate(0deg);
                            }
                            5%{
                                width: 128px;
                                height: 32px;
                                transform: translateX(-32px) translateY(35px) rotate(0deg);
                            }
                            22%{
                                transform: translateX(0) translateY(0) rotate(0deg);
                            }
                            25%{
                                width: 64px;
                                height: 64px;
                                transform: translateX(0) translateY(-10px) rotate(0deg);
                            }
                            35%{
                                transform: translateX(0) translateY(-90px) rotate(30deg);
                            }
                            45%{
                                transform: translateX(0) translateY(-130px) rotate(60deg);
                            }
                            50%{
                                transform: translateX(0) translateY(-145px) rotate(75deg);
                            }
                            55%{
                                transform: translateX(0) translateY(-150px) rotate(90deg);
                            }
                            60%{
                                transform: translateX(0) translateY(-140px) rotate(105deg);
                            }
                            65%{
                                transform: translateX(0) translateY(-130px) rotate(120deg);
                            }
                            75%{
                                transform: translateX(0) translateY(-90px) rotate(150deg);
                            }
                            85%{
                                width: 64px;
                                height: 64px;
                                transform: translateX(0) translateY(0) rotate(180deg);
                            }
                            100%{
                                width: 128px;
                                height: 32px;
                                transform: translateX(-32px) translateY(35px) rotate(180deg);
                            }
                        }
                        @-webkit-keyframes loading-2{
                            0%{
                                width: 64px;
                                height: 16px;
                                transform: translateX(-16px) translateY(51px) rotate(0deg);
                            }
                            5%{
                                width: 64px;
                                height: 16px;
                                transform: translateX(-16px) translateY(51px) rotate(0deg);
                            }
                            22%{
                                transform: translateX(0) translateY(3px) rotate(0deg);
                            }
                            25%{
                                width: 32px;
                                height: 32px;
                                transform: translateX(0) translateY(-15px) rotate(0deg);
                            }
                            35%{
                                transform: translateX(0) translateY(-135px) rotate(-60deg);
                            }
                            45%{
                                transform: translateX(0) translateY(-195px) rotate(-120deg);
                            }
                            50%{
                                transform: translateX(0) translateY(-215px) rotate(-150deg);
                            }
                            55%{
                                transform: translateX(0) translateY(-225px) rotate(-180deg);
                            }
                            60%{
                                transform: translateX(0) translateY(-215px) rotate(-210deg);
                            }
                            65%{
                                transform: translateX(0) translateY(-195px) rotate(-240deg);
                            }
                            75%{
                                transform: translateX(0) translateY(-135px) rotate(-300deg);
                            }
                            85%{
                                width: 32px;
                                height: 32px;
                                transform: translateX(0) translateY(0) rotate(-360deg);
                            }
                            100%{
                                width: 64px;
                                height: 16px;
                                transform: translateX(-16px) translateY(51px) rotate(-360deg);
                            }
                        }
                        @keyframes loading-2{
                            0%{
                                width: 64px;
                                height: 16px;
                                transform: translateX(-16px) translateY(51px) rotate(0deg);
                            }
                            5%{
                                width: 64px;
                                height: 16px;
                                transform: translateX(-16px) translateY(51px) rotate(0deg);
                            }
                            22%{
                                transform: translateX(0) translateY(3px) rotate(0deg);
                            }
                            25%{
                                width: 32px;
                                height: 32px;
                                transform: translateX(0) translateY(-15px) rotate(0deg);
                            }
                            35%{
                                transform: translateX(0) translateY(-135px) rotate(-60deg);
                            }
                            45%{
                                transform: translateX(0) translateY(-195px) rotate(-120deg);
                            }
                            50%{
                                transform: translateX(0) translateY(-215px) rotate(-150deg);
                            }
                            55%{
                                transform: translateX(0) translateY(-225px) rotate(-180deg);
                            }
                            60%{
                                transform: translateX(0) translateY(-215px) rotate(-210deg);
                            }
                            65%{
                                transform: translateX(0) translateY(-195px) rotate(-240deg);
                            }
                            75%{
                                transform: translateX(0) translateY(-135px) rotate(-300deg);
                            }
                            85%{
                                width: 32px;
                                height: 32px;
                                transform: translateX(0) translateY(0) rotate(-360deg);
                            }
                            100%{
                                width: 64px;
                                height: 16px;
                                transform: translateX(-16px) translateY(51px) rotate(-360deg);
                            }
                        }
                        @-webkit-keyframes loading-3{
                            0%{
                                transform: scale(2.5, 1);
                            }
                            30%{
                                transform: scale(1.5, 1);
                            }
                            55%{
                                transform: scale(0.8, 0.8);
                            }
                            85%{
                                transform: scale(1.5, 1);
                            }
                            100%{
                                transform: scale(2.5, 1);
                            }
                        }
                        @keyframes loading-3{
                            0%{
                                transform: scale(2.5, 1);
                            }
                            30%{
                                transform: scale(1.5, 1);
                            }
                            55%{
                                transform: scale(0.8, 0.8);
                            }
                            85%{
                                transform: scale(1.5, 1);
                            }
                            100%{
                                transform: scale(2.5, 1);
                            }
                        }
                    
License Terms