@import "antd/dist/antd.css"; .ant-spin-nested-loading { width: 100%; height: 100vh; background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); } .ant-alert-info { background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); border: none; } .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot { top: 100%; } .ant-spin-text { top: 100% !important; color: rgb(11, 11, 11); font-weight: bold; font-size: 110%; } .ant-spin-dot-item { background-color: rgb(11, 11, 11); } import { Alert, Spin } from 'antd'; import React from 'react'; const App = () => ( <Spin tip="Loading..."> <Alert /> </Spin> ); export default App;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter