vue-loading-twa
Advanced tools
⏳ Loading inside a container or full screen for Vue.js. This is a improved extension from [vue-element-loading]
npm install vue-loading-twa
import Vue from 'vue'
import VueLoading from 'vue-loading-twa'
Vue.component('VueLoading', VueLoading)
or
import VueLoading from 'vue-loading-twa'
export default {
components: {
VueLoading,
},
}
<div class="parent">
<vue-loading :active="show" spinner="bar-fade-scale" />
<span>
This is my content.
</span>
</div>
<body>
<vue-loading :active="show" is-full-screen />
</body>
Use the color parameter to set the color of the displayed spinner (does not affect custom spinner images).
<div class="parent">
<vue-loading :active="show" spinner="bar-fade-scale" color="#FF6700" />
<span>
This is my content.
</span>
</div>
Use the text parameter to set the text which will appear below loader.
<div class="parent">
<vue-loading
:active="show"
spinner="bar-fade-scale"
color="#FF6700"
text="Please wait..."
/>
<span>
This is my content.
</span>
</div>
Use the textStyle parameter to set the style of text( you need to pass css-in-js way using camelCase exp. fontSize, backgroundColor etc).
<div class="parent">
<vue-loading
:active="show"
spinner="bar-fade-scale"
color="#FF6700"
text="Please textStyle={fontSize: '25px'} wait..."
/>
<span>
This is my content.
</span>
</div>
Use the size parameter to set the size of the displayed spinner (does not affect custom spinner images).
<div class="parent">
<vue-loading :active="show" spinner="bar-fade-scale" size="128" />
<span>
This is my content.
</span>
</div>
Use the duration parameter to set the animation loop duration in seconds (does not affect custom spinner images).
<div class="parent">
<vue-loading :active="show" spinner="bar-fade-scale" duration="1.0" />
<span>
This is my content.
</span>
</div>
<!-- IMG loader -->
<div class="parent">
<vue-loading :active="show">
<img src="/static/pikachu.gif" width="55px" height="55px" />
</vue-loading>
</div>
<!-- SVG loader -->
<div class="parent">
<vue-loading
:active="show"
spinner="Custom"
color="red"
size="64"
duration="1.5"
svgCode="<svg width='{size}'><path fill='{color}'><animateTransform dur='{duration}' /></path></svg>"
/>
</div>
<!-- NOTE: Tags {size}, {color}, {duration} will be replace with component props value -->
<div class="parent">
<vue-loading :active="show1" :text="showText1" />
<vue-loading :active="show2" :text="showText2" />
<vue-loading :active="show3" :text="showText3" />
</div>
showText1 = 'Example' //Text appears normal bellow spinner
showText2 = { text: 'Example2', icon: 'Cog' } //Text appears with an icon on left side of string
showText3 = [
{ text: 'Example3', icon: 'Cog' },
{ text: 'Example3', icon: 'Cog' },
] //Appears multiple strings bellow spinner
// Options for icons: 'Cog', 'Error', 'Check'
| Props | Type | Default | Description |
|---|---|---|---|
| active | Boolean | - | Status for show/hide loading |
| spinner | String | spinner | Spinner icon name: spinner, mini-spinner, ring, line-wave, line-scale, line-down, bar-fade, bar-fade-scale, Custom |
| svgCode | String | "" | String with SVG content, only works if spinner its equal to Custom |
| color | String | #000 | Color of spinner icon |
| background-color | String | rgba(255, 255, 255, .9) | Background color of spinner icon (for overlay) |
| size | String | "40" | The size to display the spinner in pixels (NOTE: this will not affect custom spinner images) |
| duration | String | "0.6" | The duration of one 'loop' of the spinner animation, in seconds (NOTE: this will not affect custom spinner images) |
| is-full-screen | Boolean | false | Loader will overlay the full page |
| text | String or Array | - | Text will appear below loader |
| text-style | Object | {} | Change style of the text below loader |
| fade | Boolean | true | If text its an array by default fade effect its apllied to text |
FAQs
Loading inside a container or full screen for Vue.js
We found that vue-loading-twa demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.