en-US

Custom loading icon.

zh-CN

自定义加载图标。

import { useState } from 'react';

import { DSpinner, DAlert, DSwitch } from '@react-devui/ui';

export default function Demo() {
  const [loading, setLoading] = useState(true);

  return (
    <>
      <DSwitch dModel={loading} onModelChange={setLoading}>
        Loading
      </DSwitch>
      <br />
      <br />
      <div style={{ position: 'relative' }}>
        <DSpinner dVisible={loading}>
          <div className="lds-facebook">
            <div></div>
            <div></div>
            <div></div>
          </div>
        </DSpinner>
        <DAlert dTitle="I love DevUI so much!" dDescription="Detailed description and advice about DevUI." dType="info"></DAlert>
      </div>
    </>
  );
}

.lds-facebook {
  display: inline-flex;
  gap: 0 6px;
  align-items: center;
  height: 56px;
}

.lds-facebook div {
  width: 8px;
  background: var(--rd-color-primary);
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.lds-facebook div:nth-child(1) {
  animation-delay: -0.24s;
}

.lds-facebook div:nth-child(2) {
  animation-delay: -0.12s;
}

.lds-facebook div:nth-child(3) {
  animation-delay: 0;
}

@keyframes lds-facebook {
  0% {
    height: 56px;
  }

  50%,
  100% {
    height: 28px;
  }
}