[{"data":1,"prerenderedAt":703},["ShallowReactive",2],{"\u002Fsamples\u002Floadingspinner2\u002F":3,"\u002Fsamples\u002Floadingspinner2\u002F-related":680},{"id":4,"title":5,"body":6,"date":667,"description":22,"extension":668,"head":669,"meta":670,"modifiedDate":667,"navigation":312,"path":671,"schemaOrg":669,"seo":672,"stem":673,"tag":674,"thumbnail":678,"__hash__":679},"samples\u002Fsamples\u002FloadingSpinner2.md","ローディングスピナー2",{"type":7,"value":8,"toc":663},"minimark",[9,15,19,23,27,30,38,55,58,235,659],[10,11],"content-title",{":date":12,":tags":13,":title":14},"date","tag","title",[16,17],"loading-spinner2",{":show-replay-button":18},"false",[20,21,22],"p",{},"ローディング中などに表示されるサークルが伸びたり縮んだりしながらクルクル回るアイコンです。",[24,25,26],"h2",{"id":26},"実装のポイント",[20,28,29],{},"3つのアニメーションを組み合わせています。1つはパスアニメーション、1つはパスのオフセット、そして全体の回転アニメーションです。パスアニメーションは起点から伸びたり縮んだりするだけですが、オフセットのアニメーションと組み合わせることで、伸び縮みが追いかけっこするようになります。それだけだと滑らかなうごきでないので全体を回転させて回転中の追いかけっこになります。",[20,31,32,33,37],{},"追いかけっこ具合はイージングのよって結構変わってきます。個人的には",[34,35,36],"code",{},"cubic-bezier(0.7, 0.1, 0.3, 0.9)","がベストでした。",[20,39,40,41,44,45,48,49,54],{},"またパスの長さに",[34,42,43],{},"600 128","という数値が出てきていますが、",[34,46,47],{},"728","が円周長になります。この値は直径×3.14で予め測っている必要があります。パスの長さの取得方法は",[50,51,53],"a",{"href":52},"\u002Fsamples\u002Ftextstroke\u002F","テキストのアウトラインが浮かび上がるアニメーション","にて解説しています。",[24,56,57],{"id":57},"コード例",[59,60,65],"pre",{"className":61,"code":62,"language":63,"meta":64,"style":64},"language-html shiki shiki-themes github-light github-dark monokai","\u003Csvg\n  xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"\n  width=\"256\"\n  height=\"256\"\n  viewBox=\"0 0 256 256\"\n  fill=\"none\"\n  class=\"loadingSpinner\"\n>\n  \u003Cpath\n    d=\"M128 12C192.065 12 244 63.935 244 128C244 192.065 192.065 244 128 244C63.935 244 12 192.065 12 128C12 63.935 63.935 12 128 12Z\"\n    stroke=\"black\"\n    stroke-width=\"24\"\n    stroke-linecap=\"round\"\n    class=\"loadingPath\"\n  \u002F>\n\u003C\u002Fsvg>\n","html","",[34,66,67,80,94,105,115,126,137,148,154,163,174,185,196,207,218,224],{"__ignoreMap":64},[68,69,72,76],"span",{"class":70,"line":71},"line",1,[68,73,75],{"class":74},"sMOD_","\u003C",[68,77,79],{"class":78},"s5clZ","svg\n",[68,81,83,87,90],{"class":70,"line":82},2,[68,84,86],{"class":85},"srTi1","  xmlns",[68,88,89],{"class":74},"=",[68,91,93],{"class":92},"sstjo","\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"\n",[68,95,97,100,102],{"class":70,"line":96},3,[68,98,99],{"class":85},"  width",[68,101,89],{"class":74},[68,103,104],{"class":92},"\"256\"\n",[68,106,108,111,113],{"class":70,"line":107},4,[68,109,110],{"class":85},"  height",[68,112,89],{"class":74},[68,114,104],{"class":92},[68,116,118,121,123],{"class":70,"line":117},5,[68,119,120],{"class":85},"  viewBox",[68,122,89],{"class":74},[68,124,125],{"class":92},"\"0 0 256 256\"\n",[68,127,129,132,134],{"class":70,"line":128},6,[68,130,131],{"class":85},"  fill",[68,133,89],{"class":74},[68,135,136],{"class":92},"\"none\"\n",[68,138,140,143,145],{"class":70,"line":139},7,[68,141,142],{"class":85},"  class",[68,144,89],{"class":74},[68,146,147],{"class":92},"\"loadingSpinner\"\n",[68,149,151],{"class":70,"line":150},8,[68,152,153],{"class":74},">\n",[68,155,157,160],{"class":70,"line":156},9,[68,158,159],{"class":74},"  \u003C",[68,161,162],{"class":78},"path\n",[68,164,166,169,171],{"class":70,"line":165},10,[68,167,168],{"class":85},"    d",[68,170,89],{"class":74},[68,172,173],{"class":92},"\"M128 12C192.065 12 244 63.935 244 128C244 192.065 192.065 244 128 244C63.935 244 12 192.065 12 128C12 63.935 63.935 12 128 12Z\"\n",[68,175,177,180,182],{"class":70,"line":176},11,[68,178,179],{"class":85},"    stroke",[68,181,89],{"class":74},[68,183,184],{"class":92},"\"black\"\n",[68,186,188,191,193],{"class":70,"line":187},12,[68,189,190],{"class":85},"    stroke-width",[68,192,89],{"class":74},[68,194,195],{"class":92},"\"24\"\n",[68,197,199,202,204],{"class":70,"line":198},13,[68,200,201],{"class":85},"    stroke-linecap",[68,203,89],{"class":74},[68,205,206],{"class":92},"\"round\"\n",[68,208,210,213,215],{"class":70,"line":209},14,[68,211,212],{"class":85},"    class",[68,214,89],{"class":74},[68,216,217],{"class":92},"\"loadingPath\"\n",[68,219,221],{"class":70,"line":220},15,[68,222,223],{"class":74},"  \u002F>\n",[68,225,227,230,233],{"class":70,"line":226},16,[68,228,229],{"class":74},"\u003C\u002F",[68,231,232],{"class":78},"svg",[68,234,153],{"class":74},[59,236,240],{"className":237,"code":238,"language":239,"meta":64,"style":64},"language-css shiki shiki-themes github-light github-dark monokai",".loadingSpinner {\n  animation-name: rotation;\n  animation-duration: 7s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n.loadingPath {\n  animation-name: pathAnimation, offsetAnimation;\n  animation-duration: 2.7s;\n  animation-timing-function: cubic-bezier(0.7, 0.1, 0.3, 0.9);\n  animation-iteration-count: infinite;\n}\n\n@keyframes pathAnimation {\n  0% {\n    stroke-dasharray: 128 600;\n  }\n  50% {\n    stroke-dasharray: 600 128;\n  }\n  100% {\n    stroke-dasharray: 128 600;\n  }\n}\n\n@keyframes offsetAnimation {\n  0% {\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dashoffset: -162;\n  }\n  100% {\n    stroke-dashoffset: -728;\n  }\n}\n\n@keyframes rotation {\n  0% {\n    rotate: 0deg;\n  }\n  100% {\n    rotate: 360deg;\n  }\n}\n","css",[34,241,242,250,259,278,291,303,308,314,321,328,341,375,385,389,393,404,412,428,434,442,457,462,470,483,488,493,498,508,515,528,533,540,552,557,564,576,581,586,591,601,608,623,628,635,649,654],{"__ignoreMap":64},[68,243,244,247],{"class":70,"line":71},[68,245,246],{"class":85},".loadingSpinner",[68,248,249],{"class":74}," {\n",[68,251,252,256],{"class":70,"line":82},[68,253,255],{"class":254},"s-m8C","  animation-name",[68,257,258],{"class":74},": rotation;\n",[68,260,261,264,267,271,275],{"class":70,"line":96},[68,262,263],{"class":254},"  animation-duration",[68,265,266],{"class":74},": ",[68,268,270],{"class":269},"s7F3e","7",[68,272,274],{"class":273},"sC2Qs","s",[68,276,277],{"class":74},";\n",[68,279,280,283,285,289],{"class":70,"line":107},[68,281,282],{"class":254},"  animation-timing-function",[68,284,266],{"class":74},[68,286,288],{"class":287},"sTrkL","linear",[68,290,277],{"class":74},[68,292,293,296,298,301],{"class":70,"line":117},[68,294,295],{"class":254},"  animation-iteration-count",[68,297,266],{"class":74},[68,299,300],{"class":287},"infinite",[68,302,277],{"class":74},[68,304,305],{"class":70,"line":128},[68,306,307],{"class":74},"}\n",[68,309,310],{"class":70,"line":139},[68,311,313],{"emptyLinePlaceholder":312},true,"\n",[68,315,316,319],{"class":70,"line":150},[68,317,318],{"class":85},".loadingPath",[68,320,249],{"class":74},[68,322,323,325],{"class":70,"line":156},[68,324,255],{"class":254},[68,326,327],{"class":74},": pathAnimation, offsetAnimation;\n",[68,329,330,332,334,337,339],{"class":70,"line":165},[68,331,263],{"class":254},[68,333,266],{"class":74},[68,335,336],{"class":269},"2.7",[68,338,274],{"class":273},[68,340,277],{"class":74},[68,342,343,345,347,350,353,356,359,362,364,367,369,372],{"class":70,"line":176},[68,344,282],{"class":254},[68,346,266],{"class":74},[68,348,349],{"class":287},"cubic-bezier",[68,351,352],{"class":74},"(",[68,354,355],{"class":269},"0.7",[68,357,358],{"class":74},", ",[68,360,361],{"class":269},"0.1",[68,363,358],{"class":74},[68,365,366],{"class":269},"0.3",[68,368,358],{"class":74},[68,370,371],{"class":269},"0.9",[68,373,374],{"class":74},");\n",[68,376,377,379,381,383],{"class":70,"line":187},[68,378,295],{"class":254},[68,380,266],{"class":74},[68,382,300],{"class":287},[68,384,277],{"class":74},[68,386,387],{"class":70,"line":198},[68,388,307],{"class":74},[68,390,391],{"class":70,"line":209},[68,392,313],{"emptyLinePlaceholder":312},[68,394,395,398,402],{"class":70,"line":220},[68,396,397],{"class":273},"@keyframes",[68,399,401],{"class":400},"sTHNf"," pathAnimation",[68,403,249],{"class":74},[68,405,406,410],{"class":70,"line":226},[68,407,409],{"class":408},"s_OQ2","  0%",[68,411,249],{"class":74},[68,413,415,418,420,423,426],{"class":70,"line":414},17,[68,416,417],{"class":254},"    stroke-dasharray",[68,419,266],{"class":74},[68,421,422],{"class":269},"128",[68,424,425],{"class":269}," 600",[68,427,277],{"class":74},[68,429,431],{"class":70,"line":430},18,[68,432,433],{"class":74},"  }\n",[68,435,437,440],{"class":70,"line":436},19,[68,438,439],{"class":408},"  50%",[68,441,249],{"class":74},[68,443,445,447,449,452,455],{"class":70,"line":444},20,[68,446,417],{"class":254},[68,448,266],{"class":74},[68,450,451],{"class":269},"600",[68,453,454],{"class":269}," 128",[68,456,277],{"class":74},[68,458,460],{"class":70,"line":459},21,[68,461,433],{"class":74},[68,463,465,468],{"class":70,"line":464},22,[68,466,467],{"class":408},"  100%",[68,469,249],{"class":74},[68,471,473,475,477,479,481],{"class":70,"line":472},23,[68,474,417],{"class":254},[68,476,266],{"class":74},[68,478,422],{"class":269},[68,480,425],{"class":269},[68,482,277],{"class":74},[68,484,486],{"class":70,"line":485},24,[68,487,433],{"class":74},[68,489,491],{"class":70,"line":490},25,[68,492,307],{"class":74},[68,494,496],{"class":70,"line":495},26,[68,497,313],{"emptyLinePlaceholder":312},[68,499,501,503,506],{"class":70,"line":500},27,[68,502,397],{"class":273},[68,504,505],{"class":400}," offsetAnimation",[68,507,249],{"class":74},[68,509,511,513],{"class":70,"line":510},28,[68,512,409],{"class":408},[68,514,249],{"class":74},[68,516,518,521,523,526],{"class":70,"line":517},29,[68,519,520],{"class":254},"    stroke-dashoffset",[68,522,266],{"class":74},[68,524,525],{"class":269},"0",[68,527,277],{"class":74},[68,529,531],{"class":70,"line":530},30,[68,532,433],{"class":74},[68,534,536,538],{"class":70,"line":535},31,[68,537,439],{"class":408},[68,539,249],{"class":74},[68,541,543,545,547,550],{"class":70,"line":542},32,[68,544,520],{"class":254},[68,546,266],{"class":74},[68,548,549],{"class":269},"-162",[68,551,277],{"class":74},[68,553,555],{"class":70,"line":554},33,[68,556,433],{"class":74},[68,558,560,562],{"class":70,"line":559},34,[68,561,467],{"class":408},[68,563,249],{"class":74},[68,565,567,569,571,574],{"class":70,"line":566},35,[68,568,520],{"class":254},[68,570,266],{"class":74},[68,572,573],{"class":269},"-728",[68,575,277],{"class":74},[68,577,579],{"class":70,"line":578},36,[68,580,433],{"class":74},[68,582,584],{"class":70,"line":583},37,[68,585,307],{"class":74},[68,587,589],{"class":70,"line":588},38,[68,590,313],{"emptyLinePlaceholder":312},[68,592,594,596,599],{"class":70,"line":593},39,[68,595,397],{"class":273},[68,597,598],{"class":400}," rotation",[68,600,249],{"class":74},[68,602,604,606],{"class":70,"line":603},40,[68,605,409],{"class":408},[68,607,249],{"class":74},[68,609,611,614,616,618,621],{"class":70,"line":610},41,[68,612,613],{"class":254},"    rotate",[68,615,266],{"class":74},[68,617,525],{"class":269},[68,619,620],{"class":273},"deg",[68,622,277],{"class":74},[68,624,626],{"class":70,"line":625},42,[68,627,433],{"class":74},[68,629,631,633],{"class":70,"line":630},43,[68,632,467],{"class":408},[68,634,249],{"class":74},[68,636,638,640,642,645,647],{"class":70,"line":637},44,[68,639,613],{"class":254},[68,641,266],{"class":74},[68,643,644],{"class":269},"360",[68,646,620],{"class":273},[68,648,277],{"class":74},[68,650,652],{"class":70,"line":651},45,[68,653,433],{"class":74},[68,655,657],{"class":70,"line":656},46,[68,658,307],{"class":74},[660,661,662],"style",{},"html pre.shiki code .sMOD_, html code.shiki .sMOD_{--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-sepia:#F8F8F2}html pre.shiki code .s5clZ, html code.shiki .s5clZ{--shiki-default:#22863A;--shiki-dark:#85E89D;--shiki-sepia:#F92672}html pre.shiki code .srTi1, html code.shiki .srTi1{--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .sstjo, html code.shiki .sstjo{--shiki-default:#032F62;--shiki-dark:#9ECBFF;--shiki-sepia:#E6DB74}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 .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .s-m8C, html code.shiki .s-m8C{--shiki-default:#005CC5;--shiki-default-font-style:inherit;--shiki-dark:#79B8FF;--shiki-dark-font-style:inherit;--shiki-sepia:#66D9EF;--shiki-sepia-font-style:italic}html pre.shiki code .s7F3e, html code.shiki .s7F3e{--shiki-default:#005CC5;--shiki-dark:#79B8FF;--shiki-sepia:#AE81FF}html pre.shiki code .sC2Qs, html code.shiki .sC2Qs{--shiki-default:#D73A49;--shiki-dark:#F97583;--shiki-sepia:#F92672}html pre.shiki code .sTrkL, html code.shiki .sTrkL{--shiki-default:#005CC5;--shiki-dark:#79B8FF;--shiki-sepia:#66D9EF}html pre.shiki code .sTHNf, html code.shiki .sTHNf{--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit;--shiki-sepia:#FD971F;--shiki-sepia-font-style:italic}html pre.shiki code .s_OQ2, html code.shiki .s_OQ2{--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#F8F8F2}",{"title":64,"searchDepth":82,"depth":82,"links":664},[665,666],{"id":26,"depth":82,"text":26},{"id":57,"depth":82,"text":57},"2026-07-12","md",null,{"ogTitle":5},"\u002Fsamples\u002Floadingspinner2",{"title":5,"description":22},"samples\u002FloadingSpinner2",[675,676,677],"always","cssOnly","icon","loadingSpinner2.avif","-f4cNGZB8bhK1LqDvJlKXYIU-OkFaf_RIwXqULmVG_A",[681,687,689,696],{"id":682,"title":683,"thumbnail":684,"path":685,"tag":686},"samples\u002Fsamples\u002FloadingSpinner1.md","ローディングスピナー1","loadingSpinner1.avif","\u002Fsamples\u002Floadingspinner1",[675,676,677],{"id":4,"title":5,"thumbnail":678,"path":671,"tag":688},[675,676,677],{"id":690,"title":691,"thumbnail":692,"path":693,"tag":694},"samples\u002Fsamples\u002FscrollingText.md","横に流れ続けるテキスト","scrollingText.avif","\u002Fsamples\u002Fscrollingtext",[675,676,695],"text",{"id":697,"title":698,"thumbnail":699,"path":700,"tag":701},"samples\u002Fsamples\u002FshinyButton.md","キラッと光るボタン","shinyButton.avif","\u002Fsamples\u002Fshinybutton",[675,676,702],"button",1783842946902]