Animated Top Notification Bar with Angular.js and CSS3

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


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