{"componentChunkName":"component---content-components-spinner-md","path":"/components/spinner","result":{"pageContext":{"rootAbsolutePath":"/home/runner/work/awesome-design-system-2/awesome-design-system-2","slug":"components/spinner","rawBody":"---\ntitle: Spinner\npath: components/spinner\nstatus: Stable\nsource: \"https://github.com/KyleAMathews/react-spinkit\"\n---\n\nSpinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.\n\n## Usage\n\nSpinners are used when retrieving data or performing slow computations. They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they reassure the user that their action is being processed.\n\nUse a loading spinner whenever the wait time is anticipated to be longer than three seconds.\n\n### Types of spinners\n\nClassic spinner is a rotating unclosed circle.\n\n```jsx live nocode\n\n```\n\nIn some designs, this shape is modified to match the other styles.\n\n```jsx live nocode\n\n```\n\nThere can be other shapes of spinners. Sometimes it is the shape what creates connection to specific application.\n\n```jsx live nocode\n\n```\n\n### Branding spinners\n\nSpinners should be aligned with other brand elements and used the color from the design system\npalette.\n\n```jsx live nocode\n\n```\n\n## Documenting\n\nFor the sake of visual consistency it is good to provide the living examples\nin special blocks (as you could see above.\n\nHowever, you can choose to put it inline in the very\ndocumenttaion text.\n\n\n\nLooks amazing!\n\n## Code\n\nThis spinner is a React component and can be used as the following.\n\n```jsx\n\n```\n\nChanging that `name` and `color` attributes you can change its visual. Play around\nwith this live example. Try to give it a name `hree-bounce` and color `orange`. You can also write a text before or after it.\n\n```jsx live\n loading...\n```\n\n## Component props\n\n| Name | Type | Default | Description |\n| :----------------------- | :------ | :------------: | :-------------------------------------------------------------------------------------------------------- |\n| name | String | 'three-bounce' | Name of spinner. Find full list in the [react-spinkit docs](http://kyleamathews.github.io/react-spinkit/) |\n| color | String | | Color of the spinner |\n| fadeIn | String | 'full' | 'full', 'half', 'quarter', 'none' |\n| noFadeIn | Boolean | false | |\n| overrideSpinnerClassName | String | '' | Class to replace spinner CSS classes |\n| className | String | | Class to be added to the spinner |\n\n## How this page works\n\nThis pages shows a Spinner component from [react-spinkit](http://kyleamathews.github.io/react-spinkit/) library.\n\nWe expend the Gatsby theme of this website adding special files to `./src/@bridgetool/gatsby-theme-dev`.\n\nTo make the Spinner available in the examples, we link the library in `live-code-components.js`:\n\n```js\nimport Spinner from \"react-spinkit\"\n\nexport default {\n // ... other libs and/or components here\n Spinner,\n}\n```\n\nBesides, it can be used in markdown. To make it happen, we put this component to the global scope listing it in\n`markdown-components.js`\n\n```js\nimport Spinner from \"react-spinkit\"\n\nexport default {\n // ... other libs and/or components here\n Spinner,\n}\n```\n","editUrl":"https://github.com/gatsbyjs/gatsby-starter-default/edit/master/content/components/spinner.md","fileRelativePath":"content/components/spinner.md","contributors":[],"tableOfContents":{"items":[{"url":"#usage","title":"Usage","items":[{"url":"#types-of-spinners","title":"Types of spinners"},{"url":"#branding-spinners","title":"Branding spinners"}]},{"url":"#documenting","title":"Documenting"},{"url":"#code","title":"Code"},{"url":"#component-props","title":"Component props"},{"url":"#how-this-page-works","title":"How this page works"}]},"frontmatter":{"path":"components/spinner","title":"Spinner"}}},"staticQueryHashes":["1352237475","1352237475","2468112454","2468112454","3309604493","3309604493"]}