preloader style : demo 100

                        .demo{ background: #213145; }
                        .loader{
                            width: 100%;
                            height: 250px;
                            position: relative;
                        }
                        .loader span{
                            display: block;
                            width: 64px;
                            height: 64px;
                            border-radius: 50%;
                            border: 3px solid #f20000;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            margin: -35px 0 0 -35px;
                            -webkit-animation: 5s loading-3 linear infinite;
                            animation: 5s loading-3 linear infinite;
                        }
                        .loader span:before,
                        .loader span:after{
                            content: "";
                            display: block;
                            width: 64px;
                            height: 64px;
                            border-radius: 50%;
                            border-width: 3px;
                            border-style: solid;
                            position: absolute;
                            top: -3px;
                        }
                        .loader span:before{
                            border-color: #17cff7;
                            left: -70px;
                            -webkit-animation: 5s loading-1 ease-in-out infinite;
                            animation: 5s loading-1 ease-in-out infinite;
                        }
                        .loader span:after{
                            border-color: #00e865;
                            right: -70px;
                            -webkit-animation: 5s loading-2 ease-in-out infinite;
                            animation: 5s loading-2 ease-in-out infinite;
                        }
                        @-webkit-keyframes loading-1{
                            50% { left:70px; }
                        }
                        @keyframes loading-1{
                            50% { left:70px; }
                        }
                        @-webkit-keyframes loading-2{
                            50% { right:70px; }
                        }
                        @keyframes loading-2{
                            50% { right:70px; }
                        }
                        @-webkit-keyframes loading-3{
                            20%{
                                -webkit-transform: rotateX(-180deg);
                                transform: rotateX(-180deg);
                            }
                            40%{
                                -webkit-transform:rotate(180deg);
                                transform:rotate(180deg);
                            }
                            60%{ -webkit-transform:rotate(-180deg);transform:rotate(-180deg); }
                            80%{ -webkit-transform:rotateY(-180deg);transform:rotateY(-180deg); }
                        }
                        @keyframes loading-3{
                            20%{
                                -webkit-transform: rotateX(-180deg);
                                transform: rotateX(-180deg);
                            }
                            40%{
                                -webkit-transform:rotate(180deg);
                                transform:rotate(180deg);
                            }
                            60%{
                                -webkit-transform: rotate(-180deg);
                                transform: rotate(-180deg);
                            }
                            80%{
                                -webkit-transform: rotateY(-180deg);
                                transform: rotateY(-180deg);
                            }
                        }