{"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":"3dd3c199-2b2b-5e7a-b417-cb1ed7432ef4","children":[],"parent":"a3e1a397-f4ff-53c2-9e14-90695c7b783b","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 | `rgba($ui-02, 0.6)` |\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":"a412b18368afa11d5336c75bbb2eccbe","counter":1529,"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 | `rgba($ui-02, 0.6)` |\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/767b4790/src/pages/components/loading/style.mdx"}}}}