adui/es/spinner/style/index.css

<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>

.adui-spinner-base{display:inline-block;text-align:center;font-size:0;line-height:0}.adui-spinner-normal{color:var(--primary-color)}.adui-spinner-primary{color:var(--primary-color)}.adui-spinner-success{color:var(--ad-green)}.adui-spinner-warning{color:var(--ad-orange)}.adui-spinner-danger{color:var(--ad-red)}.adui-spinner-spinning .adui-spinner-circular{-webkit-animation:rotate 2.25s linear infinite;animation:rotate 2.25s linear infinite;transform-origin:center}.adui-spinner-spinning .adui-spinner-head{-webkit-animation:dash 5s cubic-bezier(0.35, 0, 0.25, 1) infinite;animation:dash 5s cubic-bezier(0.35, 0, 0.25, 1) infinite}.adui-spinner-circular{display:inline-block;transform:rotate(-90deg)}.adui-spinner-circular path{fill-opacity:0}.adui-spinner-track{stroke:var(--gray-500);opacity:.4}.adui-spinner-head{transform-origin:center center;transition:stroke-dashoffset .2s cubic-bezier(0.4, 1, 0.75, 0.9);stroke:currentColor;stroke-linecap:round}.adui-spinner-text{margin-top:4px;text-align:center;font-size:13px;line-height:20px;color:currentColor}.adui-spinner-nestedWrapper{position:relative}.adui-spinner-nestedWrapper .adui-spinner-base{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%;z-index:11}.adui-spinner-container{position:relative;transition:opacity var(--motion-duration-base) var(--ease-in-out)}.adui-spinner-blur{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.4;filter:blur(0.5px)}.adui-spinner-blur::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff;opacity:.3;transition:all var(--motion-duration-base) var(--ease-in-out);z-index:10}@-webkit-keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dashoffset:268.60617px;transform:rotate(0);stroke-opacity:.7}12.5%{stroke-dashoffset:56.54867px;transform:rotate(0);stroke-opacity:1}12.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(72.5deg);stroke-opacity:1}25%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(72.5deg);stroke-opacity:.7}25.0001%{stroke-dashoffset:268.60617px;transform:rotate(270deg);stroke-opacity:.7}37.5%{stroke-dashoffset:56.54867px;transform:rotate(270deg);stroke-opacity:1}37.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(161.5deg);stroke-opacity:1}50%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(161.5deg);stroke-opacity:.7}50.0001%{stroke-dashoffset:268.60617px;transform:rotate(180deg);stroke-opacity:.7}62.5%{stroke-dashoffset:56.54867px;transform:rotate(180deg);stroke-opacity:1}62.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(251.5deg);stroke-opacity:1}75%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(251.5deg);stroke-opacity:.7}75.0001%{stroke-dashoffset:268.60617px;transform:rotate(90deg);stroke-opacity:.7}87.5%{stroke-dashoffset:56.54867px;transform:rotate(90deg);stroke-opacity:1}87.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(341.5deg);stroke-opacity:1}100%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(341.5deg);stroke-opacity:.7}}@keyframes dash{0%{stroke-dashoffset:268.60617px;transform:rotate(0);stroke-opacity:.7}12.5%{stroke-dashoffset:56.54867px;transform:rotate(0);stroke-opacity:1}12.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(72.5deg);stroke-opacity:1}25%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(72.5deg);stroke-opacity:.7}25.0001%{stroke-dashoffset:268.60617px;transform:rotate(270deg);stroke-opacity:.7}37.5%{stroke-dashoffset:56.54867px;transform:rotate(270deg);stroke-opacity:1}37.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(161.5deg);stroke-opacity:1}50%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(161.5deg);stroke-opacity:.7}50.0001%{stroke-dashoffset:268.60617px;transform:rotate(180deg);stroke-opacity:.7}62.5%{stroke-dashoffset:56.54867px;transform:rotate(180deg);stroke-opacity:1}62.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(251.5deg);stroke-opacity:1}75%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(251.5deg);stroke-opacity:.7}75.0001%{stroke-dashoffset:268.60617px;transform:rotate(90deg);stroke-opacity:.7}87.5%{stroke-dashoffset:56.54867px;transform:rotate(90deg);stroke-opacity:1}87.5001%{stroke-dashoffset:56.54867px;transform:rotateX(180deg) rotate(341.5deg);stroke-opacity:1}100%{stroke-dashoffset:268.60617px;transform:rotateX(180deg) rotate(341.5deg);stroke-opacity:.7}}