.loader-js-relative {
    position: relative;
}

.loader-js-relative-inner {
    --loader-bg: rgba(0, 0, 0, 0.1);
    --loader-spinner-size: 4rem;
    --loader-spinner-border-radius: 0.5rem;
    --loader-spinner-bg: #000000;
    position: absolute;
    inset: 0;
    background: var(--loader-bg);
    z-index: 99998;
}

.loader-js-relative-spinner {
    width: var(--loader-spinner-size);
    height: var(--loader-spinner-size);
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: var(--loader-spinner-border-radius);
    background-color: var(--loader-spinner-bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: calc(100% - 0.75rem);
    transform: translate(-50%, -50%);
}

    .loader-js-relative-spinner.dual-ring {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle stroke-linecap="round" fill="none" stroke-dasharray="50.26548245743669 50.26548245743669" stroke="%23ffffff" stroke-width="8" r="32" cy="50" cx="50"><animateTransform values="0 50 50;360 50 50" keyTimes="0;1" dur="2s" repeatCount="indefinite" type="rotate" attributeName="transform"></animateTransform></circle></g></svg>');
    }