Learn how to customize the React Spinner component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
On this page
CSS variables
React spinners use local CSS variables on .spinner-border and .spinner-grow for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
Border spinner variables:
$spinner-border-tokens: defaults(
(
--cui-spinner-width: 1em,
--cui-spinner-height: 1em,
--cui-spinner-border-width: .125em,
--cui-spinner-animation-speed: #{$spinner-animation-speed},
--cui-spinner-animation-timing-function: #{$spinner-animation-timing-function},
--cui-spinner-animation-name: spinner-border,
),
$spinner-border-tokens
);Growing spinner variables:
$spinner-grow-tokens: defaults(
(
--cui-spinner-width: 1em,
--cui-spinner-height: 1em,
--cui-spinner-animation-speed: #{$spinner-animation-speed},
--cui-spinner-animation-timing-function: ease-in-out,
--cui-spinner-animation-name: spinner-grow,
),
$spinner-grow-tokens
);The .spinner-sm modifier rendered by size="sm" updates the values of these CSS variables, so it applies to both spinners:
--cui-spinner-width: #{.75em};
--cui-spinner-height: #{.75em};How to use CSS variables
const customVars = {
'--cui-spinner-width': '3rem',
'--cui-spinner-height': '3rem',
}
return <CCallout style={customVars}>...</CCallout>Keyframes
Used for creating the CSS animations for our spinners. Included in _spinner.scss.
@keyframes spinner-border {
to { transform: rotate(360deg); }
}@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}