@polkadot-ui/core/css/loaders/Dots/index.css

Core styles and themes for Polkadot dApps.

.dots-loading{display:flex}.dots-loading .dot{position:relative;width:2em;height:2em;margin:.8em;border-radius:50%}.dots-loading .dot::before{position:absolute;content:"";width:100%;height:100%;background:inherit;border-radius:inherit;animation:dot-wave 2s ease-out infinite}.dots-loading .dot:nth-child(1){background:var(--background-default)}.dots-loading .dot:nth-child(1)::before{animation-delay:.2s}.dots-loading .dot:nth-child(2){background:var(--text-color-primary)}.dots-loading .dot:nth-child(2)::before{animation-delay:.4s}.dots-loading .dot:nth-child(3){background:var(--text-color-secondary)}.dots-loading .dot:nth-child(3)::before{animation-delay:.6s}.dots-loading .dot:nth-child(4){background:var(--text-color-tertiary)}.dots-loading .dot:nth-child(4)::before{animation-delay:.8s}.dots-loading .dot:nth-child(5){background:var(--accent-color-primary)}.dots-loading .dot:nth-child(5)::before{animation-delay:1s}@keyframes dot-wave{50%,75%{transform:scale(2.5)}80%,100%{opacity:0}}