#global-loading{
    position: fixed; inset: 0;
    display: grid;
    place-items: center;
    /*background: #000000;*/
    background: linear-gradient(to bottom, rgb(214, 217, 228) 50%, rgba(173, 189, 204, 0.15) 100%);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
}

#global-loading.is-active{ opacity: 1; visibility: visible; }

.svg-spinner{
    width: 64px; height: 64px;
}

.svg-spinner .path{
    stroke: #ffc107!important;
    stroke-linecap: round;
    stroke-dasharray: 90, 150;      /* trecho visível, trecho oculto */
    stroke-dashoffset: 0;
    animation: dash 1.4s ease-in-out infinite, rotate 1.4s linear infinite;
    transform-origin: center;
}
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes dash {
    0%   { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}
.loading-card{ display: grid; gap: .75rem; justify-items: center; }
.loading-text{
    color: rgba(14, 2, 2, 0.95);
    font: 600 1.125rem/1.2 system-ui;
    font-size: 28px;
    margin: 0;
}


/*para JS*/

/*const overlay = document.getElementById('global-loading');*/

/*Para Adicionar*/
/*overlay.classList.add('is-active');*/


/*Para remover*/
/*overlay.classList.remove('is-active');*/



/*PARA HTML*/

/*<div id="global-loading" class="loading-overlay" aria-hidden="true" role="alert" aria-live="assertive">*/
/*<div class="loading-card">*/
/*<svg class="svg-spinner" viewBox="0 0 50 50" aria-hidden="true">*/
/*<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"/>*/
/*</svg>*/
/*<p class="loading-text">Enviando Pedido</p>*/
/*</div>*/
/*</div>*/