EVOLUTION-MANAGER

Edit File: 91cc8d2dfe16772645e0fbef97c3e5b03a65fa0e.php

<style>

/* loader spinner styles */

.content_spinner{
                position: absolute; 
                height: 100vh; 
                margin: 0; 
                display: inline-flex; 
                align-items: center; 
                left: 0; 
                right: 0; 
                margin: auto;
                width: fit-content;
            }

.modal_cargando{
                background-color: #00d4ce;
            }

.sk-cube{
                background-color: white !important;
            }

.sk-cube-grid {
                width: 100px;
                height: 100px;
                margin: 100px auto;
            }
            
            .sk-cube-grid .sk-cube {
                width: 33%;
                height: 33%;
                background-color: #333;
                float: left;
                -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
                        animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
            }
            .sk-cube-grid .sk-cube1 {
                -webkit-animation-delay: 0.2s;
                        animation-delay: 0.2s; }
            .sk-cube-grid .sk-cube2 {
                -webkit-animation-delay: 0.3s;
                        animation-delay: 0.3s; }
            .sk-cube-grid .sk-cube3 {
                -webkit-animation-delay: 0.4s;
                        animation-delay: 0.4s; }
            .sk-cube-grid .sk-cube4 {
                -webkit-animation-delay: 0.1s;
                        animation-delay: 0.1s; }
            .sk-cube-grid .sk-cube5 {
                -webkit-animation-delay: 0.2s;
                        animation-delay: 0.2s; }
            .sk-cube-grid .sk-cube6 {
                -webkit-animation-delay: 0.3s;
                        animation-delay: 0.3s; }
            .sk-cube-grid .sk-cube7 {
                -webkit-animation-delay: 0s;
                        animation-delay: 0s; }
            .sk-cube-grid .sk-cube8 {
                -webkit-animation-delay: 0.1s;
                        animation-delay: 0.1s; }
            .sk-cube-grid .sk-cube9 {
                -webkit-animation-delay: 0.2s;
                        animation-delay: 0.2s; }
            
            @-webkit-keyframes sk-cubeGridScaleDelay {
                0%, 70%, 100% {
                -webkit-transform: scale3D(1, 1, 1);
                        transform: scale3D(1, 1, 1);
                } 35% {
                -webkit-transform: scale3D(0, 0, 1);
                        transform: scale3D(0, 0, 1); 
                }
            }
            
            @keyframes  sk-cubeGridScaleDelay {
                0%, 70%, 100% {
                -webkit-transform: scale3D(1, 1, 1);
                        transform: scale3D(1, 1, 1);
                } 35% {
                -webkit-transform: scale3D(0, 0, 1);
                        transform: scale3D(0, 0, 1);
                } 
            }

/******************/

</style>
    
    <div class="modal fade modal_cargando" tabindex="-1" role="dialog" id="div_vista_cargando">
        <div class="modal-dialog modal-sm content_spinner">
            <center>
                <div class="sk-cube-grid">
                    <div class="sk-cube sk-cube1"></div>
                    <div class="sk-cube sk-cube2"></div>
                    <div class="sk-cube sk-cube3"></div>
                    <div class="sk-cube sk-cube4"></div>
                    <div class="sk-cube sk-cube5"></div>
                    <div class="sk-cube sk-cube6"></div>
                    <div class="sk-cube sk-cube7"></div>
                    <div class="sk-cube sk-cube8"></div>
                    <div class="sk-cube sk-cube9"></div>
                </div>
            </center>
        </div>
    </div>

function vista_cargando() {
            $('#div_vista_cargando').modal({
                show: true,
                keyboard: false,
                backdrop: 'static'
            });
        }

function vista_cargando_end() {
            setTimeout(() => {
                $('#div_vista_cargando').modal("hide");
            }, 400);
        }

</script>