Materialish

Loading Dots

Loading dots are a nondeterministic loading indicator.

🙌 Heads up! This code is editable. The preview above will update to reflect your changes.

Usage

import { LoadingDots } from 'materialish';
import 'materialish/materialish.css';

Props

Prop NameDefault ValueDescription
size"calc(var(--mt-baseFontSize, 1rem) * 1.125)"The size of the LoadingDots
nodeRefPass a ref to get access to the root node
...restOther props are placed on the root svg element

CSS Variables

VariableDefault ValueDescription
--mt-baseFontSize1remThe size of the LoadingDots is based off of this value
--mt-loadingDots-animationDuration300msThe length of time it takes the animation to complete one cycle

Useful Links