[{"data":1,"prerenderedAt":361},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-spinner":12,"i-ph:code":359},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":25,"extension":353,"meta":354,"navigation":110,"path":355,"seo":356,"stem":357,"__hash__":358},"docs\u002Fdocs\u002Fcomponents\u002Fspinner.md","Spinner",{"type":16,"value":17,"toc":348},"minimark",[18,22,26,234,239,286,291,294,344],[19,20,14],"h1",{"id":21},"spinner",[23,24,25],"p",{},"The Spinner component is a loading indicator that shows an animated circular progress. It's commonly used to indicate that a process is ongoing or that content is being loaded.",[27,28,30],"spinner-example",{"source-path":29},"Spinner\u002FSpinner.vue",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Flex, Spinner } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFlex x-center y-center gap=\"l\">\n    \u003CSpinner size=\"s\" \u002F>\n    \u003CSpinner size=\"m\" \u002F>\n    \u003CSpinner size=\"l\" \u002F>\n  \u003C\u002FFlex>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,60,95,105,112,122,153,176,196,215,225],"code",{"__ignoreMap":36},[41,42,45,49,53,57],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sP76a","\u003C",[41,50,52],{"class":51},"sKpE2","script",[41,54,56],{"class":55},"sflEz"," setup",[41,58,59],{"class":47},">\n",[41,61,63,66,69,72,75,78,81,84,88,92],{"class":43,"line":62},2,[41,64,65],{"class":51},"import",[41,67,68],{"class":47}," {",[41,70,71],{"class":55}," Flex",[41,73,74],{"class":47},",",[41,76,77],{"class":55}," Spinner",[41,79,80],{"class":47}," }",[41,82,83],{"class":51}," from",[41,85,87],{"class":86},"sBR95"," '",[41,89,91],{"class":90},"sfmH-","@dolanske\u002Fvui",[41,93,94],{"class":86},"'\n",[41,96,98,101,103],{"class":43,"line":97},3,[41,99,100],{"class":47},"\u003C\u002F",[41,102,52],{"class":51},[41,104,59],{"class":47},[41,106,108],{"class":43,"line":107},4,[41,109,111],{"emptyLinePlaceholder":110},true,"\n",[41,113,115,117,120],{"class":43,"line":114},5,[41,116,48],{"class":47},[41,118,119],{"class":51},"template",[41,121,59],{"class":47},[41,123,125,128,131,134,137,140,143,146,149,151],{"class":43,"line":124},6,[41,126,127],{"class":47},"  \u003C",[41,129,130],{"class":51},"Flex",[41,132,133],{"class":55}," x-center",[41,135,136],{"class":55}," y-center",[41,138,139],{"class":55}," gap",[41,141,142],{"class":47},"=",[41,144,145],{"class":86},"\"",[41,147,148],{"class":90},"l",[41,150,145],{"class":86},[41,152,59],{"class":47},[41,154,156,159,161,164,166,168,171,173],{"class":43,"line":155},7,[41,157,158],{"class":47},"    \u003C",[41,160,14],{"class":51},[41,162,163],{"class":55}," size",[41,165,142],{"class":47},[41,167,145],{"class":86},[41,169,170],{"class":90},"s",[41,172,145],{"class":86},[41,174,175],{"class":47}," \u002F>\n",[41,177,179,181,183,185,187,189,192,194],{"class":43,"line":178},8,[41,180,158],{"class":47},[41,182,14],{"class":51},[41,184,163],{"class":55},[41,186,142],{"class":47},[41,188,145],{"class":86},[41,190,191],{"class":90},"m",[41,193,145],{"class":86},[41,195,175],{"class":47},[41,197,199,201,203,205,207,209,211,213],{"class":43,"line":198},9,[41,200,158],{"class":47},[41,202,14],{"class":51},[41,204,163],{"class":55},[41,206,142],{"class":47},[41,208,145],{"class":86},[41,210,148],{"class":90},[41,212,145],{"class":86},[41,214,175],{"class":47},[41,216,218,221,223],{"class":43,"line":217},10,[41,219,220],{"class":47},"  \u003C\u002F",[41,222,130],{"class":51},[41,224,59],{"class":47},[41,226,228,230,232],{"class":43,"line":227},11,[41,229,100],{"class":47},[41,231,119],{"class":51},[41,233,59],{"class":47},[235,236,238],"h2",{"id":237},"props","Props",[240,241,242,258],"table",{},[243,244,245],"thead",{},[246,247,248,252,255],"tr",{},[249,250,251],"th",{},"Name",[249,253,254],{},"Default",[249,256,257],{},"Type",[259,260,261],"tbody",{},[246,262,263,269,273],{},[264,265,266],"td",{},[38,267,268],{},"size",[264,270,271],{},[38,272,170],{},[264,274,275,277,278,277,280,277,282,285],{},[38,276,170],{}," ",[38,279,191],{},[38,281,148],{},[283,284],"br",{}," The size of the spinner",[287,288,290],"h3",{"id":289},"tokens","Tokens",[23,292,293],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[240,295,296,308],{},[243,297,298],{},[246,299,300,303,305],{},[249,301,302],{},"Token",[249,304,254],{},[249,306,307],{},"Description",[259,309,310,329],{},[246,311,312,317,326],{},[264,313,314],{},[38,315,316],{},"--vui-spinner-color",[264,318,319],{},[320,321,323],"a",{"href":322},"\u002Fdocs\u002Ftokens\u002Fcolors",[38,324,325],{},"var(--color-accent)",[264,327,328],{},"Spinner color",[246,330,331,336,341],{},[264,332,333],{},[38,334,335],{},"--vui-spinner-border-width",[264,337,338],{},[38,339,340],{},"3px",[264,342,343],{},"Spinner ring thickness",[345,346,347],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":36,"searchDepth":62,"depth":62,"links":349},[350],{"id":237,"depth":62,"text":238,"children":351},[352],{"id":289,"depth":97,"text":290},"md",{},"\u002Fdocs\u002Fcomponents\u002Fspinner",{"title":14,"description":25},"docs\u002Fcomponents\u002Fspinner","pYJ06me8bl2_TbdflwnDmRXRJ6isfqPzD83BUebhQE0",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":360},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",1782200883271]