mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
feat: new default loading indicators
This commit is contained in:
parent
a273f021c9
commit
a56c208f9b
@ -65,4 +65,4 @@ body, html, #__nuxt {
|
||||
<div class="dot2"></div>
|
||||
</div>
|
||||
|
||||
<!-- http://tobiasahlin.com/spinkit -->
|
||||
<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
|
||||
|
@ -148,4 +148,4 @@ body, html, #__nuxt {
|
||||
<div class="sk-circle12 sk-child"></div>
|
||||
</div>
|
||||
|
||||
<!-- http://tobiasahlin.com/spinkit -->
|
||||
<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
|
||||
|
@ -85,4 +85,4 @@ body, html, #__nuxt {
|
||||
<div class="sk-cube sk-cube9"></div>
|
||||
</div>
|
||||
|
||||
<!-- http://tobiasahlin.com/spinkit -->
|
||||
<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
|
||||
|
59
lib/app/views/loading/default.html
Normal file
59
lib/app/views/loading/default.html
Normal file
@ -0,0 +1,59 @@
|
||||
<style>
|
||||
body, html, #__nuxt {
|
||||
background-color: <%= options.background %>;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.loader,
|
||||
.loader:after {
|
||||
border-radius: 50%;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin: 60px auto;
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
border: .5rem solid <%= options.color2 %>;
|
||||
border-left: .5rem solid <%= options.color %>;
|
||||
-webkit-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-animation: load8 1.1s infinite linear;
|
||||
animation: load8 1.1s infinite linear;
|
||||
}
|
||||
|
||||
@-webkit-keyframes load8 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes load8 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="loader"><%= options.loading %></div>
|
||||
|
||||
<%= options.dev ? '<!-- https://projects.lukehaas.me/css-loaders -->' : '' %>
|
84
lib/app/views/loading/default2.html
Normal file
84
lib/app/views/loading/default2.html
Normal file
@ -0,0 +1,84 @@
|
||||
<style>
|
||||
body, html, #__nuxt {
|
||||
background-color: <%= options.background %>;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.loader,
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.loader {
|
||||
color: <%= options.color %>;
|
||||
font-size: 11px;
|
||||
text-indent: -99999em;
|
||||
margin: 55px auto;
|
||||
position: relative;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
box-shadow: inset 0 0 0 1em;
|
||||
-webkit-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
}
|
||||
.loader:before {
|
||||
width: 5.2em;
|
||||
height: 10.2em;
|
||||
background-color: <%= options.background %>;
|
||||
border-radius: 10.2em 0 0 10.2em;
|
||||
top: -0.1em;
|
||||
left: -0.1em;
|
||||
-webkit-transform-origin: 5.2em 5.1em;
|
||||
transform-origin: 5.2em 5.1em;
|
||||
-webkit-animation: load2 2s infinite ease 1.5s;
|
||||
animation: load2 2s infinite ease 1.5s;
|
||||
}
|
||||
.loader:after {
|
||||
width: 5.2em;
|
||||
height: 10.2em;
|
||||
background-color: <%= options.background %>;
|
||||
border-radius: 0 10.2em 10.2em 0;
|
||||
top: -0.1em;
|
||||
left: 5.1em;
|
||||
-webkit-transform-origin: 0px 5.1em;
|
||||
transform-origin: 0px 5.1em;
|
||||
-webkit-animation: load2 2s infinite ease;
|
||||
animation: load2 2s infinite ease;
|
||||
}
|
||||
@-webkit-keyframes load2 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes load2 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="loader"><%= options.loading %></div>
|
||||
|
||||
<%= options.dev ? '<!-- https://projects.lukehaas.me/css-loaders -->' : '' %>
|
@ -162,4 +162,4 @@ body, html, #__nuxt {
|
||||
<div class="sk-circle12 sk-circle"></div>
|
||||
</div>
|
||||
|
||||
<!-- http://tobiasahlin.com/spinkit -->
|
||||
<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
|
||||
|
@ -106,4 +106,4 @@ body, html, #__nuxt {
|
||||
<div class="sk-cube3 sk-cube"></div>
|
||||
</div>
|
||||
|
||||
<!-- http://tobiasahlin.com/spinkit -->
|
||||
<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
|
||||
|
@ -46,4 +46,4 @@ body, html, #__nuxt {
|
||||
<div class="double-bounce2"></div>
|
||||
</div>
|
||||
|
||||
<!-- http://tobiasahlin.com/spinkit -->
|
||||
<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
|
||||
|
@ -72,4 +72,4 @@ body, html, #__nuxt {
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
|
||||
<!-- http://tobiasahlin.com/spinkit -->
|
||||
<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
|
||||
|
@ -42,4 +42,4 @@ body, html, #__nuxt {
|
||||
|
||||
<div class="spinner"></div>
|
||||
|
||||
<!-- http://tobiasahlin.com/spinkit -->
|
||||
<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
|
||||
|
@ -59,4 +59,4 @@ body, html, #__nuxt {
|
||||
<div class="bounce3"></div>
|
||||
</div>
|
||||
|
||||
<!-- http://tobiasahlin.com/spinkit -->
|
||||
<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
|
||||
|
@ -66,4 +66,4 @@ body, html, #__nuxt {
|
||||
<div class="cube2"></div>
|
||||
</div>
|
||||
|
||||
<!-- http://tobiasahlin.com/spinkit -->
|
||||
<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
|
||||
|
@ -131,7 +131,7 @@ export default {
|
||||
duration: 5000,
|
||||
rtl: false
|
||||
},
|
||||
loadingIndicator: false,
|
||||
loadingIndicator: 'default',
|
||||
transition: {
|
||||
name: 'page',
|
||||
mode: 'out-in',
|
||||
@ -198,6 +198,7 @@ export default {
|
||||
editor: undefined,
|
||||
hooks: null,
|
||||
messages: {
|
||||
loading: 'Loading...',
|
||||
error_404: 'This page could not be found',
|
||||
server_error: 'Server error',
|
||||
nuxtjs: 'Nuxt.js',
|
||||
|
@ -113,9 +113,12 @@ Options.from = function (_options) {
|
||||
// Apply defaults
|
||||
options.loadingIndicator = Object.assign(
|
||||
{
|
||||
name: 'pulse',
|
||||
color: '#dbe1ec',
|
||||
background: 'white'
|
||||
name: 'default',
|
||||
color: '#D3D3D3',
|
||||
color2: '#F5F5F5',
|
||||
background: 'white',
|
||||
dev: options.dev,
|
||||
loading: options.messages.loading
|
||||
},
|
||||
options.loadingIndicator
|
||||
)
|
||||
|
@ -101,10 +101,8 @@ export default class Renderer {
|
||||
const loadingHTMLPath = path.resolve(this.options.buildDir, 'loading.html')
|
||||
if (fs.existsSync(loadingHTMLPath)) {
|
||||
this.resources.loadingHTML = fs.readFileSync(loadingHTMLPath, 'utf8')
|
||||
this.resources.loadingHTML = this.resources.loadingHTML.replace(
|
||||
/[\r|\n]/g,
|
||||
''
|
||||
)
|
||||
this.resources.loadingHTML = this.resources.loadingHTML
|
||||
.replace(/\r|\n|[\t\s]{3,}/g, '')
|
||||
} else {
|
||||
this.resources.loadingHTML = ''
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user