Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-25 15:15:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(templates): add spa-loading-icon

Browse Source
This commit is contained in:
Daniel Roe 2023-06-20 12:27:42 +01:00
parent 1e5248df96
commit 985f21bdc7
3 changed files with 37 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/ui-templates/lib/render.ts
View File

@ -33,8 +33,9 @@ export const RenderPlugin = () => {
// Read source template // Read source template
let html = await fsp.readFile(fileName, 'utf-8') let html = await fsp.readFile(fileName, 'utf-8')
const isCompleteHTML = html.includes('<!DOCTYPE html>')
// Apply criters to inline styles // Apply critters to inline styles
html = await critters.process(html) html = await critters.process(html)
// We no longer need references to external CSS // We no longer need references to external CSS
html = html.replace(/<link[^>]*>/g, '') html = html.replace(/<link[^>]*>/g, '')
@ -63,6 +64,11 @@ export const RenderPlugin = () => {
// Minify HTML // Minify HTML
html = htmlMinifier.minify(html, { collapseWhitespace: true }) html = htmlMinifier.minify(html, { collapseWhitespace: true })
if (!isCompleteHTML) {
html = html.replace('<html><head></head><body>', '')
html = html.replace('</body></html>', '')
}
// Load messages // Load messages
const messages = JSON.parse(await fsp.readFile(r(`templates/${templateName}/messages.json`), 'utf-8')) const messages = JSON.parse(await fsp.readFile(r(`templates/${templateName}/messages.json`), 'utf-8'))

29
packages/ui-templates/templates/spa-loading-icon/index.html Normal file
View File

@ -0,0 +1,29 @@
<svg class="nuxt-spa-loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 25" fill="none" width="80">
<path d="M24.236 22.006h10.742L25.563 5.822l-8.979 14.31a4 4 0 0 1-3.388 1.874H2.978l11.631-20 5.897 10.567" />
</svg>
<style>
.nuxt-spa-loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nuxt-spa-loading>path {
fill: none;
stroke: #00DC82;
stroke-width: 4px;
stroke-linecap: round;
stroke-linejoin: round;
/* Stroke-dasharray property */
stroke-dasharray: 128;
stroke-dashoffset: 128;
animation: nuxt-spa-loading-move 3s linear infinite;
}
@keyframes nuxt-spa-loading-move {
100% {
stroke-dashoffset: -128;
}
}
</style>
Side by Side

After

Width:  |  Height:  |  Size: 746 B

1
packages/ui-templates/templates/spa-loading-icon/messages.json Normal file
View File

@ -0,0 +1 @@
{}