[{"data":1,"prerenderedAt":1568},["ShallowReactive",2],{"guide-svg-placeholder-skeleton-screens":3},{"id":4,"title":5,"body":6,"date":1560,"description":1561,"extension":1562,"meta":1563,"navigation":294,"path":1564,"readingTime":216,"seo":1565,"stem":1566,"__hash__":1567},"guides\u002Fguides\u002Fsvg-placeholder-skeleton-screens.md","SVG Placeholders and Skeleton Screens",{"type":7,"value":8,"toc":1553},"minimark",[9,13,18,109,112,116,119,612,627,631,634,910,913,1165,1168,1172,1179,1231,1238,1241,1245,1248,1380,1538,1541,1549],[10,11,12],"p",{},"A blank screen while data loads feels slow. A skeleton screen — the gray placeholder shapes that mimic the layout of incoming content — makes the same wait feel faster because users see immediate visual progress. SVG is the ideal format for these placeholders: it is resolution-independent, tiny in file size, and animatable with pure CSS. This guide covers building effective skeleton screens with SVG components.",[14,15,17],"h2",{"id":16},"why-svg-beats-other-placeholder-formats","Why SVG Beats Other Placeholder Formats",[19,20,21,43],"table",{},[22,23,24],"thead",{},[25,26,27,31,34,37,40],"tr",{},[28,29,30],"th",{},"Format",[28,32,33],{},"File Size (typical card)",[28,35,36],{},"Resolution Independence",[28,38,39],{},"Animatable",[28,41,42],{},"Accessibility",[44,45,46,63,77,94],"tbody",{},[25,47,48,52,55,58,60],{},[49,50,51],"td",{},"PNG",[49,53,54],{},"5–20 KB",[49,56,57],{},"No",[49,59,57],{},[49,61,62],{},"Decorative alt",[25,64,65,68,71,73,75],{},[49,66,67],{},"Base64 CSS",[49,69,70],{},"2–8 KB",[49,72,57],{},[49,74,57],{},[49,76,62],{},[25,78,79,82,85,88,91],{},[49,80,81],{},"CSS gradients",[49,83,84],{},"~200 B",[49,86,87],{},"Yes",[49,89,90],{},"Limited",[49,92,93],{},"Decorative",[25,95,96,99,102,104,106],{},[49,97,98],{},"SVG inline",[49,100,101],{},"~300 B",[49,103,87],{},[49,105,87],{},[49,107,108],{},"Full ARIA",[10,110,111],{},"SVG wins because it combines the visual precision of a real image layout with the file size of a few CSS properties. A card skeleton with avatar, title, and description lines is roughly 300 bytes as inline SVG versus several kilobytes for any raster approach.",[14,113,115],{"id":114},"building-a-card-skeleton","Building a Card Skeleton",[10,117,118],{},"Here is a complete skeleton screen for a content card with an avatar, heading, and two lines of body text:",[120,121,126],"pre",{"className":122,"code":123,"language":124,"meta":125,"style":125},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv class=\"skeleton-card\" role=\"status\" aria-label=\"Loading content\">\n  \u003Csvg\n    viewBox=\"0 0 400 200\"\n    xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"\n    aria-hidden=\"true\"\n    class=\"skeleton-svg\"\n  >\n    \u003C!-- Avatar circle -->\n    \u003Ccircle cx=\"40\" cy=\"40\" r=\"24\" fill=\"#e0e0e0\" rx=\"4\" \u002F>\n\n    \u003C!-- Title line -->\n    \u003Crect x=\"76\" y=\"24\" width=\"200\" height=\"14\" rx=\"4\" fill=\"#e0e0e0\" \u002F>\n\n    \u003C!-- Subtitle line -->\n    \u003Crect x=\"76\" y=\"46\" width=\"140\" height=\"10\" rx=\"3\" fill=\"#e0e0e0\" \u002F>\n\n    \u003C!-- Body line 1 -->\n    \u003Crect x=\"16\" y=\"88\" width=\"368\" height=\"10\" rx=\"3\" fill=\"#e0e0e0\" \u002F>\n\n    \u003C!-- Body line 2 -->\n    \u003Crect x=\"16\" y=\"108\" width=\"280\" height=\"10\" rx=\"3\" fill=\"#e0e0e0\" \u002F>\n\n    \u003C!-- Image placeholder -->\n    \u003Crect x=\"16\" y=\"136\" width=\"368\" height=\"48\" rx=\"6\" fill=\"#e0e0e0\" \u002F>\n  \u003C\u002Fsvg>\n\u003C\u002Fdiv>\n","html","",[127,128,129,172,181,192,203,214,225,231,238,289,296,302,355,360,366,415,420,426,474,479,485,532,537,543,591,602],"code",{"__ignoreMap":125},[130,131,134,138,142,146,149,153,156,158,161,164,166,169],"span",{"class":132,"line":133},"line",1,[130,135,137],{"class":136},"sVt8B","\u003C",[130,139,141],{"class":140},"s9eBZ","div",[130,143,145],{"class":144},"sScJk"," class",[130,147,148],{"class":136},"=",[130,150,152],{"class":151},"sZZnC","\"skeleton-card\"",[130,154,155],{"class":144}," role",[130,157,148],{"class":136},[130,159,160],{"class":151},"\"status\"",[130,162,163],{"class":144}," aria-label",[130,165,148],{"class":136},[130,167,168],{"class":151},"\"Loading content\"",[130,170,171],{"class":136},">\n",[130,173,175,178],{"class":132,"line":174},2,[130,176,177],{"class":136},"  \u003C",[130,179,180],{"class":140},"svg\n",[130,182,184,187,189],{"class":132,"line":183},3,[130,185,186],{"class":144},"    viewBox",[130,188,148],{"class":136},[130,190,191],{"class":151},"\"0 0 400 200\"\n",[130,193,195,198,200],{"class":132,"line":194},4,[130,196,197],{"class":144},"    xmlns",[130,199,148],{"class":136},[130,201,202],{"class":151},"\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"\n",[130,204,206,209,211],{"class":132,"line":205},5,[130,207,208],{"class":144},"    aria-hidden",[130,210,148],{"class":136},[130,212,213],{"class":151},"\"true\"\n",[130,215,217,220,222],{"class":132,"line":216},6,[130,218,219],{"class":144},"    class",[130,221,148],{"class":136},[130,223,224],{"class":151},"\"skeleton-svg\"\n",[130,226,228],{"class":132,"line":227},7,[130,229,230],{"class":136},"  >\n",[130,232,234],{"class":132,"line":233},8,[130,235,237],{"class":236},"sJ8bj","    \u003C!-- Avatar circle -->\n",[130,239,241,244,247,250,252,255,258,260,262,265,267,270,273,275,278,281,283,286],{"class":132,"line":240},9,[130,242,243],{"class":136},"    \u003C",[130,245,246],{"class":140},"circle",[130,248,249],{"class":144}," cx",[130,251,148],{"class":136},[130,253,254],{"class":151},"\"40\"",[130,256,257],{"class":144}," cy",[130,259,148],{"class":136},[130,261,254],{"class":151},[130,263,264],{"class":144}," r",[130,266,148],{"class":136},[130,268,269],{"class":151},"\"24\"",[130,271,272],{"class":144}," fill",[130,274,148],{"class":136},[130,276,277],{"class":151},"\"#e0e0e0\"",[130,279,280],{"class":144}," rx",[130,282,148],{"class":136},[130,284,285],{"class":151},"\"4\"",[130,287,288],{"class":136}," \u002F>\n",[130,290,292],{"class":132,"line":291},10,[130,293,295],{"emptyLinePlaceholder":294},true,"\n",[130,297,299],{"class":132,"line":298},11,[130,300,301],{"class":236},"    \u003C!-- Title line -->\n",[130,303,305,307,310,313,315,318,321,323,325,328,330,333,336,338,341,343,345,347,349,351,353],{"class":132,"line":304},12,[130,306,243],{"class":136},[130,308,309],{"class":140},"rect",[130,311,312],{"class":144}," x",[130,314,148],{"class":136},[130,316,317],{"class":151},"\"76\"",[130,319,320],{"class":144}," y",[130,322,148],{"class":136},[130,324,269],{"class":151},[130,326,327],{"class":144}," width",[130,329,148],{"class":136},[130,331,332],{"class":151},"\"200\"",[130,334,335],{"class":144}," height",[130,337,148],{"class":136},[130,339,340],{"class":151},"\"14\"",[130,342,280],{"class":144},[130,344,148],{"class":136},[130,346,285],{"class":151},[130,348,272],{"class":144},[130,350,148],{"class":136},[130,352,277],{"class":151},[130,354,288],{"class":136},[130,356,358],{"class":132,"line":357},13,[130,359,295],{"emptyLinePlaceholder":294},[130,361,363],{"class":132,"line":362},14,[130,364,365],{"class":236},"    \u003C!-- Subtitle line -->\n",[130,367,369,371,373,375,377,379,381,383,386,388,390,393,395,397,400,402,404,407,409,411,413],{"class":132,"line":368},15,[130,370,243],{"class":136},[130,372,309],{"class":140},[130,374,312],{"class":144},[130,376,148],{"class":136},[130,378,317],{"class":151},[130,380,320],{"class":144},[130,382,148],{"class":136},[130,384,385],{"class":151},"\"46\"",[130,387,327],{"class":144},[130,389,148],{"class":136},[130,391,392],{"class":151},"\"140\"",[130,394,335],{"class":144},[130,396,148],{"class":136},[130,398,399],{"class":151},"\"10\"",[130,401,280],{"class":144},[130,403,148],{"class":136},[130,405,406],{"class":151},"\"3\"",[130,408,272],{"class":144},[130,410,148],{"class":136},[130,412,277],{"class":151},[130,414,288],{"class":136},[130,416,418],{"class":132,"line":417},16,[130,419,295],{"emptyLinePlaceholder":294},[130,421,423],{"class":132,"line":422},17,[130,424,425],{"class":236},"    \u003C!-- Body line 1 -->\n",[130,427,429,431,433,435,437,440,442,444,447,449,451,454,456,458,460,462,464,466,468,470,472],{"class":132,"line":428},18,[130,430,243],{"class":136},[130,432,309],{"class":140},[130,434,312],{"class":144},[130,436,148],{"class":136},[130,438,439],{"class":151},"\"16\"",[130,441,320],{"class":144},[130,443,148],{"class":136},[130,445,446],{"class":151},"\"88\"",[130,448,327],{"class":144},[130,450,148],{"class":136},[130,452,453],{"class":151},"\"368\"",[130,455,335],{"class":144},[130,457,148],{"class":136},[130,459,399],{"class":151},[130,461,280],{"class":144},[130,463,148],{"class":136},[130,465,406],{"class":151},[130,467,272],{"class":144},[130,469,148],{"class":136},[130,471,277],{"class":151},[130,473,288],{"class":136},[130,475,477],{"class":132,"line":476},19,[130,478,295],{"emptyLinePlaceholder":294},[130,480,482],{"class":132,"line":481},20,[130,483,484],{"class":236},"    \u003C!-- Body line 2 -->\n",[130,486,488,490,492,494,496,498,500,502,505,507,509,512,514,516,518,520,522,524,526,528,530],{"class":132,"line":487},21,[130,489,243],{"class":136},[130,491,309],{"class":140},[130,493,312],{"class":144},[130,495,148],{"class":136},[130,497,439],{"class":151},[130,499,320],{"class":144},[130,501,148],{"class":136},[130,503,504],{"class":151},"\"108\"",[130,506,327],{"class":144},[130,508,148],{"class":136},[130,510,511],{"class":151},"\"280\"",[130,513,335],{"class":144},[130,515,148],{"class":136},[130,517,399],{"class":151},[130,519,280],{"class":144},[130,521,148],{"class":136},[130,523,406],{"class":151},[130,525,272],{"class":144},[130,527,148],{"class":136},[130,529,277],{"class":151},[130,531,288],{"class":136},[130,533,535],{"class":132,"line":534},22,[130,536,295],{"emptyLinePlaceholder":294},[130,538,540],{"class":132,"line":539},23,[130,541,542],{"class":236},"    \u003C!-- Image placeholder -->\n",[130,544,546,548,550,552,554,556,558,560,563,565,567,569,571,573,576,578,580,583,585,587,589],{"class":132,"line":545},24,[130,547,243],{"class":136},[130,549,309],{"class":140},[130,551,312],{"class":144},[130,553,148],{"class":136},[130,555,439],{"class":151},[130,557,320],{"class":144},[130,559,148],{"class":136},[130,561,562],{"class":151},"\"136\"",[130,564,327],{"class":144},[130,566,148],{"class":136},[130,568,453],{"class":151},[130,570,335],{"class":144},[130,572,148],{"class":136},[130,574,575],{"class":151},"\"48\"",[130,577,280],{"class":144},[130,579,148],{"class":136},[130,581,582],{"class":151},"\"6\"",[130,584,272],{"class":144},[130,586,148],{"class":136},[130,588,277],{"class":151},[130,590,288],{"class":136},[130,592,594,597,600],{"class":132,"line":593},25,[130,595,596],{"class":136},"  \u003C\u002F",[130,598,599],{"class":140},"svg",[130,601,171],{"class":136},[130,603,605,608,610],{"class":132,"line":604},26,[130,606,607],{"class":136},"\u003C\u002F",[130,609,141],{"class":140},[130,611,171],{"class":136},[10,613,614,615,618,619,622,623,626],{},"Notice the ",[127,616,617],{},"role=\"status\""," and ",[127,620,621],{},"aria-label"," on the wrapper. Screen readers announce \"Loading content\" instead of ignoring the skeleton entirely. The SVG itself uses ",[127,624,625],{},"aria-hidden=\"true\""," because its visual elements are decorative — the meaningful information is in the wrapper's ARIA attributes.",[14,628,630],{"id":629},"adding-the-shimmer-animation","Adding the Shimmer Animation",[10,632,633],{},"The pulsing shimmer effect — the signature visual of skeleton screens — is a simple CSS gradient animation applied to the SVG shapes:",[120,635,639],{"className":636,"code":637,"language":638,"meta":125,"style":125},"language-css shiki shiki-themes github-light github-dark",".skeleton-card {\n  --shimmer-color: #e0e0e0;\n  --shimmer-highlight: #f5f5f5;\n  --shimmer-speed: 1.5s;\n}\n\n.skeleton-svg rect,\n.skeleton-svg circle {\n  animation: shimmer var(--shimmer-speed) ease-in-out infinite;\n}\n\n@keyframes shimmer {\n  0% { fill: var(--shimmer-color); }\n  50% { fill: var(--shimmer-highlight); }\n  80% { fill: var(--shimmer-color); }\n  100% { fill: var(--shimmer-color); }\n}\n\n\u002F* Dark mode support *\u002F\n@media (prefers-color-scheme: dark) {\n  .skeleton-card {\n    --shimmer-color: #333333;\n    --shimmer-highlight: #555555;\n  }\n}\n","css",[127,640,641,649,665,677,693,698,702,713,722,750,754,758,768,791,811,830,849,853,857,862,870,877,889,901,906],{"__ignoreMap":125},[130,642,643,646],{"class":132,"line":133},[130,644,645],{"class":144},".skeleton-card",[130,647,648],{"class":136}," {\n",[130,650,651,655,658,662],{"class":132,"line":174},[130,652,654],{"class":653},"s4XuR","  --shimmer-color",[130,656,657],{"class":136},": ",[130,659,661],{"class":660},"sj4cs","#e0e0e0",[130,663,664],{"class":136},";\n",[130,666,667,670,672,675],{"class":132,"line":183},[130,668,669],{"class":653},"  --shimmer-highlight",[130,671,657],{"class":136},[130,673,674],{"class":660},"#f5f5f5",[130,676,664],{"class":136},[130,678,679,682,684,687,691],{"class":132,"line":194},[130,680,681],{"class":653},"  --shimmer-speed",[130,683,657],{"class":136},[130,685,686],{"class":660},"1.5",[130,688,690],{"class":689},"szBVR","s",[130,692,664],{"class":136},[130,694,695],{"class":132,"line":205},[130,696,697],{"class":136},"}\n",[130,699,700],{"class":132,"line":216},[130,701,295],{"emptyLinePlaceholder":294},[130,703,704,707,710],{"class":132,"line":227},[130,705,706],{"class":144},".skeleton-svg",[130,708,709],{"class":140}," rect",[130,711,712],{"class":136},",\n",[130,714,715,717,720],{"class":132,"line":233},[130,716,706],{"class":144},[130,718,719],{"class":140}," circle",[130,721,648],{"class":136},[130,723,724,727,730,733,736,739,742,745,748],{"class":132,"line":240},[130,725,726],{"class":660},"  animation",[130,728,729],{"class":136},": shimmer ",[130,731,732],{"class":660},"var",[130,734,735],{"class":136},"(",[130,737,738],{"class":653},"--shimmer-speed",[130,740,741],{"class":136},") ",[130,743,744],{"class":660},"ease-in-out",[130,746,747],{"class":660}," infinite",[130,749,664],{"class":136},[130,751,752],{"class":132,"line":291},[130,753,697],{"class":136},[130,755,756],{"class":132,"line":298},[130,757,295],{"emptyLinePlaceholder":294},[130,759,760,763,766],{"class":132,"line":304},[130,761,762],{"class":689},"@keyframes",[130,764,765],{"class":653}," shimmer",[130,767,648],{"class":136},[130,769,770,773,776,779,781,783,785,788],{"class":132,"line":357},[130,771,772],{"class":144},"  0%",[130,774,775],{"class":136}," { ",[130,777,778],{"class":660},"fill",[130,780,657],{"class":136},[130,782,732],{"class":660},[130,784,735],{"class":136},[130,786,787],{"class":653},"--shimmer-color",[130,789,790],{"class":136},"); }\n",[130,792,793,796,798,800,802,804,806,809],{"class":132,"line":362},[130,794,795],{"class":144},"  50%",[130,797,775],{"class":136},[130,799,778],{"class":660},[130,801,657],{"class":136},[130,803,732],{"class":660},[130,805,735],{"class":136},[130,807,808],{"class":653},"--shimmer-highlight",[130,810,790],{"class":136},[130,812,813,816,818,820,822,824,826,828],{"class":132,"line":368},[130,814,815],{"class":144},"  80%",[130,817,775],{"class":136},[130,819,778],{"class":660},[130,821,657],{"class":136},[130,823,732],{"class":660},[130,825,735],{"class":136},[130,827,787],{"class":653},[130,829,790],{"class":136},[130,831,832,835,837,839,841,843,845,847],{"class":132,"line":417},[130,833,834],{"class":144},"  100%",[130,836,775],{"class":136},[130,838,778],{"class":660},[130,840,657],{"class":136},[130,842,732],{"class":660},[130,844,735],{"class":136},[130,846,787],{"class":653},[130,848,790],{"class":136},[130,850,851],{"class":132,"line":422},[130,852,697],{"class":136},[130,854,855],{"class":132,"line":428},[130,856,295],{"emptyLinePlaceholder":294},[130,858,859],{"class":132,"line":476},[130,860,861],{"class":236},"\u002F* Dark mode support *\u002F\n",[130,863,864,867],{"class":132,"line":481},[130,865,866],{"class":689},"@media",[130,868,869],{"class":136}," (prefers-color-scheme: dark) {\n",[130,871,872,875],{"class":132,"line":487},[130,873,874],{"class":144},"  .skeleton-card",[130,876,648],{"class":136},[130,878,879,882,884,887],{"class":132,"line":534},[130,880,881],{"class":653},"    --shimmer-color",[130,883,657],{"class":136},[130,885,886],{"class":660},"#333333",[130,888,664],{"class":136},[130,890,891,894,896,899],{"class":132,"line":539},[130,892,893],{"class":653},"    --shimmer-highlight",[130,895,657],{"class":136},[130,897,898],{"class":660},"#555555",[130,900,664],{"class":136},[130,902,903],{"class":132,"line":545},[130,904,905],{"class":136},"  }\n",[130,907,908],{"class":132,"line":593},[130,909,697],{"class":136},[10,911,912],{},"An alternative shimmer technique uses a moving gradient overlay instead of animating the fill directly. This creates a more polished sweeping highlight effect:",[120,914,916],{"className":636,"code":915,"language":638,"meta":125,"style":125},".skeleton-card {\n  position: relative;\n  overflow: hidden;\n}\n\n.skeleton-card::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.3) 50%,\n    transparent 100%\n  );\n  animation: sweep 1.5s ease-in-out infinite;\n}\n\n@keyframes sweep {\n  0% { transform: translateX(-100%); }\n  100% { transform: translateX(100%); }\n}\n",[127,917,918,924,936,948,952,956,963,975,986,998,1011,1021,1034,1067,1077,1082,1100,1104,1108,1117,1140,1161],{"__ignoreMap":125},[130,919,920,922],{"class":132,"line":133},[130,921,645],{"class":144},[130,923,648],{"class":136},[130,925,926,929,931,934],{"class":132,"line":174},[130,927,928],{"class":660},"  position",[130,930,657],{"class":136},[130,932,933],{"class":660},"relative",[130,935,664],{"class":136},[130,937,938,941,943,946],{"class":132,"line":183},[130,939,940],{"class":660},"  overflow",[130,942,657],{"class":136},[130,944,945],{"class":660},"hidden",[130,947,664],{"class":136},[130,949,950],{"class":132,"line":194},[130,951,697],{"class":136},[130,953,954],{"class":132,"line":205},[130,955,295],{"emptyLinePlaceholder":294},[130,957,958,961],{"class":132,"line":216},[130,959,960],{"class":144},".skeleton-card::after",[130,962,648],{"class":136},[130,964,965,968,970,973],{"class":132,"line":227},[130,966,967],{"class":660},"  content",[130,969,657],{"class":136},[130,971,972],{"class":151},"''",[130,974,664],{"class":136},[130,976,977,979,981,984],{"class":132,"line":233},[130,978,928],{"class":660},[130,980,657],{"class":136},[130,982,983],{"class":660},"absolute",[130,985,664],{"class":136},[130,987,988,991,993,996],{"class":132,"line":240},[130,989,990],{"class":660},"  inset",[130,992,657],{"class":136},[130,994,995],{"class":660},"0",[130,997,664],{"class":136},[130,999,1000,1003,1005,1008],{"class":132,"line":291},[130,1001,1002],{"class":660},"  background",[130,1004,657],{"class":136},[130,1006,1007],{"class":660},"linear-gradient",[130,1009,1010],{"class":136},"(\n",[130,1012,1013,1016,1019],{"class":132,"line":298},[130,1014,1015],{"class":660},"    90",[130,1017,1018],{"class":689},"deg",[130,1020,712],{"class":136},[130,1022,1023,1026,1029,1032],{"class":132,"line":304},[130,1024,1025],{"class":660},"    transparent",[130,1027,1028],{"class":660}," 0",[130,1030,1031],{"class":689},"%",[130,1033,712],{"class":136},[130,1035,1036,1039,1041,1044,1047,1049,1051,1053,1055,1058,1060,1063,1065],{"class":132,"line":357},[130,1037,1038],{"class":660},"    rgba",[130,1040,735],{"class":136},[130,1042,1043],{"class":660},"255",[130,1045,1046],{"class":136},", ",[130,1048,1043],{"class":660},[130,1050,1046],{"class":136},[130,1052,1043],{"class":660},[130,1054,1046],{"class":136},[130,1056,1057],{"class":660},"0.3",[130,1059,741],{"class":136},[130,1061,1062],{"class":660},"50",[130,1064,1031],{"class":689},[130,1066,712],{"class":136},[130,1068,1069,1071,1074],{"class":132,"line":362},[130,1070,1025],{"class":660},[130,1072,1073],{"class":660}," 100",[130,1075,1076],{"class":689},"%\n",[130,1078,1079],{"class":132,"line":368},[130,1080,1081],{"class":136},"  );\n",[130,1083,1084,1086,1089,1091,1093,1096,1098],{"class":132,"line":417},[130,1085,726],{"class":660},[130,1087,1088],{"class":136},": sweep ",[130,1090,686],{"class":660},[130,1092,690],{"class":689},[130,1094,1095],{"class":660}," ease-in-out",[130,1097,747],{"class":660},[130,1099,664],{"class":136},[130,1101,1102],{"class":132,"line":422},[130,1103,697],{"class":136},[130,1105,1106],{"class":132,"line":428},[130,1107,295],{"emptyLinePlaceholder":294},[130,1109,1110,1112,1115],{"class":132,"line":476},[130,1111,762],{"class":689},[130,1113,1114],{"class":653}," sweep",[130,1116,648],{"class":136},[130,1118,1119,1121,1123,1126,1128,1131,1133,1136,1138],{"class":132,"line":481},[130,1120,772],{"class":144},[130,1122,775],{"class":136},[130,1124,1125],{"class":660},"transform",[130,1127,657],{"class":136},[130,1129,1130],{"class":660},"translateX",[130,1132,735],{"class":136},[130,1134,1135],{"class":660},"-100",[130,1137,1031],{"class":689},[130,1139,790],{"class":136},[130,1141,1142,1144,1146,1148,1150,1152,1154,1157,1159],{"class":132,"line":487},[130,1143,834],{"class":144},[130,1145,775],{"class":136},[130,1147,1125],{"class":660},[130,1149,657],{"class":136},[130,1151,1130],{"class":660},[130,1153,735],{"class":136},[130,1155,1156],{"class":660},"100",[130,1158,1031],{"class":689},[130,1160,790],{"class":136},[130,1162,1163],{"class":132,"line":534},[130,1164,697],{"class":136},[10,1166,1167],{},"The sweep approach avoids repaints on individual SVG elements — the browser composites a single pseudo-element layer, which is GPU-accelerated and smoother.",[14,1169,1171],{"id":1170},"responsive-skeleton-layouts","Responsive Skeleton Layouts",[10,1173,1174,1175,1178],{},"SVG skeletons need to scale with the container. Use ",[127,1176,1177],{},"viewBox"," with percentage-based dimensions:",[120,1180,1182],{"className":636,"code":1181,"language":638,"meta":125,"style":125},".skeleton-svg {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n",[127,1183,1184,1190,1203,1215,1227],{"__ignoreMap":125},[130,1185,1186,1188],{"class":132,"line":133},[130,1187,706],{"class":144},[130,1189,648],{"class":136},[130,1191,1192,1195,1197,1199,1201],{"class":132,"line":174},[130,1193,1194],{"class":660},"  width",[130,1196,657],{"class":136},[130,1198,1156],{"class":660},[130,1200,1031],{"class":689},[130,1202,664],{"class":136},[130,1204,1205,1208,1210,1213],{"class":132,"line":183},[130,1206,1207],{"class":660},"  height",[130,1209,657],{"class":136},[130,1211,1212],{"class":660},"auto",[130,1214,664],{"class":136},[130,1216,1217,1220,1222,1225],{"class":132,"line":194},[130,1218,1219],{"class":660},"  display",[130,1221,657],{"class":136},[130,1223,1224],{"class":660},"block",[130,1226,664],{"class":136},[130,1228,1229],{"class":132,"line":205},[130,1230,697],{"class":136},[10,1232,1233,1234,1237],{},"The ",[127,1235,1236],{},"viewBox=\"0 0 400 200\""," definition ensures the shapes maintain their relative positions regardless of the container width. This works with Flexbox and CSS Grid layouts where the card width is fluid.",[10,1239,1240],{},"For layouts with varying numbers of skeleton cards (e.g., a grid that shows 1 column on mobile, 3 on desktop), generate the appropriate number of skeleton elements and let CSS grid handle the placement — same as you would with real content cards.",[14,1242,1244],{"id":1243},"transitioning-from-skeleton-to-content","Transitioning from Skeleton to Content",[10,1246,1247],{},"The moment data arrives, swap the skeleton for real content with a fade transition to avoid a jarring flash:",[120,1249,1251],{"className":636,"code":1250,"language":638,"meta":125,"style":125},".content-card {\n  opacity: 1;\n  transition: opacity 0.3s ease;\n}\n\n.content-card.loading {\n  opacity: 0;\n  position: absolute;\n  pointer-events: none;\n}\n\n.skeleton-card.hidden {\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n",[127,1252,1253,1260,1272,1289,1293,1297,1304,1314,1324,1336,1340,1344,1351,1361,1376],{"__ignoreMap":125},[130,1254,1255,1258],{"class":132,"line":133},[130,1256,1257],{"class":144},".content-card",[130,1259,648],{"class":136},[130,1261,1262,1265,1267,1270],{"class":132,"line":174},[130,1263,1264],{"class":660},"  opacity",[130,1266,657],{"class":136},[130,1268,1269],{"class":660},"1",[130,1271,664],{"class":136},[130,1273,1274,1277,1280,1282,1284,1287],{"class":132,"line":183},[130,1275,1276],{"class":660},"  transition",[130,1278,1279],{"class":136},": opacity ",[130,1281,1057],{"class":660},[130,1283,690],{"class":689},[130,1285,1286],{"class":660}," ease",[130,1288,664],{"class":136},[130,1290,1291],{"class":132,"line":194},[130,1292,697],{"class":136},[130,1294,1295],{"class":132,"line":205},[130,1296,295],{"emptyLinePlaceholder":294},[130,1298,1299,1302],{"class":132,"line":216},[130,1300,1301],{"class":144},".content-card.loading",[130,1303,648],{"class":136},[130,1305,1306,1308,1310,1312],{"class":132,"line":227},[130,1307,1264],{"class":660},[130,1309,657],{"class":136},[130,1311,995],{"class":660},[130,1313,664],{"class":136},[130,1315,1316,1318,1320,1322],{"class":132,"line":233},[130,1317,928],{"class":660},[130,1319,657],{"class":136},[130,1321,983],{"class":660},[130,1323,664],{"class":136},[130,1325,1326,1329,1331,1334],{"class":132,"line":240},[130,1327,1328],{"class":660},"  pointer-events",[130,1330,657],{"class":136},[130,1332,1333],{"class":660},"none",[130,1335,664],{"class":136},[130,1337,1338],{"class":132,"line":291},[130,1339,697],{"class":136},[130,1341,1342],{"class":132,"line":298},[130,1343,295],{"emptyLinePlaceholder":294},[130,1345,1346,1349],{"class":132,"line":304},[130,1347,1348],{"class":144},".skeleton-card.hidden",[130,1350,648],{"class":136},[130,1352,1353,1355,1357,1359],{"class":132,"line":357},[130,1354,1264],{"class":660},[130,1356,657],{"class":136},[130,1358,995],{"class":660},[130,1360,664],{"class":136},[130,1362,1363,1365,1367,1370,1372,1374],{"class":132,"line":362},[130,1364,1276],{"class":660},[130,1366,1279],{"class":136},[130,1368,1369],{"class":660},"0.2",[130,1371,690],{"class":689},[130,1373,1286],{"class":660},[130,1375,664],{"class":136},[130,1377,1378],{"class":132,"line":368},[130,1379,697],{"class":136},[120,1381,1385],{"className":1382,"code":1383,"language":1384,"meta":125,"style":125},"language-javascript shiki shiki-themes github-light github-dark","function showContent(cardElement, contentHtml) {\n  const skeleton = cardElement.querySelector('.skeleton-card')\n  const content = cardElement.querySelector('.content-card')\n\n  content.innerHTML = contentHtml\n  skeleton.classList.add('hidden')\n\n  setTimeout(() => {\n    skeleton.remove()\n    content.classList.remove('loading')\n  }, 200)\n}\n","javascript",[127,1386,1387,1408,1433,1453,1457,1467,1482,1486,1499,1510,1524,1534],{"__ignoreMap":125},[130,1388,1389,1392,1395,1397,1400,1402,1405],{"class":132,"line":133},[130,1390,1391],{"class":689},"function",[130,1393,1394],{"class":144}," showContent",[130,1396,735],{"class":136},[130,1398,1399],{"class":653},"cardElement",[130,1401,1046],{"class":136},[130,1403,1404],{"class":653},"contentHtml",[130,1406,1407],{"class":136},") {\n",[130,1409,1410,1413,1416,1419,1422,1425,1427,1430],{"class":132,"line":174},[130,1411,1412],{"class":689},"  const",[130,1414,1415],{"class":660}," skeleton",[130,1417,1418],{"class":689}," =",[130,1420,1421],{"class":136}," cardElement.",[130,1423,1424],{"class":144},"querySelector",[130,1426,735],{"class":136},[130,1428,1429],{"class":151},"'.skeleton-card'",[130,1431,1432],{"class":136},")\n",[130,1434,1435,1437,1440,1442,1444,1446,1448,1451],{"class":132,"line":183},[130,1436,1412],{"class":689},[130,1438,1439],{"class":660}," content",[130,1441,1418],{"class":689},[130,1443,1421],{"class":136},[130,1445,1424],{"class":144},[130,1447,735],{"class":136},[130,1449,1450],{"class":151},"'.content-card'",[130,1452,1432],{"class":136},[130,1454,1455],{"class":132,"line":194},[130,1456,295],{"emptyLinePlaceholder":294},[130,1458,1459,1462,1464],{"class":132,"line":205},[130,1460,1461],{"class":136},"  content.innerHTML ",[130,1463,148],{"class":689},[130,1465,1466],{"class":136}," contentHtml\n",[130,1468,1469,1472,1475,1477,1480],{"class":132,"line":216},[130,1470,1471],{"class":136},"  skeleton.classList.",[130,1473,1474],{"class":144},"add",[130,1476,735],{"class":136},[130,1478,1479],{"class":151},"'hidden'",[130,1481,1432],{"class":136},[130,1483,1484],{"class":132,"line":227},[130,1485,295],{"emptyLinePlaceholder":294},[130,1487,1488,1491,1494,1497],{"class":132,"line":233},[130,1489,1490],{"class":144},"  setTimeout",[130,1492,1493],{"class":136},"(() ",[130,1495,1496],{"class":689},"=>",[130,1498,648],{"class":136},[130,1500,1501,1504,1507],{"class":132,"line":240},[130,1502,1503],{"class":136},"    skeleton.",[130,1505,1506],{"class":144},"remove",[130,1508,1509],{"class":136},"()\n",[130,1511,1512,1515,1517,1519,1522],{"class":132,"line":291},[130,1513,1514],{"class":136},"    content.classList.",[130,1516,1506],{"class":144},[130,1518,735],{"class":136},[130,1520,1521],{"class":151},"'loading'",[130,1523,1432],{"class":136},[130,1525,1526,1529,1532],{"class":132,"line":298},[130,1527,1528],{"class":136},"  }, ",[130,1530,1531],{"class":660},"200",[130,1533,1432],{"class":136},[130,1535,1536],{"class":132,"line":304},[130,1537,697],{"class":136},[10,1539,1540],{},"The skeleton fades out over 200ms while the content fades in over 300ms. Removing the skeleton DOM element after the transition prevents it from consuming memory on long-scrolling pages.",[10,1542,1543,1544,1548],{},"Generate SVG placeholder images for your skeleton components at ",[1545,1546,1547],"a",{"href":1547},"\u002Ftools\u002Fplaceholder-image",", which produces resolution-independent SVG output with customizable dimensions and colors.",[1550,1551,1552],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}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 pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":125,"searchDepth":174,"depth":174,"links":1554},[1555,1556,1557,1558,1559],{"id":16,"depth":174,"text":17},{"id":114,"depth":174,"text":115},{"id":629,"depth":174,"text":630},{"id":1170,"depth":174,"text":1171},{"id":1243,"depth":174,"text":1244},"2026-05-28","Build loading skeleton screens with lightweight SVG placeholders for better perceived performance.","md",{},"\u002Fguides\u002Fsvg-placeholder-skeleton-screens",{"title":5,"description":1561},"guides\u002Fsvg-placeholder-skeleton-screens","kibMjv0a6ap8hZTu0OzKFSUyGFC238GVBBZW5Kwxk9I",1780401337325]