Animated Badge Notification

Modern Development/Service Portal Widgets/Animated Notification Badge/README.md

@@ -0,0 +1,18 @@
+# 🔔 Animated Notification Badge
+
+This snippet demonstrates how to create an animated notification badge using native ServiceNow client-side capabilities, without relying on direct DOM manipulation or inline styles.
+It uses AngularJS and CSS to apply a pulsating animation to the badge, ideal for Portal widgets that require attention-grabbing indicators.
+
+![Demo of animated badge](./animated-badge.gif)
+
+## 📦 Files
+
+- `notification-badge.html` – Badge markup with conditional visibility
+- `notification-badge.css` – Keyframe animation and badge styling
+- `notification-badge.js` – Logic to trigger or reset badge visibility
+
+## 🚀 How to Use
+
+1. Copy the HTML, CSS, and client script into your custom Portal widget.
+2. Bind the badge visibility to a condition (e.g., number of unread messages).
+3. Use the `animate__pulse` class to trigger attention-grabbing animations.

Modern Development/Service Portal Widgets/Animated Notification Badge/notification-badge.css

@@ -0,0 +1,35 @@
+.notification-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.notification-icon {
+  font-size: 24px;
+  color: #333;
+}
+
+.notification-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  background-color: #e74c3c;
+  color: white;
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 50%;
+  font-weight: bold;
+  animation-duration: 0.6s;
+  animation-fill-mode: both;
+}
+
+.notification-pulse {
+  animation-name: pulseScale;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes pulseScale {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}

Modern Development/Service Portal Widgets/Animated Notification Badge/notification-badge.html

@@ -0,0 +1,9 @@
+<div class="notification-wrapper">
+  <i class="fa fa-bell notification-icon" aria-hidden="true"></i>
+  <span 
+    class="notification-badge" 
+    ng-class="{'notification-pulse': c.hasNewNotification}" 
+    ng-if="c.hasNewNotification">
+    {{ c.badgeCount }}
+  </span>
+</div>

Modern Development/Service Portal Widgets/Animated Notification Badge/notification-badge.js

@@ -0,0 +1,6 @@
+api.controller=function($scope) {
+  var c = this;
+
+  c.badgeCount = 3;
+  c.hasNewNotification = c.badgeCount > 0;
+};