preloader style : demo 98

HTML

                        

CSS

                        .demo{ background: #218976; }
                        .loader{
                            width: 44px;
                            height: 44px;
                            margin: 50px auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            width: 20px;
                            height: 20px;
                            border-radius: 1px;
                            background: #fff;
                            position: absolute;
                        }
                        .loader .box-1{
                            top: 0;
                            left: 0;
                            animation: loading-1 1s ease-in-out infinite;
                        }
                        .loader .box-2{
                            top: 0;
                            left: 22px;
                            animation: loading-2 1s ease-in-out infinite;
                        }
                        .loader .box-3{
                            top: 22px;
                            left: 0;
                            animation: loading-3 1s ease-in-out infinite;
                        }
                        .loader .box-4{
                            top: 22px;
                            left: 22px;
                            animation: loading-4 1s ease-in-out infinite;
                        }
                        @-webkit-keyframes loading-1{
                            0%{ transform: scale(1, 1) }
                            25%{ transform: scale(1, 0) }
                            50%{ transform: scale(1, 1) }
                        }
                        @keyframes loading-1{
                            0%{ transform: scale(1, 1) }
                            25%{ transform: scale(1, 0) }
                            50%{ transform: scale(1, 1) }
                        }
                        @-webkit-keyframes loading-2{
                            25%{ transform: scale(1, 1) }
                            40%{ transform: scale(1, 0) }
                            55%{ transform: scale(1, 1) }
                        }
                        @keyframes loading-2{
                            25%{ transform: scale(1, 1) }
                            40%{ transform: scale(1, 0) }
                            55%{ transform: scale(1, 1) }
                        }
                        @-webkit-keyframes loading-3{
                            70%{ transform: scale(1, 1) }
                            85%{ transform: scale(1, 0) }
                            100%{ transform: scale(1, 1) }
                        }
                        @keyframes loading-3{
                            70%{ transform: scale(1, 1) }
                            85%{ transform: scale(1, 0) }
                            100%{ transform: scale(1, 1) }
                        }
                        @-webkit-keyframes loading-4{
                            50%{ transform: scale(1, 1) }
                            70%{ transform: scale(1, 0) }
                            95%{ transform: scale(1, 1) }
                        }
                        @keyframes loading-4{
                            50%{ transform: scale(1, 1) }
                            70%{ transform: scale(1, 0) }
                            95%{ transform: scale(1, 1) }
                        }
                    
License Terms