<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="loader-ajax"> <div class="row"> <div class="col-md-12"> <div class="loader"> <div class="loader-inner"> <div class="loading one"></div> </div> <div class="loader-inner"> <div class="loading two"></div> </div> <div class="loader-inner"> <div class="loading three"></div> </div> <div class="loader-inner"> <div class="loading four"></div> </div> </div> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4 text-center"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKsAAAAoCAYAAACBzApvAAAACXBIWXMAAAsSAAALEgHS3X78AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABH9JREFUeNrsW0typDAMNV250RygzX5ONBubTU6UveEAORMDKZNxayT/ARP0qqhU0UHIsvz0sekEg3ECPj7fZ3Br+P3rj/Y982CzMa4CdlYGOyuDwc7KuC3eWlBinme5/Fmvseu6kaeF0TKzmuVS61/ruAxGe866OKcGt9hZGSi6BsK/+U+pBZmODpGUVgB5apOxXJPVS0eOybvgYuQQ8rJ0itQt1VaorE2fj8/3kF4Kvn8bE6nfyc5qCOP1PsNZp1KRr1nlDJS8RFnCytKErLmGnAj7YI7WV5AVY6unT85GNEjTvxTDo9DZ5PwPOvVZz6BrpgISy4U33RMd9YsR7MSXgpTj6BZrB1lJFmUr7djqtDStNGc1HloPThayqlNlfTGBZYPOrurBXqNHV2pBjM7zPZAHncO3OAePXjFOhtmm7xwgY6RkGYI9KTkiodDFxtlezkqEzz4m70Ge3fIVlSorMSf+Dr1Ah2AYxUJp7uQgIfl7rIhtQinRyxhdnVJkIbb6tkmOrfbIWUscAYPOeZa4r2usxi2EIe/SOe/CZFWwny6xwer8EbJkzOLGnsm1VcCZZ3AF5T4KmCFmtcRU8ENhKiBqVd4JqUdsNyIUQjc8HXbL0X0K2Dmq0rf/M+5UOxyfs4ZaMxErWHkmZCJYsdpmQQU5U22nd+wpq4S9Mp0nuIgu66xYnhpbySOM3AeYRLlVqifM69mDo9nChlMNwjPUyey8KFSO44M5aIpZ3zJYScLwstwfxWvjWsc+SzCODCXYCT3Iw4xux6hEe7tw8idsY6ceZDFE3jW5E7QaBnFE5cnZIKNIKsejdr3ORsbmwpFQ4gfgkTgZArSBRiJ8y0xWpYoKd1cF6xu+9CAhPAujNqNCnbuAXoydmFUFnMqXCsSyKpoKgN7oS87byJFCBRZi39g8Dw363uBL87KdNdBuEr5UwD4rCZb0DUQSBVyKnMNywsYdY48WXhFCHwdmpQFIiBuxgXtSAZVqtNUJnWg5RrR+WnKKEr3Ginlmk/bZO2dNCeGugZ6RjFyDzUJ4XmEyoKMXbjpMtyqwUgojxEAyh1VrOyAcw97hMLZFBHeYiAWtcltOcJyVToo1zaxJhVHAEWoUHe6kytAEYCnMAcWCCTEi0uaaPDY02A6eu/HgYc4B2ivk/FauqXUG4JBuAFIYlXzMV+VDQGQDQjo7VBPCvPKIqnh1sEUNBRhREe9TiG00srANiFIy9eyM1cu1gytnCNhrElcBdTIqJrwhu4uysm5mTof06Kkzx6cRRkoByXSZ8tCxlMrZ49RVtTSgsDAa92BVwBi9ZZ8YudtB6l2rY9vB6AV+mBmz0dp66z2bI6P9HTtQPjhXH+oCJNpLiIhPbk4pQClWBYPtUplvCylH7dTABdaCsTMK1Bz5SmQcCG/RXjVCrBSMw518O00W+H2+7VwhJ8UNu84p86AzckxzNyMxq17TWeXdDMSs2p7DUge4jf1N3tU4zKqMS4YdzVZhtIbOOmtRq4rBYFZlMDy5KhdVjMuwKxdVjGbxV4ABAJIGEmSFZTOxAAAAAElFTkSuQmCC"></div> <div class="col-md-4"></div> </div> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4 text-center"> <h4 class="manager">Cargando archivos...</h4> <p class="font-italic manager-2">No cierres esta ventana</p> </div> <div class="col-md-4"></div> </div> </div>

/*--CSS LOADER--*/ .manager { color: #fff; } .manager-2 { color: #e10030; } .loader{ top: 100px; width: 150px; height: 150px; margin: 40px auto; transform: rotate(-45deg); font-size: 0; line-height: 0; animation: rotate-loader 5s infinite; padding: 25px; //border: 1px solid #cf303d; border: 2px solid #fff; //border: 2px solid #b4cd86; } .loader .loader-inner{ position: relative; display: inline-block; width: 50%; height: 50%; } .loader .loading{ position: absolute; //background: #cf303d; background: #b4cd86; } .loader .one{ width: 100%; bottom: 0; height: 0; animation: loading-one 1s infinite; } .loader .two{ width: 0; height: 100%; left: 0; animation: loading-two 1s infinite; animation-delay: 0.25s; } .loader .three{ width: 0; height: 100%; right: 0; animation: loading-two 1s infinite; animation-delay: 0.75s; } .loader .four{ width: 100%; top: 0; height: 0; animation: loading-one 1s infinite; animation-delay: 0.5s; } .loader-ajax { position: fixed; background-color: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; z-index: 9999; opacity: .8; } @keyframes loading-one { 0% { height: 0; opacity: 1; } 12.5% { height: 100%; opacity: 1; } 50% { opacity: 1; } 100% { height: 100%; opacity: 0; } } @keyframes loading-two { 0% { width: 0; opacity: 1; } 12.5% { width: 100%; opacity: 1; } 50% { opacity: 1; } 100% { width: 100%; opacity: 0; } } @keyframes rotate-loader { 0% { transform: rotate(-45deg); } 20% { transform: rotate(-45deg); } 25% { transform: rotate(-135deg); } 45% { transform: rotate(-135deg); } 50% { transform: rotate(-225deg); } 70% { transform: rotate(-225deg); } 75% { transform: rotate(-315deg); } 95% { transform: rotate(-315deg); } 100% { transform: rotate(-405deg); } } /*--CSS LOADER--*/