πŸ‘‡ Vue button with slideout loading indicator

Overview

vue-loading-button

Straightforward Vue button with slideout loading indicator

Component example use

try it on codesandbox

Props

Prop Type Required Default Description
loading boolean false false Controls loading indicator animation
styled boolean false false Enables opinionated sample styles

Installation

Install the package from npm by running:

$ npm i vue-loading-button

or

$ yarn add vue-loading-button

Usage

Import, register and place the component in your Vue app.

<template>
  <VueLoadingButton />
</template>
import VueLoadingButton from 'vue-loading-button'

export default {
  components: {
    VueLoadingButton,
  },
}

Unstyled component example use

Note: By default, this button component will apply minimal styles to enable you to easily add your own implementation-specific CSS. To enable the more opinionated styles seen at the top of this file, pass a `styled` prop as `true` to the button.

Accessibility

Apply attributes, such as aria-label, directly on the element to apply them to the button.

<template>
  <VueLoadingButton aria-label='Send message' />
</template>

Dev

Running example script requires @vue/cli and @vue/cli-service-global to be installed. Install globally by running npm i --g @vue/cli @vue/cli-service-global or yarn add global vue/cli @vue/cli-service-global.

Contributing

This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the issues. If you wish to work on this project:

  1. Fork the project
  2. Create your feature branch (git checkout -b new-feature-branch)
  3. Commit your changes (git commit -am 'add new feature')
  4. Push to the branch (git push origin new-feature-branch)
  5. Submit a pull request!
You might also like...
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

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

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

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.

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

Full overlay loading with spinner for Vue

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

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

Vue directive for show loading block in any element.

vue-loading Vue directive for show loading block in any element. Live demo and usage Build by vue-cli and vue-cli-component Usage General usage scrip

Comments
  • Bump acorn from 5.7.3 to 5.7.4

    Bump acorn from 5.7.3 to 5.7.4

    Bumps acorn from 5.7.3 to 5.7.4.

    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
  • Bump minimist from 1.2.0 to 1.2.3

    Bump minimist from 1.2.0 to 1.2.3

    Bumps minimist from 1.2.0 to 1.2.3.

    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
  • Bump minimist from 1.2.3 to 1.2.6

    Bump minimist from 1.2.3 to 1.2.6

    Bumps minimist from 1.2.3 to 1.2.6.

    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
  • click action

    click action

    Added a click action for easy access to the components click event, situations where a developer wants to emit an event when the button is clicked, now developers can just attach the @buttonClick to the component and pass the method they want to call on button click.

    opened by Dropcodee 0
Owner
William Lindvall
πŸ’»πŸ¦„.ws
William Lindvall
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 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
SVG component to create placeholder loading, like Facebook cards loading.

SVG component to create placeholder loading, like Facebook cards loading.

EGOIST 2.9k Sep 29, 2022
Data loading animation component for VueJS, inspired by video games loading screens.

Data loading animation component for VueJS, inspired by video games loading screens.

null 0 Sep 1, 2020
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

null 1 Apr 18, 2019
A VueJS directive can be used with forms in order to disable submit button and make every input readonly after submitting

vue2-form-loading A VueJS directive can be used with forms in order to disable submit button and make every input readonly after submitting Installati

Hussam Almoharb 13 Sep 29, 2020
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

Aleksei Iatsiuk 13 Jun 9, 2022
A StealJS plugin for loading Vue.js Single File Components (.vue)

StealJS plugin for Vue.js Single File Components. Steal (StealJS) is a module loader with sane defaults. With the steal-vue plugin, Steal can bundle V

iCanJS 8 Apr 30, 2021
Vue-simple-loading: Fork styles from tobiasahlin/SpinKit and built it for vue

vue-simple-loading Thanks for tobiasahlin/SpinKit. The css3 animation is copied from it. All the things I do is built it as a vue component. This proj

Heath Yang 14 Dec 17, 2020
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

Guillaume Chau 403 Sep 20, 2022