[{"data":1,"prerenderedAt":215},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fspinner":3,"component-meta:UiSpinner":166},{"id":4,"title":5,"body":6,"component":153,"dependsOn":154,"description":155,"emitDescriptions":156,"extension":157,"meta":158,"navigation":159,"order":160,"path":161,"seo":162,"status":163,"stem":164,"__hash__":165},"docs\u002Fdocs\u002Fcomponents\u002Fspinner.md","Spinner",{"type":7,"value":8,"toc":144},"minimark",[9,18,23,28,59,63,66,70,78,82,101,105,131,137],[10,11,12,13,17],"p",{},"Коло з дугою, що обертається. Колір типово береться з тексту батька\n(",[14,15,16],"code",{},"tone=\"current\"","), тож усередині суцільної кнопки спінер сам стає білим,\nа в приглушеному рядку — приглушеним, без жодного props.",[19,20],"component-preview",{"name":21,"stage":22},"spinner-basic","min-h-72",[24,25,27],"h2",{"id":26},"спінер-скелетон-чи-прогрес","Спінер, скелетон чи прогрес",[29,30,31,44,54],"ul",{},[32,33,34,38,39,43],"li",{},[35,36,37],"strong",{},"Skeleton"," — коли відома ",[40,41,42],"em",{},"форма"," того, що завантажується: список,\nкартка, таблиця. Сітка не перебудовується в момент приходу даних.",[32,45,46,49,50,53],{},[35,47,48],{},"Progress \u002F ProgressRing"," — коли відомо, ",[40,51,52],{},"скільки"," лишилось: upload,\nімпорт, пакетна операція.",[32,55,56,58],{},[35,57,5],{}," — коли не відомо ні форми, ні тривалості: оновлення рядка,\nперевірка поля, короткий запит.",[24,60,62],{"id":61},"api","API",[64,65],"component-api",{},[24,67,69],{"id":68},"коли-використовувати","Коли використовувати",[29,71,72,75],{},[32,73,74],{},"Коротке очікування (до кількох секунд) на місці конкретного елемента:\nіконка кнопки «Оновити», статус рядка, перевірка унікальності поля.",[32,76,77],{},"Завантаження панелі, форма вмісту якої невідома заздалегідь.",[24,79,81],{"id":80},"коли-не-використовувати","Коли НЕ використовувати",[29,83,84,95,98],{},[32,85,86,87,90,91,94],{},"Для кнопки, що надсилає форму, — у ",[14,88,89],{},"UiButton"," вже є ",[14,92,93],{},"loading",", який ще й\nзберігає ширину кнопки.",[32,96,97],{},"Для списків і карток — скелетон повторює геометрію і не змушує сторінку\nстрибати.",[32,99,100],{},"Для довгих процесів. Через ~5 с спінер перестає переконувати, що щось\nвідбувається: покажіть прогрес або дайте скасувати.",[24,102,104],{"id":103},"доступність","Доступність",[10,106,107,108,111,112,115,116,119,120,122,123,126,127,130],{},"Без ",[14,109,110],{},"label"," спінер декоративний (",[14,113,114],{},"aria-hidden","): стан завантаження має\nоголошувати контейнер через ",[14,117,118],{},"aria-busy"," або текст поруч. З ",[14,121,110],{}," він стає\n",[14,124,125],{},"role=\"status\""," з текстом — видимим (",[14,128,129],{},"showLabel",") або лише для скрінрідера.",[10,132,133,134,136],{},"Live-регіон, що з'являється разом зі своїм текстом, скрінрідери часто\nпропускають: оголошення надійне лише тоді, коли регіон існував ДО зміни.\nЯкщо завантаження важливо оголосити, тримайте постійний контейнер із\n",[14,135,125],{}," і міняйте його текст, а спінер лишіть декоративним.",[10,138,139,140,143],{},"Під ",[14,141,142],{},"prefers-reduced-motion"," обертання зупиняє глобальний вимикач — так\nсамо, як у Progress і LoadingDots. Щоб застигле коло не читалося як\nзвичайна іконка, дуга тоді подовжується до трьох чвертей — впізнаваний\nстатичний гліф очікування.",{"title":145,"searchDepth":146,"depth":146,"links":147},"",2,[148,149,150,151,152],{"id":26,"depth":146,"text":27},{"id":61,"depth":146,"text":62},{"id":68,"depth":146,"text":69},{"id":80,"depth":146,"text":81},{"id":103,"depth":146,"text":104},"UiSpinner",[],"Індикатор очікування без відомої тривалості — у кнопці, рядку списку чи на місці панелі.",{},"md",{},true,31,"\u002Fdocs\u002Fcomponents\u002Fspinner",{"title":5,"description":155},"stable","docs\u002Fcomponents\u002Fspinner","SaeK_Vpk_sCFtMn5iWf383oQXFaAsurM5TLS9eYocas",{"mode":167,"prefetch":168,"preload":168,"filePath":169,"declarationPath":170,"pascalName":153,"kebabName":171,"chunkName":172,"priority":173,"_scanned":159,"meta":174},"all",false,"app\u002Fcomponents\u002Fui\u002FUiSpinner.vue","\u002Fapp\u002Fapp\u002Fcomponents\u002Fui\u002FUiSpinner.vue","ui-spinner","components\u002Fui-spinner",1,{"type":173,"props":175,"slots":211,"events":212,"exposed":213,"hash":214},[176,181,192,203],{"name":110,"global":168,"default":177,"description":178,"tags":179,"required":168,"type":180,"schema":180},"undefined","Що саме вантажиться: «Завантаження замовлень». Із ним спінер стає\n`role=\"status\"`; без нього — декоративний (`aria-hidden`), і стан\nмає оголошувати контейнер (`aria-busy`) або текст поруч.",[],"string",{"name":182,"global":168,"default":183,"description":184,"tags":185,"required":168,"type":186,"schema":187},"tone","\"current\"","Колір. `current` успадковує колір тексту батька — усередині суцільної\nкнопки спінер сам стає білим, у приглушеному рядку — приглушеним.",[],"\"accent\" | \"current\" | \"muted\"",{"kind":188,"type":186,"schema":189},"enum",{"0":190,"1":183,"2":191},"\"accent\"","\"muted\"",{"name":193,"global":168,"default":194,"description":195,"tags":196,"required":168,"type":197,"schema":198},"size","\"sm\"","Діаметр. `xs`\u002F`sm` — усередині рядка тексту, кнопки чи комірки\nтаблиці; `md` — у картці; `lg` — на місці вмісту панелі.",[],"\"md\" | \"sm\" | \"xs\" | \"lg\"",{"kind":188,"type":197,"schema":199},{"0":200,"1":194,"2":201,"3":202},"\"md\"","\"xs\"","\"lg\"",{"name":129,"global":168,"default":204,"description":205,"tags":206,"required":168,"type":207,"schema":208},"false","Показати `label` видимим текстом праворуч від кола.",[],"boolean",{"kind":188,"type":207,"schema":209},{"0":204,"1":210},"true",[],[],[],"nSI0fkck3pD9IWXvR68HMWbLKgyc8zU8p06mi99Ihnc",1792004323349]