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

Related tags

Loader vue-blockui
Overview

vue-blockui

npm npm vue2

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

Table of contents

Installation

npm install --save vue-blockui

Use Component

Install all the components:

import Vue from 'vue'
import BlockUI from 'vue-blockui'

Vue.use(BlockUI)

** ⚠️ If You see some errors during webpack compilation, you might be missing the right configuration for loading css in your webpack.config.js. **

Under "rules", you should have below configuration:

    {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
    }
  • Be aware that you should have configured style-loader and css-loader in your package.json to support above rule.
npm install style-loader css-loader --save-dev    

⚠️ You might need to configure your bundler to support .vue files. More info in the official documentation.

I would recommend you to create your VUE project using vue-cli, then it should included vue-loader in webpack by default.

Usage

Prop Name Description
message Message to be shown in loading screen
url Optional Field, image including svg/gif/png/jpg etc, you can use any animated/static image supported by img tag. Please be aware that you'd better import the image resource then use it instead of directly using relative image path. Example can be found in this document. If url attribute presents and not empty, it will ignore html attribute
html (Deprecated, suggest to use [slot] option instead), Optional Field, you can insert html template to icon area, this enables you to utilize external animated fonts/css libaries. eg. fontawesome or Spinkit etc. Don't forget to import related css & fonts into project by yourself
[slot] Directly use any html template or other Vue Component, it will replace the icon part, see examples in readme.

Then, you can combine with v-if/v-show to show or hide the BlockUI.

In your Code

Please be aware, if you are using webpack and with file-loader to add finger print to your asserts, You can not add relative image resouce path directly in BlockUI component. Please use import to get the image, then pass it to the directive.

import Vue from 'vue'
import BlockUI from 'vue-blockui'
import loadingImage from './assets/logo.png'

Vue.use(BlockUI)
<BlockUI :message="msg" :url="url"></BlockUI>

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      url : loadingImage   //It is important to import the loading image then use here
    }
  }
}

or

<BlockUI :message="msg" :html="html"></BlockUI>

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      html: '<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>',  //this line demostrate how to use fontawesome animation icon 
    }
  }
}

Or using inline html or component [slot example]

<BlockUI :message="msg">
  <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
</BlockUI>

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  }
}

Styling Customization

You can override BlockUI sytlings based on your needs. Check the class defined for BlockUI using develop tool in your favorite browser for more details.

The layout hierarchy desmostrated in below, I did not use simple class like "label" due to the risk of being polluted by other external css.

.loading-container {
  .loading-backdrop {
    //the backdrop falls in here, you can override the opacity etc.
  }
  .loading {
    .loading-icon {
      //the image or inserted html will be put here
    }
    .loading-label {
      //the label showing on loading screen
    }
  }
}

Demo Screens

Check below screenshots (More to come):

Below screen is using animated gif/svg Sample used animated gif/svg

Below screen is using font awesome css animation Sample used css animation

Below screen is using spinkit css animation Sample used css animation

Sample config for using spinkit css animation:

<BlockUI :message="msg">
  <div class="sk-wave">
    <div class="sk-rect sk-rect1"></div>
    <div class="sk-rect sk-rect2"></div>
    <div class="sk-rect sk-rect3"></div>
    <div class="sk-rect sk-rect4"></div>
    <div class="sk-rect sk-rect5"></div>
  </div>
</BlockUI>

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  }
}

Plugin Development

Installation

The first time you create or clone your plugin, you need to install the default dependencies:

npm install

Watch and compile

This will run webpack in watching mode and output the compiled files in the dist folder.

npm run dev

Use it in another project

While developping, you can follow the install instructions of your plugin and link it into the project that uses it.

In the plugin folder:

npm link

In the other project folder:

npm link vue-blockui

This will install it in the dependencies as a symlink, so that it gets any modifications made to the plugin.

Publish to npm

You may have to login to npm before, with npm adduser. The plugin will be built in production mode before getting published on npm.

npm publish

Manual build

This will build the plugin into the dist folder in production mode.

npm run build

License

MIT

Comments
  • Vuetifyjs progress does appear when assigned to :html

    Vuetifyjs progress does appear when assigned to :html

    Im using vuetify and want to display below html

    In template <BlockUI message="" :html="html"> </BlockUI>

    In data: html: "<v-progress-circular :width=\"3\" indeterminate color=\"red\"></v-progress-circular>",

    Circular progress bar from vuetify does not show up - how can I fix this ?

    opened by o1lab 3
  • Allow setting content via slot

    Allow setting content via slot

    Would it be possible to allow setting the blockui's content using a slot? That way we can pass in html (e.g. a font-awesome spinning icon) as opposed to the attribute.

    opened by Azuka 3
  • blockui load twice !!!

    blockui load twice !!!

    Hello, Have a nice day, I am using blockui when trying to fetch data from server and it works fine , but when I do submit to the form it load again , even when I let loading = false.?

    opened by allaghi 2
  • Is it possible to block part of UI

    Is it possible to block part of UI

    Is it possible to block UI for only one of the vue ui components in page.

    This can be parent html tag under which block-ui tag is placed.

    This would be a really cool feature.

    opened by o1lab 2
  • Unable to Override the Css of Block UI

    Unable to Override the Css of Block UI

    HI, In your documentation, you say that we can override the CSS of the Block UI component. I've tried by many way to change the color of the background of the loading div of your component and get rid of the box-shadow but with no success. The documentation isn't really clear on that purpose.

    I've tried by doing this

    <style scoped>
      .loading-container.loading {
        color:red !important;
            box-shadow: none;
        }
    </style>
    

    this

       .loading {
        color:red !important;
            box-shadow: none;
        }
    

    this

       <BlockUI >
             <div class="loading">
                    <tree-loader></tree-loader>
              </div>
      </BlockUI>
    

    And even this

    <BlockUI style="box-shadow: none; color: red;" >
                    <tree-loader></tree-loader>
    </BlockUI>
    

    I don't know if it's just a bug or that there is no real way to override the css other than pure javascript. The documentation isn't clear on that topic

    Otherwise the tool is really great Thank you!

    opened by Serenityxl 1
Owner
Jeff
A Passionate & Easy-Going Family Man.
Jeff
⏳ 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

Pongsatorn 312 Sep 4, 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
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 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
Vue-ac-loader is a plugin for show a full screen loader on requests.

AC Loader (vue-ac-loader) vue-ac-loader is a plugin for show a full screen loader on requests.

miSkoMV 0 Jan 21, 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
👇 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

William Lindvall 39 Jun 29, 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
Full overlay loading with spinner for Vue

Full overlay loading with spinner for Vue

Pygmy Slow Loris 161 Jul 16, 2022
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

Duoc Nguyen 637 Oct 5, 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

TS Pro 35 Sep 23, 2022
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

岛书 141 May 8, 2022