@salesforce-ux/design-system/__internal/chunked/docs/ui/components/spinners/docs.mdx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,n,t,r={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},5616:function(e,n,t){t.r(n),t.d(n,{getContents:function(){return p},getElement:function(){return f}});var r=t(1594),i=t(5671),o=t(6547),a=t(806),l=t(8542),u=i.XB.code,c=i.XB.h2,s=i.XB.h3,d=i.XB.p,f=function(){return(0,r.createElement)(i.Ay,{},(0,r.createElement)("div",{className:"doc lead"},"Spinners are CSS loading indicators that should be shown when retrieving data or performing slow computations. In some cases, the first time a parent component loads, a stencil is preferred to indicate network activity."),(0,r.createElement)(o.A,{exampleOnly:!0},(0,a.NO)(l.K1,"brand")),c({id:"About-Spinners"},"About Spinners"),d({},"To use the spinner in a component, the parent of the spinner should be set to ",u({},"position:relative"),". You can use the utility class ",u({},".slds-is-relative")," or add the declaration to your custom component CSS. If you are using the spinner in an ",u({},"iframe")," and dynamically loading DOM nodes after the page has loaded, it is recommended that you set the ",u({},".slds-spinner_container")," to ",u({},"position:fixed")," so that it remains centered in the viewport. The background overlay for the spinner is an optional element."),s({id:"Accessibility"},"Accessibility"),d({},"A spinner should have the Aria ",u({},'role="status"')," and contain assistive text that explains what is currently happening."),c({id:"Base"},"Base"),(0,r.createElement)(o.A,null,(0,a.NO)(l.Ay)),c({id:"Examples"},"Examples"),s({id:"Without-container"},"Without container"),(0,r.createElement)(o.A,null,(0,a.NO)(l.K1,"without-container")),s({id:"With-container"},"With container"),(0,r.createElement)(o.A,null,(0,a.NO)(l.K1,"with-container")),s({id:"Fixed-container"},"Fixed container"),(0,r.createElement)(o.A,null,(0,a.NO)(l.K1,"fixed-container")),s({id:"Right-to-left-support"},"Right to left support"),(0,r.createElement)(o.A,null,(0,a.NO)(l.K1,"right-to-left-medium")),c({id:"Layout"},"Layout"),s({id:"Inlined"},"Inlined"),(0,r.createElement)(o.A,null,(0,a.NO)(l.K1,"inlined")),c({id:"Color"},"Color"),s({id:"Inverse"},"Inverse"),(0,r.createElement)(o.A,null,(0,a.NO)(l.K1,"inverse")),s({id:"Brand"},"Brand"),(0,r.createElement)(o.A,null,(0,a.NO)(l.K1,"brand")),c({id:"Timing"},"Timing"),s({id:"Delayed"},"Delayed"),(0,r.createElement)(o.A,null,(0,a.NO)(l.K1,"delayed")),c({id:"Sizing"},"Sizing"),s({id:"XX-Small"},"XX-Small"),(0,r.createElement)(o.A,null,(0,a.NO)(l.K1,"xx-small")),s({id:"X-Small"},"X-Small"),(0,r.createElement)(o.A,null,(0,a.NO)(l.K1,"x-small")),s({id:"Small"},"Small"),(0,r.createElement)(o.A,null,(0,a.NO)(l.K1,"small")),s({id:"Medium"},"Medium"),(0,r.createElement)(o.A,null,(0,a.NO)(l.K1,"medium")),s({id:"Large"},"Large"),(0,r.createElement)(o.A,null,(0,a.NO)(l.K1,"large")))},p=function(){return(0,i.Qr)(f())}}},i={};function o(e){var n=i[e];if(void 0!==n)return n.exports;var t=i[e]={id:e,exports:{}};return r[e](t,t.exports,o),t.exports}o.m=r,o.amdO={},e=[],o.O=function(n,t,r,i){if(!t){var a=1/0;for(s=0;s<e.length;s++){t=e[s][0],r=e[s][1],i=e[s][2];for(var l=!0,u=0;u<t.length;u++)(!1&i||a>=i)&&Object.keys(o.O).every(function(e){return o.O[e](t[u])})?t.splice(u--,1):(l=!1,i<a&&(a=i));if(l){e.splice(s--,1);var c=r();void 0!==c&&(n=c)}}return n}i=i||0;for(var s=e.length;s>0&&e[s-1][2]>i;s--)e[s]=e[s-1];e[s]=[t,r,i]},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,{a:n}),n},t=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},o.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var i=Object.create(null);o.r(i);var a={};n=n||[null,t({}),t([]),t(t)];for(var l=2&r&&e;("object"==typeof l||"function"==typeof l)&&!~n.indexOf(l);l=t(l))Object.getOwnPropertyNames(l).forEach(function(n){a[n]=function(){return e[n]}});return a.default=function(){return e},o.d(i,a),i},o.d=function(e,n){for(var t in n)o.o(n,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},o.e=function(){return Promise.resolve()},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.j=2337,function(){var e={2337:0};o.O.j=function(n){return 0===e[n]};var n=function(n,t){var r,i,a=t[0],l=t[1],u=t[2],c=0;if(a.some(function(n){return 0!==e[n]})){for(r in l)o.o(l,r)&&(o.m[r]=l[r]);if(u)var s=u(o)}for(n&&n(t);c<a.length;c++)i=a[c],o.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return o.O(s)},t=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];t.forEach(n.bind(null,0)),t.push=n.bind(null,t.push.bind(t))}(),o.nc=void 0;var a=o.O(void 0,[3540],function(){return o(5616)});a=o.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/spinners/docs.mdx.js"]=a}();