[{"data":1,"prerenderedAt":834},["Reactive",2],{"content-query-nmE09RZUnQ":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"body":10,"_type":830,"_id":831,"_source":832,"_file":833,"_extension":361},"/docs/components/loader","components",false,"","Loader - Inkline","Provide a loading state for a component or page using a customizable loading spinner.",{"type":11,"children":12,"toc":820},"root",[13,22,28,34,125,132,159,332,338,371,535,553,690,696,708,786,792,796,802,806,812,816],{"type":14,"tag":15,"props":16,"children":18},"element","h1",{"id":17},"loader",[19],{"type":20,"value":21},"text","Loader",{"type":14,"tag":23,"props":24,"children":26},"h2",{"id":25},"provide-a-loading-state-for-a-component-or-page-using-a-customizable-loading-spinner",[27],{"type":20,"value":9},{"type":14,"tag":29,"props":30,"children":31},"p",{},[32],{"type":20,"value":33},"Use the loader component whenever you have an action that requires the user to wait for its completion. The loader component is very versatile and can be adapted to any container size.",{"type":14,"tag":35,"props":36,"children":37},"content-tabs",{},[38,47],{"type":14,"tag":39,"props":40,"children":41},"template",{"v-slot:preview":7},[42],{"type":14,"tag":43,"props":44,"children":46},"content-preview",{"src":45},"/components/ILoader/examples/basic",[],{"type":14,"tag":39,"props":48,"children":49},{"v-slot:vue":7},[50],{"type":14,"tag":51,"props":52,"children":57},"code",{"className":53,"code":55,"language":56,"meta":7},[54],"language-vue","\u003Ctemplate>\n    \u003CILoader />\n\u003C/template>\n\n","vue",[58],{"type":14,"tag":59,"props":60,"children":61},"pre",{},[62],{"type":14,"tag":51,"props":63,"children":64},{"__ignoreMap":7},[65,87,107],{"type":14,"tag":66,"props":67,"children":70},"span",{"class":68,"line":69},"line",1,[71,77,82],{"type":14,"tag":66,"props":72,"children":74},{"class":73},"ct-553616",[75],{"type":20,"value":76},"\u003C",{"type":14,"tag":66,"props":78,"children":80},{"class":79},"ct-914029",[81],{"type":20,"value":39},{"type":14,"tag":66,"props":83,"children":84},{"class":73},[85],{"type":20,"value":86},">\n",{"type":14,"tag":66,"props":88,"children":90},{"class":68,"line":89},2,[91,96,102],{"type":14,"tag":66,"props":92,"children":93},{"class":73},[94],{"type":20,"value":95},"    \u003C",{"type":14,"tag":66,"props":97,"children":99},{"class":98},"ct-028869",[100],{"type":20,"value":101},"ILoader",{"type":14,"tag":66,"props":103,"children":104},{"class":73},[105],{"type":20,"value":106}," />\n",{"type":14,"tag":66,"props":108,"children":110},{"class":68,"line":109},3,[111,116,120],{"type":14,"tag":66,"props":112,"children":113},{"class":73},[114],{"type":20,"value":115},"\u003C/",{"type":14,"tag":66,"props":117,"children":118},{"class":79},[119],{"type":20,"value":39},{"type":14,"tag":66,"props":121,"children":122},{"class":73},[123],{"type":20,"value":124},">",{"type":14,"tag":126,"props":127,"children":129},"h3",{"id":128},"color-variants",[130],{"type":20,"value":131},"Color Variants",{"type":14,"tag":29,"props":133,"children":134},{},[135,137,143,145,150,152,157],{"type":20,"value":136},"The loader component is available in a ",{"type":14,"tag":138,"props":139,"children":140},"code-inline",{},[141],{"type":20,"value":142},"light",{"type":20,"value":144}," or ",{"type":14,"tag":138,"props":146,"children":147},{},[148],{"type":20,"value":149},"dark",{"type":20,"value":151}," color, which you can choose using the ",{"type":14,"tag":138,"props":153,"children":154},{},[155],{"type":20,"value":156},"color",{"type":20,"value":158}," property.",{"type":14,"tag":35,"props":160,"children":161},{},[162,169],{"type":14,"tag":39,"props":163,"children":164},{"v-slot:preview":7},[165],{"type":14,"tag":43,"props":166,"children":168},{"src":167},"/components/ILoader/examples/color-variants",[],{"type":14,"tag":39,"props":170,"children":171},{"v-slot:vue":7},[172],{"type":14,"tag":51,"props":173,"children":176},{"className":174,"code":175,"language":56,"meta":7},[54],"\u003Ctemplate>\n    \u003CILoader color=\"primary\" />\n\n    \u003CILoader color=\"light\" />\n\n    \u003CILoader color=\"dark\" />\n\u003C/template>\n\n",[177],{"type":14,"tag":59,"props":178,"children":179},{},[180],{"type":14,"tag":51,"props":181,"children":182},{"__ignoreMap":7},[183,198,234,242,275,283,316],{"type":14,"tag":66,"props":184,"children":185},{"class":68,"line":69},[186,190,194],{"type":14,"tag":66,"props":187,"children":188},{"class":73},[189],{"type":20,"value":76},{"type":14,"tag":66,"props":191,"children":192},{"class":79},[193],{"type":20,"value":39},{"type":14,"tag":66,"props":195,"children":196},{"class":73},[197],{"type":20,"value":86},{"type":14,"tag":66,"props":199,"children":200},{"class":68,"line":89},[201,205,209,214,219,224,230],{"type":14,"tag":66,"props":202,"children":203},{"class":73},[204],{"type":20,"value":95},{"type":14,"tag":66,"props":206,"children":207},{"class":98},[208],{"type":20,"value":101},{"type":14,"tag":66,"props":210,"children":211},{"class":73},[212],{"type":20,"value":213}," ",{"type":14,"tag":66,"props":215,"children":217},{"class":216},"ct-762058",[218],{"type":20,"value":156},{"type":14,"tag":66,"props":220,"children":221},{"class":73},[222],{"type":20,"value":223},"=",{"type":14,"tag":66,"props":225,"children":227},{"class":226},"ct-952708",[228],{"type":20,"value":229},"\"primary\"",{"type":14,"tag":66,"props":231,"children":232},{"class":73},[233],{"type":20,"value":106},{"type":14,"tag":66,"props":235,"children":236},{"class":68,"line":109},[237],{"type":14,"tag":66,"props":238,"children":239},{},[240],{"type":20,"value":241},"\n",{"type":14,"tag":66,"props":243,"children":245},{"class":68,"line":244},4,[246,250,254,258,262,266,271],{"type":14,"tag":66,"props":247,"children":248},{"class":73},[249],{"type":20,"value":95},{"type":14,"tag":66,"props":251,"children":252},{"class":98},[253],{"type":20,"value":101},{"type":14,"tag":66,"props":255,"children":256},{"class":73},[257],{"type":20,"value":213},{"type":14,"tag":66,"props":259,"children":260},{"class":216},[261],{"type":20,"value":156},{"type":14,"tag":66,"props":263,"children":264},{"class":73},[265],{"type":20,"value":223},{"type":14,"tag":66,"props":267,"children":268},{"class":226},[269],{"type":20,"value":270},"\"light\"",{"type":14,"tag":66,"props":272,"children":273},{"class":73},[274],{"type":20,"value":106},{"type":14,"tag":66,"props":276,"children":278},{"class":68,"line":277},5,[279],{"type":14,"tag":66,"props":280,"children":281},{},[282],{"type":20,"value":241},{"type":14,"tag":66,"props":284,"children":286},{"class":68,"line":285},6,[287,291,295,299,303,307,312],{"type":14,"tag":66,"props":288,"children":289},{"class":73},[290],{"type":20,"value":95},{"type":14,"tag":66,"props":292,"children":293},{"class":98},[294],{"type":20,"value":101},{"type":14,"tag":66,"props":296,"children":297},{"class":73},[298],{"type":20,"value":213},{"type":14,"tag":66,"props":300,"children":301},{"class":216},[302],{"type":20,"value":156},{"type":14,"tag":66,"props":304,"children":305},{"class":73},[306],{"type":20,"value":223},{"type":14,"tag":66,"props":308,"children":309},{"class":226},[310],{"type":20,"value":311},"\"dark\"",{"type":14,"tag":66,"props":313,"children":314},{"class":73},[315],{"type":20,"value":106},{"type":14,"tag":66,"props":317,"children":319},{"class":68,"line":318},7,[320,324,328],{"type":14,"tag":66,"props":321,"children":322},{"class":73},[323],{"type":20,"value":115},{"type":14,"tag":66,"props":325,"children":326},{"class":79},[327],{"type":20,"value":39},{"type":14,"tag":66,"props":329,"children":330},{"class":73},[331],{"type":20,"value":124},{"type":14,"tag":126,"props":333,"children":335},{"id":334},"size-variants",[336],{"type":20,"value":337},"Size Variants",{"type":14,"tag":29,"props":339,"children":340},{},[341,343,348,350,355,357,362,364,369],{"type":20,"value":342},"You're able to use the ",{"type":14,"tag":138,"props":344,"children":345},{},[346],{"type":20,"value":347},"size",{"type":20,"value":349}," modifier to control the size of your loader component, using one of the available sizes: ",{"type":14,"tag":138,"props":351,"children":352},{},[353],{"type":20,"value":354},"sm",{"type":20,"value":356},", ",{"type":14,"tag":138,"props":358,"children":359},{},[360],{"type":20,"value":361},"md",{"type":20,"value":363},", and ",{"type":14,"tag":138,"props":365,"children":366},{},[367],{"type":20,"value":368},"lg",{"type":20,"value":370},".",{"type":14,"tag":35,"props":372,"children":373},{},[374,381],{"type":14,"tag":39,"props":375,"children":376},{"v-slot:preview":7},[377],{"type":14,"tag":43,"props":378,"children":380},{"src":379},"/components/ILoader/examples/size-variants",[],{"type":14,"tag":39,"props":382,"children":383},{"v-slot:vue":7},[384],{"type":14,"tag":51,"props":385,"children":388},{"className":386,"code":387,"language":56,"meta":7},[54],"\u003Ctemplate>\n    \u003CILoader size=\"sm\" />\n\n    \u003CILoader size=\"md\" />\n\n    \u003CILoader size=\"lg\" />\n\u003C/template>\n\n",[389],{"type":14,"tag":59,"props":390,"children":391},{},[392],{"type":14,"tag":51,"props":393,"children":394},{"__ignoreMap":7},[395,410,442,449,481,488,520],{"type":14,"tag":66,"props":396,"children":397},{"class":68,"line":69},[398,402,406],{"type":14,"tag":66,"props":399,"children":400},{"class":73},[401],{"type":20,"value":76},{"type":14,"tag":66,"props":403,"children":404},{"class":79},[405],{"type":20,"value":39},{"type":14,"tag":66,"props":407,"children":408},{"class":73},[409],{"type":20,"value":86},{"type":14,"tag":66,"props":411,"children":412},{"class":68,"line":89},[413,417,421,425,429,433,438],{"type":14,"tag":66,"props":414,"children":415},{"class":73},[416],{"type":20,"value":95},{"type":14,"tag":66,"props":418,"children":419},{"class":98},[420],{"type":20,"value":101},{"type":14,"tag":66,"props":422,"children":423},{"class":73},[424],{"type":20,"value":213},{"type":14,"tag":66,"props":426,"children":427},{"class":216},[428],{"type":20,"value":347},{"type":14,"tag":66,"props":430,"children":431},{"class":73},[432],{"type":20,"value":223},{"type":14,"tag":66,"props":434,"children":435},{"class":226},[436],{"type":20,"value":437},"\"sm\"",{"type":14,"tag":66,"props":439,"children":440},{"class":73},[441],{"type":20,"value":106},{"type":14,"tag":66,"props":443,"children":444},{"class":68,"line":109},[445],{"type":14,"tag":66,"props":446,"children":447},{},[448],{"type":20,"value":241},{"type":14,"tag":66,"props":450,"children":451},{"class":68,"line":244},[452,456,460,464,468,472,477],{"type":14,"tag":66,"props":453,"children":454},{"class":73},[455],{"type":20,"value":95},{"type":14,"tag":66,"props":457,"children":458},{"class":98},[459],{"type":20,"value":101},{"type":14,"tag":66,"props":461,"children":462},{"class":73},[463],{"type":20,"value":213},{"type":14,"tag":66,"props":465,"children":466},{"class":216},[467],{"type":20,"value":347},{"type":14,"tag":66,"props":469,"children":470},{"class":73},[471],{"type":20,"value":223},{"type":14,"tag":66,"props":473,"children":474},{"class":226},[475],{"type":20,"value":476},"\"md\"",{"type":14,"tag":66,"props":478,"children":479},{"class":73},[480],{"type":20,"value":106},{"type":14,"tag":66,"props":482,"children":483},{"class":68,"line":277},[484],{"type":14,"tag":66,"props":485,"children":486},{},[487],{"type":20,"value":241},{"type":14,"tag":66,"props":489,"children":490},{"class":68,"line":285},[491,495,499,503,507,511,516],{"type":14,"tag":66,"props":492,"children":493},{"class":73},[494],{"type":20,"value":95},{"type":14,"tag":66,"props":496,"children":497},{"class":98},[498],{"type":20,"value":101},{"type":14,"tag":66,"props":500,"children":501},{"class":73},[502],{"type":20,"value":213},{"type":14,"tag":66,"props":504,"children":505},{"class":216},[506],{"type":20,"value":347},{"type":14,"tag":66,"props":508,"children":509},{"class":73},[510],{"type":20,"value":223},{"type":14,"tag":66,"props":512,"children":513},{"class":226},[514],{"type":20,"value":515},"\"lg\"",{"type":14,"tag":66,"props":517,"children":518},{"class":73},[519],{"type":20,"value":106},{"type":14,"tag":66,"props":521,"children":522},{"class":68,"line":318},[523,527,531],{"type":14,"tag":66,"props":524,"children":525},{"class":73},[526],{"type":20,"value":115},{"type":14,"tag":66,"props":528,"children":529},{"class":79},[530],{"type":20,"value":39},{"type":14,"tag":66,"props":532,"children":533},{"class":73},[534],{"type":20,"value":124},{"type":14,"tag":29,"props":536,"children":537},{},[538,540,544,546,551],{"type":20,"value":539},"If you set the ",{"type":14,"tag":138,"props":541,"children":542},{},[543],{"type":20,"value":347},{"type":20,"value":545}," property to ",{"type":14,"tag":138,"props":547,"children":548},{},[549],{"type":20,"value":550},"auto",{"type":20,"value":552},", the loader will fit the container that it is in. Make sure to use the same height and width to keep the correct aspect ratio.",{"type":14,"tag":35,"props":554,"children":555},{},[556,563],{"type":14,"tag":39,"props":557,"children":558},{"v-slot:preview":7},[559],{"type":14,"tag":43,"props":560,"children":562},{"src":561},"/components/ILoader/examples/size-auto",[],{"type":14,"tag":39,"props":564,"children":565},{"v-slot:vue":7},[566],{"type":14,"tag":51,"props":567,"children":570},{"className":568,"code":569,"language":56,"meta":7},[54],"\u003Ctemplate>\n    \u003Cdiv style=\"height: 100px; width: 100px\">\n        \u003CILoader size=\"auto\" />\n    \u003C/div>\n\u003C/template>\n\n",[571],{"type":14,"tag":59,"props":572,"children":573},{},[574],{"type":14,"tag":51,"props":575,"children":576},{"__ignoreMap":7},[577,592,626,659,675],{"type":14,"tag":66,"props":578,"children":579},{"class":68,"line":69},[580,584,588],{"type":14,"tag":66,"props":581,"children":582},{"class":73},[583],{"type":20,"value":76},{"type":14,"tag":66,"props":585,"children":586},{"class":79},[587],{"type":20,"value":39},{"type":14,"tag":66,"props":589,"children":590},{"class":73},[591],{"type":20,"value":86},{"type":14,"tag":66,"props":593,"children":594},{"class":68,"line":89},[595,599,604,608,613,617,622],{"type":14,"tag":66,"props":596,"children":597},{"class":73},[598],{"type":20,"value":95},{"type":14,"tag":66,"props":600,"children":601},{"class":79},[602],{"type":20,"value":603},"div",{"type":14,"tag":66,"props":605,"children":606},{"class":73},[607],{"type":20,"value":213},{"type":14,"tag":66,"props":609,"children":610},{"class":216},[611],{"type":20,"value":612},"style",{"type":14,"tag":66,"props":614,"children":615},{"class":73},[616],{"type":20,"value":223},{"type":14,"tag":66,"props":618,"children":619},{"class":226},[620],{"type":20,"value":621},"\"height: 100px; width: 100px\"",{"type":14,"tag":66,"props":623,"children":624},{"class":73},[625],{"type":20,"value":86},{"type":14,"tag":66,"props":627,"children":628},{"class":68,"line":109},[629,634,638,642,646,650,655],{"type":14,"tag":66,"props":630,"children":631},{"class":73},[632],{"type":20,"value":633},"        \u003C",{"type":14,"tag":66,"props":635,"children":636},{"class":98},[637],{"type":20,"value":101},{"type":14,"tag":66,"props":639,"children":640},{"class":73},[641],{"type":20,"value":213},{"type":14,"tag":66,"props":643,"children":644},{"class":216},[645],{"type":20,"value":347},{"type":14,"tag":66,"props":647,"children":648},{"class":73},[649],{"type":20,"value":223},{"type":14,"tag":66,"props":651,"children":652},{"class":226},[653],{"type":20,"value":654},"\"auto\"",{"type":14,"tag":66,"props":656,"children":657},{"class":73},[658],{"type":20,"value":106},{"type":14,"tag":66,"props":660,"children":661},{"class":68,"line":244},[662,667,671],{"type":14,"tag":66,"props":663,"children":664},{"class":73},[665],{"type":20,"value":666},"    \u003C/",{"type":14,"tag":66,"props":668,"children":669},{"class":79},[670],{"type":20,"value":603},{"type":14,"tag":66,"props":672,"children":673},{"class":73},[674],{"type":20,"value":86},{"type":14,"tag":66,"props":676,"children":677},{"class":68,"line":277},[678,682,686],{"type":14,"tag":66,"props":679,"children":680},{"class":73},[681],{"type":20,"value":115},{"type":14,"tag":66,"props":683,"children":684},{"class":79},[685],{"type":20,"value":39},{"type":14,"tag":66,"props":687,"children":688},{"class":73},[689],{"type":20,"value":124},{"type":14,"tag":126,"props":691,"children":693},{"id":692},"text-example",[694],{"type":20,"value":695},"Text Example",{"type":14,"tag":29,"props":697,"children":698},{},[699,701,706],{"type":20,"value":700},"You're able to provide some additional text by using the ",{"type":14,"tag":138,"props":702,"children":703},{},[704],{"type":20,"value":705},"default",{"type":20,"value":707}," loader slot.",{"type":14,"tag":35,"props":709,"children":710},{},[711,718],{"type":14,"tag":39,"props":712,"children":713},{"v-slot:preview":7},[714],{"type":14,"tag":43,"props":715,"children":717},{"src":716},"/components/ILoader/examples/text",[],{"type":14,"tag":39,"props":719,"children":720},{"v-slot:vue":7},[721],{"type":14,"tag":51,"props":722,"children":725},{"className":723,"code":724,"language":56,"meta":7},[54],"\u003Ctemplate>\n    \u003CILoader> 99% \u003C/ILoader>\n\u003C/template>\n\n",[726],{"type":14,"tag":59,"props":727,"children":728},{},[729],{"type":14,"tag":51,"props":730,"children":731},{"__ignoreMap":7},[732,747,771],{"type":14,"tag":66,"props":733,"children":734},{"class":68,"line":69},[735,739,743],{"type":14,"tag":66,"props":736,"children":737},{"class":73},[738],{"type":20,"value":76},{"type":14,"tag":66,"props":740,"children":741},{"class":79},[742],{"type":20,"value":39},{"type":14,"tag":66,"props":744,"children":745},{"class":73},[746],{"type":20,"value":86},{"type":14,"tag":66,"props":748,"children":749},{"class":68,"line":89},[750,754,758,763,767],{"type":14,"tag":66,"props":751,"children":752},{"class":73},[753],{"type":20,"value":95},{"type":14,"tag":66,"props":755,"children":756},{"class":98},[757],{"type":20,"value":101},{"type":14,"tag":66,"props":759,"children":760},{"class":73},[761],{"type":20,"value":762},"> 99% \u003C/",{"type":14,"tag":66,"props":764,"children":765},{"class":98},[766],{"type":20,"value":101},{"type":14,"tag":66,"props":768,"children":769},{"class":73},[770],{"type":20,"value":86},{"type":14,"tag":66,"props":772,"children":773},{"class":68,"line":109},[774,778,782],{"type":14,"tag":66,"props":775,"children":776},{"class":73},[777],{"type":20,"value":115},{"type":14,"tag":66,"props":779,"children":780},{"class":79},[781],{"type":20,"value":39},{"type":14,"tag":66,"props":783,"children":784},{"class":73},[785],{"type":20,"value":124},{"type":14,"tag":126,"props":787,"children":789},{"id":788},"props",[790],{"type":20,"value":791},"Props",{"type":14,"tag":793,"props":794,"children":795},"content-component-props",{"component":101},[],{"type":14,"tag":126,"props":797,"children":799},{"id":798},"slots",[800],{"type":20,"value":801},"Slots",{"type":14,"tag":803,"props":804,"children":805},"content-component-slots",{"component":101},[],{"type":14,"tag":126,"props":807,"children":809},{"id":808},"design-tokens",[810],{"type":20,"value":811},"Design Tokens",{"type":14,"tag":813,"props":814,"children":815},"content-component-design-tokens",{"component":101},[],{"type":14,"tag":612,"children":817},[818],{"type":20,"value":819},".ct-553616{color:#24292E;}\n.dark-theme .ct-553616{color:#E1E4E8;}\n.ct-914029{color:#22863A;}\n.dark-theme .ct-914029{color:#85E89D;}\n.ct-028869{color:#B31D28;font-style:italic;}\n.dark-theme .ct-028869{color:#FDAEB7;font-style:italic;}\n.ct-762058{color:#6F42C1;}\n.dark-theme .ct-762058{color:#B392F0;}\n.ct-952708{color:#032F62;}\n.dark-theme .ct-952708{color:#9ECBFF;}",{"title":7,"searchDepth":89,"depth":89,"links":821},[822],{"id":25,"depth":89,"text":9,"children":823},[824,825,826,827,828,829],{"id":128,"depth":109,"text":131},{"id":334,"depth":109,"text":337},{"id":692,"depth":109,"text":695},{"id":788,"depth":109,"text":791},{"id":798,"depth":109,"text":801},{"id":808,"depth":109,"text":811},"markdown","content:docs:components:loader.md","content","docs/components/loader.md",1794582258734]