https://github.com/kabirbaidhya/angular-ui-block

Angular UI Block Module
https://github.com/kabirbaidhya/angular-ui-block

angular block spinner ui ui-block

Last synced: 30 days ago
JSON representation

Angular UI Block Module

• Host: GitHub
• URL: https://github.com/kabirbaidhya/angular-ui-block
• Owner: kabirbaidhya
• License: mit
• Created: 2016-10-19T16:58:08.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T14:44:48.000Z (about 2 years ago)
• Last Synced: 2024-11-28T15:05:18.014Z (about 2 months ago)
• Topics: angular, block, spinner, ui, ui-block
• Language: JavaScript
• Size: 166 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Angular UI Block

[![npm version](https://img.shields.io/npm/v/angular-ui-block.svg?style=flat-square)](https://www.npmjs.com/package/angular-ui-block) [![npm downloads](https://img.shields.io/npm/dt/angular-ui-block.svg?style=flat-square)](https://www.npmjs.com/package/angular-ui-block)

Angular UI Block Module

## Installation

```bash

# Using npm

$ npm install angular-ui-block --save

# Using Yarn

$ yarn add angular-ui-block

# Using Bower

$ bower install angular-ui-block --save

```

Include the package using common js `require()` or ES2015 `import`:

```javascript

var angularUiBlock = require('angular-ui-block');

// ES2015+

import angular from 'angular';

import angularUiBlock from 'angular-ui-block';

```

Or, using `` tag:

```html

<script type="text/javascript" src="/path/to/angular-ui-block/dist/angular-ui-block.min.js">

```

Now add the module as a dependency to your app module:

```javascript

angular.module('app', [angularUiBlock]);

// Or

angular.module('app', ['angularUiBlock']);

```

## Styles

Also, you need to include the css if you want to use the default style.

```html

```

Or, if you prefer to have your own custom style then just write your own like this:

```html

    .ui-block-wrapper .ui-block-overlay {

        position: absolute;

        top: 0;

        right: 0;

        bottom: 0;

        left: 0;

        z-index: 20;

        background: rgba(255, 255, 255, 0.5);

    }

    .ui-block-wrapper .ui-block-spinner {

        top: calc(50% - 40px);

        left: 0;

        right: 0;

        z-index: 21;

        position: absolute;

        text-align: center;

    }

```