Animated Top Notification Bar with Angular.js and CSS3

Category: Javascript , Notification | January 27, 2016
Views Total:3,896 views
Official Page:Go to website
Last Update:January 27, 2016


Animated Top Notification Bar with Angular.js and CSS3


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=""></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!'});



  • v0.0.16

You Might Be Interested In:

Leave a Reply