A GSAP powered, spinner component for Vue.js. Pretty and silky smooth.

Last update: Jul 16, 2019

Smooth Load

A GSAP powered, spinner component for Vue.js. Pretty and silky smooth.

Installation

Use the package manager npm to install Smooth Load.

npm install smooth-load

Usage

import smoothLoad from 'smooth-load'

Vue.use(smoothLoad)

Then in your page view template use the component to hide your content while your data loads.

<template>
  <div>
    <smooth-load :loading='loadVariable'/>
    <p>{{loadedContent}}p>
  div>
template>

Check out the docs for a more detailed example and prop options!

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

GitHub

https://github.com/christophgomez/smooth-load
You might also like...

Radial progress bar component for Vue.js

vue-radial-progress A radial progress bar component for Vue.js. Uses SVG and javascript to animate a radial progress bar with a gradient. Live Demo Re

Aug 8, 2022

Vue.js component for full screen loading indicator :cyclone:

Vue Loading Overlay Component Vue.js component for full screen loading indicator Demo or JSFiddle Installation # yarn yarn add vue-loading-overlay #

Aug 17, 2022

a vue component about toy bricks of skeleton screen loading

tb-skeleton a vue component about toy bricks of skeleton screen loading install $ npm i tb-skeleton -s use npm import Vue from 'vue' import skelet

Jul 10, 2022

Youtube Like Loading Bar Component for Vue.js

vue-loading-bar Loading Bar Component for Vue.Js DEMO Need Vue 2 Version? Click Here... Intro Vue Loading Bar is a Youtube like loading bar component

Nov 28, 2021

Vue component to easily build (or use presets) SVG loading cards Facebook like.

Vue component to easily build (or use presets) SVG loading cards Facebook like.

Vue component to easily build (or use presets) SVG loading cards Facebook like.

Jul 16, 2022

Vue 3 infinity loading component

vue-eternal-loading Infinity loading component written on TypeScript for Vue 3, based on IntersectionObserver. No dependencies. Features: 4 directiona

Aug 8, 2022

Simple customizeable page loader component with self state manager module for Vue.js

⌛️ Sadrix Vue Page Loader ⏳ Simple customizeable page loader component with self state manager module for Vue.js. github repository Please let me know

Apr 27, 2021

Vue component runtime generator for svg-sprite-loader.

svg-sprite-vue-generator Vue component runtime generator for svg-sprite-loader. Install npm install svg-sprite-vue-generator -D Usage Inline mode All

Apr 15, 2020

Vue Skeleton Loader - Show component's skeleton before it's loaded

Vue Skeleton Loader - Show component's skeleton before it's loaded

Vue Skeleton Loader Show component's skeleton before it's loaded Installation Via NPM import Vue from 'vue' import VueSkeletonLoader from 'vue-skeleto

Aug 12, 2020
Comments
  • 1. Bump node-sass from 4.12.0 to 7.0.0

    Bumps node-sass from 4.12.0 to 7.0.0.

    Release notes

    Sourced from node-sass's releases.

    v7.0.0

    Breaking changes

    Features

    Dependencies

    Community

    • Remove double word "support" from documentation (@​pzrq, #3159)

    Misc

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 12, 14, 16, 17
    OSX x64 12, 14, 16, 17
    Linux* x64 12, 14, 16, 17
    Alpine Linux x64 12, 14, 16, 17
    FreeBSD i386 amd64 12, 14

    *Linux support refers to major distributions like Ubuntu, and Debian

    v6.0.1

    Dependencies

    Misc

    Supported Environments

    ... (truncated)

    Changelog

    Sourced from node-sass's changelog.

    v4.14.0

    https://github.com/sass/node-sass/releases/tag/v4.14.0

    v4.13.1

    https://github.com/sass/node-sass/releases/tag/v4.13.1

    v4.13.0

    https://github.com/sass/node-sass/releases/tag/v4.13.0

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-10 18:40
  • 2. Bump gsap from 2.1.3 to 3.6.0

    Bumps gsap from 2.1.3 to 3.6.0.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-01-20 21:42
Related tags
A pure Vue component submit button with a Ladda-style spinner

vue-submit A pure Vue component submit button with a Ladda-style spinner. Based on NxtChg/pieces vue-submit but with a different approach, using vue-c

Apr 18, 2019
A simple, flexible spinner for Vue.js

vue-simple-spinner A simple, flexible spinner for Vue.js vue-simple-spinner is designed to be a lightweight Vue.js spinner requiring minimal configura

Aug 3, 2022
Full overlay loading with spinner for Vue
Full overlay loading with spinner for Vue

Full overlay loading with spinner for Vue

Jul 16, 2022
🚗 A 3D product spinner for Vue.js with no dependencies
🚗    A 3D product spinner for Vue.js with no dependencies

The product spinner that Vue.js was missing. Sponsors Become a sponsor Live Demo Try it on CodeSandbox! Installation npm npm i vue-product-spinner yar

Jun 2, 2022
💫 A collection of loading spinner components for Vuejs

Vue Spinners A Vue.js port of react-spinners. ?? Installation npm install --save @saeris/vue-spinners # or yarn add @saeris/vue-spinners ?? Usage Ther

Jun 13, 2022
A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

Aug 3, 2020
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications

Multiple Process Loader Management for Vue and (optionally) Vuex. Read the Medium post "Managing Complex Waiting Experiences on Web UIs". Play with de

Aug 6, 2022
Stable, Flexible and Fully Customizable Vue and Nuxt preloaders library

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, Flex

Jul 20, 2022
Blazing fast scrolling and updating for any amount of list and hierarchical data.
Blazing fast scrolling and updating for any amount of list and hierarchical data.

Vue Virtualised Vue components developed by Vue.js 3.0 for efficiently rendering large scrollable lists and hierarchical data. vue-virtualised is able

May 15, 2022
A Vue.js component to create beautiful animated circular progress bars. https://vue-ellipse-progress-demo.netlify.com/
A Vue.js component to create beautiful animated circular progress bars. https://vue-ellipse-progress-demo.netlify.com/

vue-ellipse-progress A dependency-free Vue.js plugin to create beautiful and animated circular progress bars, implemented with SVG. The purpose of thi

Aug 17, 2022