An vuejs loading component ☄️

Related tags

Loader vue-loading
Overview

A Vue2 loader

InstallHow To UseMade With VueJS

Install

npm i @nulldreams/vue-loading

How to use

">
<template>
  <div>
    <vue-loader direction="middle" image="https://loading.io/spinners/coolors/lg.palette-rotating-ring-loader.gif" text="Loading..." text-color="#786fa6" />
    <loader :color="'#cf6a87'" :borderWidth="5" :duration="1.5" :size="25" :background="'#f5cd79'" />
    <loader :color="'#f5cd79'" :borderWidth="10" :duration="1" :size="70" :background="'#778beb'" />
    <loader :color="'#778beb'" :borderWidth="20" :duration=".5" :size="100" :background="'#cf6a87'" />
    <loader-dots :color="'#f5cd79'" :background="'#ea8685'" :duration="1" :size="15" />
  div>
template>

<script>
import vueLoader from '@nulldreams/vue-loading/src/vue-loading'
import loader from '@nulldreams/vue-loading/src/components/loader'
import loaderDots from '@nulldreams/vue-loading/src/components/dots'

export default {
    components: {
        vueLoader,
        loader,
        loaderDots
    }
}
script>
You might also like...
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

Progress bars and loading indicators for Vue.js
Progress bars and loading indicators for Vue.js

vue-progress-path Progress bars and loading indicators that can take any form! This library is Work In Progress. Live Demo Sponsors Gold Silver Bronze

BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen.
BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen.

vue-blockui BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen. Table of contents Installation Usage Demo Screens Installat

⏳ Loading inside a container or full screen for Vue.js
⏳ Loading inside a container or full screen for Vue.js

vue-element-loading ⏳ Loading inside a container or full screen for Vue.js 👀 Document & Demo Page Docs & Live demo Fully feature live demo 💻 Install

👇 Vue button with slideout loading indicator
👇 Vue button with slideout loading indicator

vue-loading-button Straightforward Vue button with slideout loading indicator Props Prop Type Required Default Description loading boolean false false

Full overlay loading with spinner for Vue
Full overlay loading with spinner for Vue

Full overlay loading with spinner for Vue

Delightful, performance-focused pure css loading animations.

Loaders.css Delightful and performance-focused pure css loading animations. What is this? See the demo A collection of loading animations written enti

Vuegister is a require hook for loading of the Vue.js single-file components (or *.vue files).

vuegister About Vuegister (a portmanteau for vue-register) is a require hook for loading of the Vue.js single-file components (or *.vue files). The ma

Just another collection of loading spinners with Vue.js, alot of spinners

vue-loading-spinner Just another collection of loading spinners with Vue.js Installation npm install --save vue-loading-spinner or yarn add vue-loadin

