/** Spinner V2 **/
.loader__container {
    display: block;
    & .graphCenter{
        position: absolute;
        top: calc(50%);
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
        transition: opacity 0.2s ease-in-out;
        
        & .loader {
            width: 8px;
            height: 40px;
            border-radius: 4px;
            display: block;
            margin: 20px auto;
            position: relative;
            background: currentColor;
            color: var(--suite-primary-S360);
            box-sizing: border-box;
            animation: animloader 0.3s 0.3s linear infinite alternate;
        }
        
        & .loader::after, .loader::before {
            content: '';
            width: 8px;
            height: 40px;
            border-radius: 4px;
            background: currentColor;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 20px;
            box-sizing: border-box;
            animation: animloader 0.3s  0.45s  linear infinite alternate;
        }
        & .loader::before {
            left: -20px;
            animation-delay: 0s;
        }
        
    }
}

.loaded {
    display: none;
}
  /***? Global KeyFrames ***/

@keyframes animloader {
    0%   { height: 48px}
    100% { height: 4px}
}

@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}