{"componentChunkName":"component---src-pages-components-loading-style-mdx","path":"/components/loading/style/","result":{"pageContext":{"frontmatter":{"title":"Loading","description":"Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/loading/style.mdx","titleType":"prepend","MdxNode":{"id":"40283ae2-73e2-592a-8acc-96aa62c8cf35","children":[],"parent":"0b28b48f-1ab7-5fec-a5d8-cde3284f53c3","internal":{"content":"---\ntitle: Loading\ndescription: Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Color\n\n| Class                  | Property         | Color token       |\n| ---------------------- | ---------------- | ----------------- |\n| `.bx--loading__svg`    | stroke           | `$interactive-04` |\n| `.bx--loading--small`  | stroke           | `$interactive-04` |\n| `.bx--loading-overlay` | background-color | `$overlay-01`     |\n\n## Structure\n\n| Class                 | Property      | px / rem | Spacing token |\n| --------------------- | ------------- | -------- | ------------- |\n| `.bx--loading`        | height, width | 88 / 5.5 | –             |\n| `.bx--loading--small` | height, width | 16 / 1   | –             |\n\n<div className=\"image--fixed\">\n\n![Large spinner structure measurements](images/loading-style-1.png)\n\n</div>\n\n<Caption>\n  Structure measurements for small and large loading spinner | px / rem\n</Caption>\n\n### Placement\n\nThe large loading spinner should appear centered over a page or content that it is loading. Please note that the top-level navigation is not included in the page loading overlay.\n\n<div className=\"image--fixed\">\n\n![Large spinner in context example](images/loading-style-4.png)\n\n</div>\n\n<Caption>Example of a large loading spinner in product context</Caption>\n","type":"Mdx","contentDigest":"6141c9f8e170c99c0dd693ab69408fb6","counter":1533,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Loading","description":"Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Loading\ndescription: Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Color\n\n| Class                  | Property         | Color token       |\n| ---------------------- | ---------------- | ----------------- |\n| `.bx--loading__svg`    | stroke           | `$interactive-04` |\n| `.bx--loading--small`  | stroke           | `$interactive-04` |\n| `.bx--loading-overlay` | background-color | `$overlay-01`     |\n\n## Structure\n\n| Class                 | Property      | px / rem | Spacing token |\n| --------------------- | ------------- | -------- | ------------- |\n| `.bx--loading`        | height, width | 88 / 5.5 | –             |\n| `.bx--loading--small` | height, width | 16 / 1   | –             |\n\n<div className=\"image--fixed\">\n\n![Large spinner structure measurements](images/loading-style-1.png)\n\n</div>\n\n<Caption>\n  Structure measurements for small and large loading spinner | px / rem\n</Caption>\n\n### Placement\n\nThe large loading spinner should appear centered over a page or content that it is loading. Please note that the top-level navigation is not included in the page loading overlay.\n\n<div className=\"image--fixed\">\n\n![Large spinner in context example](images/loading-style-4.png)\n\n</div>\n\n<Caption>Example of a large loading spinner in product context</Caption>\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/loading/style.mdx"}}}}