Animated Top Notification Bar with Angular.js and CSS3

Preview:

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