Important!
in 2.0, nuxt module has been removed. The reason is that you don't really need it. Just use it as a vue plugin.
Vue Preloaders
Stable, Flexible and Fully Customizable Vue preloaders library.
Attach your preloader at any time, to any element easily and quickly.
Demo
https://vue-preloaders.netlify.com/
Capabilities
- Attach a stunning preloader to any element with one line of code.
- Super simple usage with the ability to be super advanced and smart.
- Can contain:
- Component
- Asset
- HTML
- Text
- Any of them together
- Modify props of the injected component.
- Modify any aspect of any element and their wrappers.
- Have a list of preset preloaders for easy use.
- Change options of already-opened preloader.
- Smart deepMerge between all options:
- User default options.
- User default loader options (loader from loaders map).
- Open() loader options (loader from loaders map).
- Open() options.
- Separate preloaders custom styling via custom class name.
- Customize transition.
- Close easily with returned callback.
And more!
Installation
npm install vue-preloaders --save
Mount
vue-preloaders instance is bound to this and app.
Vue
main.js
import 'vue-preloaders/dist/vue-preloaders.css'
import VuePreloaders from 'vue-preloaders'
Vue.use(VuePreloaders, /*{ options }*/)
Usage
Open
Gets: Object with options from the options list below.
Returns: callback for closing the opened preloader.
If no container was set, it will fallback to the body element.
this.$preloaders.open(/*{ options }*/)
const close = this.$preloaders.open(/*{ options }*/)
setTimeout(close, 1000)
Close
Gets: Object with container key.
If no container was set, the preloader on the body tag will be closed (if it exists).
this.$preloaders.close(/*{ options: { container } }*/)
Options
loaders
Use it only in the library init.
Map of default, preset preloaders.
{
...
loaders: { //Object
myAwesomeLoader: {
container: '#app',
cssStyle: { backgroundColor: 'pink' },
overlayStyle: { opacity: 1 },
component: MyAwesomeLoaderComponent
},
anotherAwesomeLoader: {
html: '<div class="my-loader">Loader injected html</div>',
text: 'This is my loader',
}
}
...
}
loader
Loader to use from 'loaders' map.
{
...
loader: 'myAwesomeLoader' //String
...
}
container
Element to be injected to.
{
...
container: '.class-name' //String(selector) / Element
...
}
cssClass
Binds class for preloader's root element.
{
...
cssClass: 'test' //String
...
}
cssStyle
Binds style for preloader's root element.
{
...
cssStyle: { dispaly: 'block' } //Object
...
}
overlayStyle
Binds style for preloader's overlay element.
{
...
overlayStyle: { backgroundColor: 'pink', opacity: 0.5 } //Object
...
}
component
Inject component to preloader.
import MyAwesomeComp from '../components/MyAwesomeComp'
{
...
component: MyAwesomeComp
...
}
componentStyle
Binds style for preloader's injected component.
{
...
overlayStyle: { textAlign: 'center' } //Object
...
}
componentProps
Binds props for preloader's injected component.
{
...
componentProps: { isCentered: true } //Object
...
}
assetWrapperStyle
Binds style for preloader's asset wrapper element.
{
...
assetWrapperStyle: { width: '50px' } //Object
...
}
assetSrc
Inject src for preloader's image tag.
{
...
assetSrc: 'https://www.random-image.com' //String
...
}
assetStyle
Binds style for preloader's asset element.
{
...
assetStyle: { width: '100%', maxWidth: '30px' } //Object
...
}
text
Inject text to preloader.
{
...
text: 'My text' //String
...
}
textStyle
Binds style for preloader's text element.
{
...
textStyle: { textAlign: 'center' } //Object
...
}
html
Inject HTML to preloader.
{
...
html: '<div class="my-class">Test</div>' //String
...
}
htmlStyle
Binds style for preloader's injected HTML element.
{
...
htmlStyle: { backgroundColor: 'orange' } //Object
...
}
Transition
Customize the transition of the preloader.
More info: https://vuejs.org/v2/guide/transitions.html
Transition name is: preloaders
/* Default Transition */
.preloaders-enter-active, .preloaders-leave-active {
transition: opacity 150ms;
}
.preloaders-enter, .preloaders-leave-to {
opacity: 0;
}
Please make sure when you edit the transition classes, that the specificity is higher.
More info: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity