preloader style : demo 85

HTML

                        

CSS

                        .demo{ background: #011627; }
                        .loader{
                            width: 300px;
                            height: 300px;
                            margin: 0 auto;
                            position: relative;
                        }
                        .loader .loader-inner{
                            z-index: 5;
                        }
                        .loader .loader-inner,
                        .loader .loader-inner2{
                            width: 80px;
                            height: 80px;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
                            animation: loading-1 1.8s ease-in-out 0s infinite both;
                        }
                        .loader .loader-inner span,
                        .loader .loader-inner2 span{
                            display: block;
                            width: 40px;
                            height: 40px;
                            position: absolute;
                            background: #e71d36;
                            -webkit-filter: blur(1px);
                            -moz-filter: blur(1px);
                            -o-filter: blur(1px);
                            -ms-filter: blur(1px);
                            filter: blur(1px);
                        }
                        .loader .loader-inner span:nth-child(1),
                        .loader .loader-inner2 span:nth-child(1){
                            top: 0;
                            left: 0;
                        }
                        .loader .loader-inner span:nth-child(2),
                        .loader .loader-inner2 span:nth-child(2){
                            top: 0;
                            right: 0;
                        }
                        .loader .loader-inner span:nth-child(3),
                        .loader .loader-inner2 span:nth-child(3){
                            bottom: 0;
                            left: 0;
                        }
                        .loader .loader-inner span:nth-child(4),
                        .loader .loader-inner2 span:nth-child(4){
                            bottom: 0;
                            right: 0;
                        }
                        .loader .loader-inner2{
                            z-index: 1;
                            animation: loading-2 1.8s ease-in-out 0s infinite both;
                        }
                        .loader .loader-inner2 span{
                            background: #2ec4b6;
                            -webkit-filter: blur(2.5px);
                            -moz-filter: blur(2.5px);
                            -o-filter: blur(2.5px);
                            -ms-filter: blur(2.5px);
                            filter: blur(2.5px);
                        }
                        @-webkit-keyframes loading-1{
                            0%, 100%{
                                width: 80px;
                                height: 80px;
                            }
                            65%{
                                width: 150px;
                                height: 150px;
                            }
                        }
                        @keyframes loading-1{
                            0%, 100% {
                                width: 80px;
                                height: 80px;
                            }
                            65% {
                                width: 150px;
                                height: 150px;
                            }
                        }
                        @-webkit-keyframes loading-2{
                            0%, 100%{
                                width: 80px;
                                height: 80px;
                            }
                            65%{
                                width: 180px;
                                height: 180px;
                            }
                        }
                        @keyframes loading-2{
                            0%, 100%{
                                width: 80px;
                                height: 80px;
                            }
                            65%{
                                width: 180px;
                                height: 180px;
                            }
                        }
                    
License Terms