.loader--sm {
    width: 24px;
    height: 24px;
    border-width: 3px;
}

.loader--md {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

.loader--lg {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

.loader--centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader--white {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
}

.loader[data-fade] {
    transition: opacity 0.25s ease;
}

.--loaded > .loader[data-fade],
.--loaded .loader[data-fade] {
    opacity: 0;
    pointer-events: none;
}