{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/feedback/spin","result":{"data":{"current":{"frontmatter":{"title":"Spin 加载器","order":93,"brief":"加载器组件用于告知用户内容正在加载且需要一段不确定的时长。","icon":"doc-spin"},"fields":{"type":"feedback"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#尺寸","title":"尺寸"},{"url":"#带文字的","title":"带文字的"},{"url":"#自定义指示符","title":"自定义指示符"},{"url":"#延迟显示","title":"延迟显示"}]},{"url":"#api-参考","title":"API 参考"},{"url":"#设计变量","title":"设计变量"},{"url":"#文案规范","title":"文案规范"},{"url":"#faq","title":"FAQ"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 93,\n  \"category\": \"反馈类\",\n  \"title\": \"Spin 加载器\",\n  \"icon\": \"doc-spin\",\n  \"brief\": \"加载器组件用于告知用户内容正在加载且需要一段不确定的时长。\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Spin } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Spin } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div style={{ marginLeft: 30 }}>\\n        <div style={{ marginBottom: 10 }}>A basic spin.</div>\\n        <Spin />\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5C3A\\u5BF8\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7EC4\\u4EF6\\u5B9A\\u4E49\\u4E86\\u4E09\\u79CD\\u5C3A\\u5BF8\\uFF1A\\u5927\\u3001\\u4E2D\\uFF08\\u9ED8\\u8BA4\\uFF09\\u3001\\u5C0F\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Spin } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div style={{ marginLeft: 30 }}>\\n        <div style={{ marginBottom: 5 }}>size: small</div>\\n        <Spin size=\\\"small\\\" />\\n        <br />\\n        <br />\\n        <div style={{ marginBottom: 10 }}>size: middle</div>\\n        <Spin size=\\\"middle\\\" />\\n        <br />\\n        <br />\\n        <div style={{ marginBottom: 15 }}>size: large</div>\\n        <Spin size=\\\"large\\\" />\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5E26\\u6587\\u5B57\\u7684\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tip\"), \" \\u5C5E\\u6027\\u53EF\\u8BBE\\u7F6E\\u5F53 Spin \\u7528\\u4F5C\\u5305\\u88F9\\u5143\\u7D20\\u65F6\\u7684\\u6587\\u5B57\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Spin } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Spin tip=\\\"I am loading...\\\">\\n            <div\\n                style={{\\n                    border: '1px solid var(--semi-color-primary)',\\n                    borderRadius: '4px',\\n                    paddingLeft: '8px',\\n                }}\\n            >\\n                <p>Here are some texts.</p>\\n                <p>And more texts on the way.</p>\\n            </div>\\n        </Spin>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6307\\u793A\\u7B26\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"indicator\"), \" \\u5C5E\\u6027\\u81EA\\u5B9A\\u4E49 Spin \\u7684\\u6307\\u793A\\u7B26\\u6837\\u5F0F\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Spin } from '@douyinfe/semi-ui';\\nimport { IconLoading } from '@douyinfe/semi-icons';\\n\\n() => (\\n    <div style={{ marginLeft: 30 }}>\\n        <div>A spin with customized indicator.</div>\\n        <Spin indicator={<IconLoading />} />\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5EF6\\u8FDF\\u663E\\u793A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 delay \\u8BBE\\u7F6E\\u5EF6\\u8FDF\\u663E\\u793A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"loading\"), \" \\u7684\\u6548\\u679C\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u7EC4\\u4EF6\\u662F\\u5426\\u5904\\u4E8E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"loading\"), \" \\u72B6\\u6001\\u7531\\u4F20\\u5165\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"spinning\"), \" \\u503C\\u51B3\\u5B9A\\uFF0Cloading \\u4E3A\\u53D7\\u63A7\\u5C5E\\u6027\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React, { useState } from 'react';\\nimport { Spin, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [loading, toggleLoading] = useState(false);\\n\\n    const toggle = () => {\\n        toggleLoading(!loading);\\n    };\\n    return (\\n        <div>\\n            <Button onClick={toggle} style={{ marginRight: 20 }}>\\n                \\u5EF6\\u8FDF\\u663E\\u793A\\u7684spin\\n            </Button>\\n            <Spin delay={1000} spinning={loading}></Spin>\\n        </div>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"childStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u90E8\\u5B50\\u5143\\u7D20\\u7684\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"delay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5EF6\\u8FDF\\u663E\\u793A\\u52A0\\u8F7D\\u6548\\u679C\\u7684\\u65F6\\u95F4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number(ms)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"indicator\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u52A0\\u8F7D\\u6307\\u793A\\u7B26\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EC4\\u4EF6\\u5927\\u5C0F\\uFF0C\\u53EF\\u9009\\u503C\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"middle\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"middle\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"spinning\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5904\\u4E8E\\u52A0\\u8F7D\\u4E2D\\u7684\\u72B6\\u6001\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"tip\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53 spin \\u4F5C\\u4E3A\\u5305\\u88F9\\u5143\\u7D20\\u65F6\\uFF0C\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u63CF\\u8FF0\\u6587\\u5B57\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"wrapperClassName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5305\\u88F9\\u5143\\u7D20\\u7684\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65E0\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u51C6\\u786E\\u5730\\u8BF4\\u660E\\u52A0\\u8F7D\\u72B6\\u6001\\uFF0C\\u4F7F\\u7528\\u6BD4\\u5982\\u201CLoading\\u201D, \\u201CSubmitting\\u201D, \\u201CProcessing\\u201D\\u7B49\\u8BCD\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F7F\\u7528\\u5C3D\\u91CF\\u5C11\\u7684\\u8BCD\\u6C47\\u53BB\\u63CF\\u8FF0\\u72B6\\u6001\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u600E\\u4E48\\u4FEE\\u6539 icon \\u7684\\u989C\\u8272\\uFF1F\")), mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u7ED9 .semi-spin-wrapper \\u7C7B\\u6DFB\\u52A0 color \\u5C5E\\u6027\\u8986\\u76D6\\u539F\\u6709\\u7684\\u989C\\u8272\\uFF08\\u63A8\\u8350\\u4EE5\\u66F4\\u9AD8\\u6743\\u91CD\\u8986\\u76D6\\uFF09\"), mdx(\"pre\", {\n    parentName: \"li\"\n  }, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \".custom .semi-spin-wrapper {\\n  color: red;\\n}\\n\"))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/feedback/spin","next":{"fields":{"slug":"en-US/feedback/toast"},"id":"125d2181-adf6-5bff-9bca-4fa7284a4ff8","frontmatter":{"title":"Toast","localeCode":"en-US","icon":"doc-toast","showNew":null}},"previous":{"fields":{"slug":"en-US/feedback/spin"},"id":"1d6c7b35-2d1a-5c51-9225-f7a0040735fc","frontmatter":{"title":"Spin","localeCode":"en-US","icon":"doc-spin","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}