.rb-loader {
animation: rb-loader-spin 0.7s linear infinite;
border: 2px solid rgba(0, 0, 0, 0.12);
border-radius: 50%;
border-top-color: currentColor;
display: inline-block;
flex-shrink: 0;
height: 1em;
vertical-align: -0.15em;
width: 1em;
}
.rb-loader--sm {
height: 0.85em;
width: 0.85em;
}
.rb-loader--md {
height: 1.25em;
width: 1.25em;
}
.rb-loader--lg {
height: 2rem;
width: 2rem;
}
@keyframes rb-loader-spin {
to {
transform: rotate(360deg);
}
}
.rb-button--loading {
cursor: wait;
opacity: 0.85;
pointer-events: none;
}
.rb-button--loading .rb-button__label {
align-items: center;
display: inline-flex;
gap: 0.45em;
}
.rb-inline-loader {
align-items: center;
color: #646970;
display: flex;
font-size: 0.95rem;
gap: 0.5rem;
justify-content: center;
padding: 1rem;
}
.rb-loading-overlay {
align-items: center;
background: rgba(255, 255, 255, 0.72);
display: flex;
inset: 0;
justify-content: center;
min-height: 3rem;
position: absolute;
z-index: 2;
}
.rb-loading-target {
position: relative;
}
.rb-loading-target.is-loading {
min-height: 3rem;
}
.rb-loading-target.is-loading > :not(.rb-loading-overlay) {
opacity: 0.35;
pointer-events: none;
}