text: (window.webpackJsonp=window.webpackJsonp||[]).push([[31],{"5exc":function(n,e){n.exports='<>\n  <Spinner animation="border" variant="primary" />\n  <Spinner animation="border" variant="secondary" />\n  <Spinner animation="border" variant="success" />\n  <Spinner animation="border" variant="danger" />\n  <Spinner animation="border" variant="warning" />\n  <Spinner animation="border" variant="info" />\n  <Spinner animation="border" variant="light" />\n  <Spinner animation="border" variant="dark" />\n  <Spinner animation="grow" variant="primary" />\n  <Spinner animation="grow" variant="secondary" />\n  <Spinner animation="grow" variant="success" />\n  <Spinner animation="grow" variant="danger" />\n  <Spinner animation="grow" variant="warning" />\n  <Spinner animation="grow" variant="info" />\n  <Spinner animation="grow" variant="light" />\n  <Spinner animation="grow" variant="dark" />\n</>;\n'},"9Dqt":function(n,e){n.exports='<Spinner animation="grow" />;\n'},ETnU:function(n,e){n.exports='<>\n  <Button variant="primary" disabled>\n    <Spinner\n      as="span"\n      animation="border"\n      size="sm"\n      role="status"\n      aria-hidden="true"\n    />\n    <span className="sr-only">Loading...</span>\n  </Button>{\' \'}\n  <Button variant="primary" disabled>\n    <Spinner\n      as="span"\n      animation="grow"\n      size="sm"\n      role="status"\n      aria-hidden="true"\n    />\n    Loading...\n  </Button>\n</>;\n'},HufS:function(n,e){n.exports='<>\n  <Spinner animation="border" size="sm" />\n  <Spinner animation="border" />\n  <Spinner animation="grow" size="sm" />\n  <Spinner animation="grow" />\n</>;\n'},"q+GK":function(n,e,a){"use strict";a.r(e),a.d(e,"_frontmatter",(function(){return h})),a.d(e,"default",(function(){return v}));var t=a("zLVn"),i=(a("mXGw"),a("7ljp")),r=a("Snbm"),o=a("vXRK"),s=a("1u5/"),d=a("w+YF"),p=a.n(d),m=a("su+/"),c=a.n(m),l=a("9Dqt"),b=a.n(l),u=a("5exc"),x=a.n(u),g=a("HufS"),y=a.n(g),j=a("ETnU"),O=a.n(j),h={},S={query:"2690958107",_frontmatter:h},w=r.a;function v(n){var e=n.components,a=Object(t.a)(n,["components"]);return Object(i.mdx)(w,Object.assign({},S,a,{components:e,mdxType:"MDXLayout"}),Object(i.mdx)("h1",{id:"spinners"},"Spinners"),Object(i.mdx)("p",null,"Spinners can be used to show the loading state in your projects."),Object(i.mdx)(s.a,{codeText:p.a,mdxType:"ReactPlayground"}),Object(i.mdx)("h2",{id:"animations"},"Animations"),Object(i.mdx)("p",null,"Bootstrap offers two animation styles for spinners. The animation style\ncan be configured with the ",Object(i.mdx)("inlineCode",{parentName:"p"},"animation")," property. An animation style\nmust always be provided when creating a spinner."),Object(i.mdx)("p",null,Object(i.mdx)("strong",{parentName:"p"}," Border Spinner - ",Object(i.mdx)("inlineCode",{parentName:"strong"},"border"))),Object(i.mdx)(s.a,{codeText:c.a,mdxType:"ReactPlayground"}),Object(i.mdx)("p",null,Object(i.mdx)("strong",{parentName:"p"}," Grow Spinner - ",Object(i.mdx)("inlineCode",{parentName:"strong"},"grow")," ")),Object(i.mdx)(s.a,{codeText:b.a,mdxType:"ReactPlayground"}),Object(i.mdx)("h2",{id:"variants"},"Variants"),Object(i.mdx)("p",null,"All standard visual variants are available for both animation styles by\nsetting the ",Object(i.mdx)("inlineCode",{parentName:"p"},"variant")," property. Alternatively spinners can be custom\nsized with the ",Object(i.mdx)("inlineCode",{parentName:"p"},"style")," property, or custom CSS classes."),Object(i.mdx)(s.a,{codeText:x.a,mdxType:"ReactPlayground"}),Object(i.mdx)("h2",{id:"sizing"},"Sizing"),Object(i.mdx)("p",null,"In addition to the standard size, a smaller additional preconfigured\nsize is available by configuring the ",Object(i.mdx)("inlineCode",{parentName:"p"},"size")," property to ",Object(i.mdx)("inlineCode",{parentName:"p"},"sm"),"."),Object(i.mdx)(s.a,{codeText:y.a,mdxType:"ReactPlayground"}),Object(i.mdx)("h2",{id:"buttons"},"Buttons"),Object(i.mdx)("p",null,"Like the original Bootstrap spinners, these can also be used with\nbuttons. To use this component out-of-the-box it is recommended you\nchange the element type to ",Object(i.mdx)("inlineCode",{parentName:"p"},"span")," by configuring the ",Object(i.mdx)("inlineCode",{parentName:"p"},"as")," property when\nusing spinners inside buttons."),Object(i.mdx)(s.a,{codeText:O.a,mdxType:"ReactPlayground"}),Object(i.mdx)("h2",{id:"accessibility"},"Accessibility"),Object(i.mdx)("p",null,"To ensure the maximum accessibility for spinner components it is\nrecommended you provide a relevant ARIA ",Object(i.mdx)("inlineCode",{parentName:"p"},"role")," property,\nand include screenreader-only readable text representation of the\nspinner's meaning inside the component using Bootstrap's ",Object(i.mdx)("inlineCode",{parentName:"p"},"sr-only"),"\nclass."),Object(i.mdx)("p",null,"The example below provides an example of accessible usage of this\ncomponent."),Object(i.mdx)(s.a,{codeText:p.a,mdxType:"ReactPlayground"}),Object(i.mdx)("h2",{id:"api"},"API"),Object(i.mdx)(o.a,{metadata:a.data.metadata,mdxType:"ComponentApi"}))}v.isMDXComponent=!0},"su+/":function(n,e){n.exports='<Spinner animation="border" />;\n'},"w+YF":function(n,e){n.exports='<Spinner animation="border" role="status">\n  <span className="sr-only">Loading...</span>\n</Spinner>;\n'}}]);
  //# sourceMappingURL=component---src-pages-components-spinners-mdx-7e9fabf4c30572ccf0d8.js.map