Comments
  • build(deps): bump node-sass from 4.8.3 to 4.13.1

    build(deps): bump node-sass from 4.8.3 to 4.13.1

    Bumps node-sass from 4.8.3 to 4.13.1.

    Release notes

    Sourced from node-sass's releases.

    v4.13.1

    Community

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    OSX x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    Linux* x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8**, 9**, 10**^, 11**^, 12**^, 13**^
    Alpine Linux x64 6, 8, 10, 11, 12, 13
    FreeBSD i386 amd64 8, 10, 12, 13

    *Linux support refers to Ubuntu, Debian, and CentOS 5+ ** Not available on CentOS 5 ^ Only available on x64

    v4.13.0

    Features

    Community

    Dependencies

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    OSX x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    Linux* x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8**, 9**, 10**^, 11**^, 12**^, 13**^
    Alpine Linux x64 6, 8, 10, 11, 12, 13
    FreeBSD i386 amd64 6, 8, 10, 12, 13

    *Linux support refers to Ubuntu, Debian, and CentOS 5+

    Changelog

    Sourced from node-sass's changelog.

    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

    v4.12.0

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

    v4.11.0

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

    v4.10.0

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

    v4.9.4

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

    v4.9.3

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

    v4.9.2

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

    v4.9.1

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

    v4.9.0

    https://github.com/sass/node-sass/releases/tag/v4.9.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.

    dependencies 
    opened by dependabot[bot] 1
  • build(deps): bump node-sass from 4.8.3 to 7.0.0

    build(deps): bump node-sass from 4.8.3 to 7.0.0

    Bumps node-sass from 4.8.3 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

    v4.12.0

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

    v4.11.0

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

    v4.10.0

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

    v4.9.4

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

    v4.9.3

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

    v4.9.2

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

    v4.9.1

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

    v4.9.0

    https://github.com/sass/node-sass/releases/tag/v4.9.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.

    dependencies 
    opened by dependabot[bot] 0
  • build(deps-dev): bump shelljs from 0.7.8 to 0.8.5

    build(deps-dev): bump shelljs from 0.7.8 to 0.8.5

    Bumps shelljs from 0.7.8 to 0.8.5.

    Release notes

    Sourced from shelljs's releases.

    v0.8.5

    This was a small security fix for #1058.

    v0.8.4

    Small patch release to fix a circular dependency warning in node v14. See #973.

    v0.8.3

    Closed issues:

    • Shelljs print stderr to console even if exec-only "silent" is true #905
    • refactor: remove common.state.tempDir #902
    • Can't suppress stdout for echo #899
    • exec() doesn't apply the arguments correctly #895
    • shell.exec('npm pack') painfully slow #885
    • shelljs.exec cannot find app.asar/node_modules/shelljs/src/exec-child.js #881
    • test infra: mocks and skipOnWin conflict #862
    • Support for shell function completion on IDE #859
    • echo command shows options in stdout #855
    • silent does not always work #851
    • Appveyor installs the latest npm, instead of the latest compatible npm #844
    • Force symbolic link (ln -sf) does not overwrite/recreate existing destination #830
    • inconsistent result when trying to echo to a file #798
    • Prevent require()ing executable-only files #789
    • Cannot set property to of [object String] which has only a getter #752
    • which() should check executability before returning a value #657
    • Bad encoding experience #456
    • phpcs very slow #440
    • Error shown when triggering a sigint during shelljs.exec if process.on sigint is defined #254
    • .to\(file\) does not mute STDIO output #146
    • Escaping shell arguments to exec() #143
    • Allow multiple string arguments for exec() #103
    • cp does not recursively copy from readonly location #98
    • Handling permissions errors on file I/O #64

    Merged pull requests:

    ... (truncated)

    Changelog

    Sourced from shelljs's changelog.

    Change Log

    Unreleased

    Full Changelog

    Closed issues:

    • find returns empty array even though directory has files #922
    • exec() should support node v10 (maxbuffer change) #915
    • grep exit status and extra newlines #900
    • Travis CI currently broken #893
    • Drop node v4 support #873
    • cp -Ru respects the -R but not the -u #808

    Merged pull requests:

    v0.8.3 (2018-11-13)

    Full Changelog

    Closed issues:

    • Shelljs print stderr to console even if exec-only "silent" is true #905
    • refactor: remove common.state.tempDir #902
    • Can't suppress stdout for echo #899
    • exec() doesn't apply the arguments correctly #895
    • shell.exec('npm pack') painfully slow #885
    • shelljs.exec cannot find app.asar/node_modules/shelljs/src/exec-child.js #881
    • test infra: mocks and skipOnWin conflict #862
    • Support for shell function completion on IDE #859
    • echo command shows options in stdout #855
    • silent does not always work #851
    • Appveyor installs the latest npm, instead of the latest compatible npm #844
    • Force symbolic link (ln -sf) does not overwrite/recreate existing destination #830
    • inconsistent result when trying to echo to a file #798
    • Prevent require()ing executable-only files #789
    • Cannot set property to of [object String] which has only a getter #752

    ... (truncated)

    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.

    dependencies 
    opened by dependabot[bot] 0
  • build(deps-dev): bump node-notifier from 5.2.1 to 8.0.1

    build(deps-dev): bump node-notifier from 5.2.1 to 8.0.1

    Bumps node-notifier from 5.2.1 to 8.0.1.

    Changelog

    Sourced from node-notifier's changelog.

    v8.0.1

    • fixes possible injection issue for notify-send

    v8.0.0

    Breaking changes:

    • Expire time for notify-send is made to match macOS and Windows with default time of 10 seconds. The API is changed to take seconds as input and converting it to milliseconds before passing it on to notify-send. See #341.

    v7.0.2

    • Updates dependencies
    • Fixes issue with haning Windows notifications when disabled (#335)

    v7.0.1

    • Fixes import of uuid, removes deprecation warnings

    v7.0.0

    Features

    • NotifySend support for app-name (#299, see docs)

    Breaking Changes

    • All notify messages now have auto bound context to make it easier to pass as variables/arguments (#306)
    • Updated snoreToast to version 0.7.0 with new input features (#293)
    • Breaking snoreToast: Sanitizing data now changes "timedout" to "timeout"

    v6.0.0

    Breaking Changes

    • Dropped support for node v6. As of v6 we currently support node versions 8, 10, and 12 (latest).
    • Updated to the latest version of SnoreToast. This removes support for the wait option in that environment as it is now always on. Prepares the way for other new features added to the WindowsToaster.

    Other

    • Update to latest version of dependencies.

    v5.4.3

    • Reverts breaking dependency upgrades from v5.4.2 as some dependencies has removed Node 6 which is a breaking change.

    v5.4.2

    • Updates dependencies

    ... (truncated)

    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.

    dependencies 
    opened by dependabot[bot] 0
Owner
Igor Souza Martins
Information Security | Node.js | Web Developer | Backend
Igor Souza Martins
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.

null 1 Aug 3, 2020
Vue-loading - Vue Placeholder loading Content With Image,Table,Status

Vue Loading Project setup npm install Compiles and hot-reloads for development

Vũ Đức Việt 3 Jan 30, 2022
A VueJS plugin for loading external JS/CSS inside VueJS environment

External Files Head Loader A VueJS plugin for loading external JS/CSS inside VueJS environment. I created this since some of my projects need to load

KarinP 0 Jun 16, 2020
An vuejs loading component ☄️

An vuejs loading component ☄️

Igor Souza Martins 19 Jul 27, 2022
🌀 A collection of loading indicators animated with CSS for VueJS

vue-spinkit A collection of loading indicators animated with CSS for VueJS Inspiration Spinkit css animated loading react-spinkit loaders.css DEMO Ins

Chanwit Piromplad 108 Sep 28, 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

Drake Costa 308 Sep 26, 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 #

Ankur Kumar 1.1k Sep 27, 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

zhoulin 88 Aug 12, 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

Naufal Rabbani 140 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.

Lucas Leandro 758 Sep 19, 2022