https://stackoverflow.com/questions/76771545/nuxt-3-where-to-customize-spa-loading-svg/76771704#76771704
https://stackoverflow.com/questions/76693564/how-do-i-disable-nuxt3-default-loading-indicator
https://stackoverflow.com/questions/76810503/is-it-possible-to-replace-nuxt-3-default-page-loading-animation
spaLoadingTemplate: 'spa-loading-template.html',
當(dāng)通過在配置中提供ssr:false將應(yīng)用程序置于非ssr模式時(shí)殿雪，nuxt提供了默認(rèn)的綠色SVG半哟。我知道有一種方法可以在nuxt 2中使用一些內(nèi)置的spinkit微調(diào)器，但我找不到一種方法來更改/替換這個(gè)SVG圖形，例如我的徽標(biāo)。有人能給我指正確的方向嗎？
到處搜索，但代碼似乎是內(nèi)置的
您可以通過調(diào)用 nuxt.config 中 HTML 文件的文件名來自定義 SPA 加載屏幕模板。確保禁用 SSR 才能使其正常工作耸黑。
nuxt.config.ts
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
ssr: false,
spaLoadingTemplate: 'spa-loading-template.html',
});
在根目錄中創(chuàng)建一個(gè)名為 spa-loading-template.html 的文件。這將是您的加載屏幕模板篮幢。 例如spa-loading-template.html
<style>
.loading {
background-color: #1e293b;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
color:#15803d;
}
#spinner {
width: 30px;
}
#spinner #sGD stop {
stop-color: #16a34a;
}
#spinner .path-solid {
stroke: #16a34a;
}
</style>
<div class="loading">
<svg version="1.1" viewBox="0 0 64 64" width="1em" xmlns="http://www.w3.org/2000/svg" id="spinner">
<circle class="path-gradient" cx="32" cy="32" r="28" fill="none" stroke="url(#sGD)" stroke-width="8" />
<path class="path-solid" d="M 32,4 A 28 28,0,0,0,32,60" fill="none" stroke="#000" stroke-width="8" stroke-linecap="round"/>
<defs>
<linearGradient id="sGD" gradientUnits="userSpaceOnUse" x1="32" y1="0" x2="32" y2="64">
<stop stop-color="#000" offset="0.1" stop-opacity="0" class="stop1"></stop>
<stop stop-color="#000" offset=".9" stop-opacity="1" class="stop2"></stop>
</linearGradient>
</defs>
<animateTransform
values="0,0,0;360,0,0"
attributeName="transform"
type="rotate"
repeatCount="indefinite"
dur="750ms">
</animateTransform>
</svg>
</div>
</div>
</div>
image.png
通過遵循這些設(shè)置大刊，您應(yīng)該能夠看到自定義加載屏幕。
