Animated Top Notification Bar with Angular.js and CSS3

Category: Javascript , Notification | January 27, 2016
Author: alexanderbeletsky
Views Total: 5,036
Official Page: Go to website
Last Update: January 27, 2016
License: MIT

Preview:

Animated Top Notification Bar with Angular.js and CSS3

Description:

A cool AngularJS notification component that displays responsive top bar application notifications with smooth CSS3 animations. Currently supports 3 notification types: error, warning and success.

How to use it:

Include the latest version of Angular.js JS library in your web app.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>

Include the Ng Notifications Bar’s script and stylesheet.

<link rel="stylesheet" href="path/to/ngNotificationsBar.min.css">
<script src="path/to/ngNotificationsBar.min.js"></script>

The Html.

<notifications-bar class="notifications"></notifications-bar>

Basic usage:

var app = angular.module('app', ['ngNotificationsBar']);

app.controller('main', function ($scope, notifications) {

  $scope.showError = function () {
    notifications.showError({message: 'Oops! Something bad just happend!'});
  };

  $scope.showWarning = function () {
    notifications.showWarning({message: 'Hey! Take a look here..'});
  };

  $scope.showSuccess = function () {
    notifications.showSuccess({message: 'Congrats! Life is great!'});
  };

});

Changelog:

01/27/2016

  • v0.0.16

You Might Be Interested In:


Leave a Reply