Press "Enter" to skip to content

Light Dialog Plugin with Loading Animation and Image Preview

vue-dialog-loading is a lightweight dialog plug-in for creating a simple clean dialog, loading on-screen animations, and stylized images on the app.

vue loading indicator, vue spinner while loading, vuejs loading plugin, vue loading screen, vue js load more on scroll, set loader until component not loaded vue js

Feature-rich Messaging Windows for Alerts, Dialogs, Lightboxes Library | jQuery.madWindow

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-dialog-loading

# NPM
$ npm install vue-dialog-loading --save

1. Import the component.

import Dialog from 'vue-dialog-loading';

2. Register the component and pass the global settings:

Vue.use(Dialog, {
  // global settings here
})

3. Create an alert or confirmation dialog.

// create a new dialog
this.$dialog({

  // dialog title
  title: 'Dialog Title',

  // dialog content
  content: 'Dialog Content',
  
  // background color
  background:'rgba(0,0,0, 0.5)',

  // auto-dismiss after 3s
  delay: 3000, 

  // custom buttons
  btns: [{
    label: 'OK',
    color: '#09f',
  },
  {
    label: 'Cancel',
    color: '#444',
    ghost: true,
    callback: () => {
      // do something
    },
  }],

});

4. Create a loading screen.

this.$loading.show({
  delay: 500, 
  background: '#444'
});
// Loading Component:
<LoadingCom />
// hide
this.$loading.hide();

5. Create a lightbox image.

this.$ImagePreview.show(imgUrl);

Clean Dialog & Loading Component, vue-dialog-loading Plugin/Github, vue 3 loading spinner, vue show loading while rendering


See Demo And Download

Official Website(leyap): Click Here

This superior jQuery/javascript plugin is developed by leyap. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.