JSFiddle - React, Tailwind, and code Playground

by Mike McBride

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div ng-app="app" ng-controller="appCtrl">
    <div class="messenger" ng-class="{ 'messenger-show': message }">
        <div class="messenger-content">
          <div class="circle spinner"></div>
          <p>{{ message.title }}</p>
          <p>{{ message.content }}</p>
        </div>
    </div>
    <div class="messenger-overlay"></div>
</div>

CSS

.messenger {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 85%;
  min-width: 200px;
  max-width: 480px;
  height: auto;
  z-index: 2000;
}
.messenger *,
.messenger *:after,
.messenger *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.messenger p {
  margin: 30px 0 0;
  font-size: 28px;
  -webkit-font-smoothing: antialiased;
  line-height: normal;
  color: #fff;
}
.messenger p:nth-child(3) {
  font-size: 16px;
}
.messenger button {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
}
.messenger .circle {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 128px;
  height: 128px;
  margin-left: -64px;
}
.messenger .spinner {
  border-style: solid;
  border-width: 4px;
  border-color: transparent rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  -webkit-animation: rotate-spinner 1000ms infinite 0 linear;
  -moz-animation: rotate-spinner 1000ms infinite 0 linear;
  -ms-animation: rotate-spinner 1000ms infinite 0 linear;
  -o-animation: rotate-spinner 1000ms infinite 0 linear;
  animation: rotate-spinner 1000ms infinite 0 linear;
}
@-webkit-keyframes rotate-spinner {
  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate-spinner {
  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes rotate-spinner {
  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate-spinner {
  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate-spinner {
  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform:...

JavaScript

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

appModule.controller("appCtrl", function($scope, $rootScope, messenger) {
    messenger.showMessage(
        {
            type: 'success',
            title: 'Submitting',
            content: 'Please be patient... this can take a few seconds',
            working: true
        }
    );
    
    $scope.$on("open-message-event", function (event, message){
        $timeout(function () {
            $scope.message = message;
        }, 0);
    });
});

appModule.factory("messenger", function ($rootScope) {

   var OPEN_MESSAGE_EVENT = "open-message-event",
       DISMISS_MESSAGE_EVENT = "dismiss-message-event",
       DEFAULT_MESSAGE = "If this problem isn't resolved in a timely manner, please contact your system administrator.";

   function showMessage(message) {
       $rootScope.$broadcast(OPEN_MESSAGE_EVENT, message);
   }

   function dismissMessage() {
       $rootScope.$broadcast(DISMISS_MESSAGE_EVENT);
   }

   function setOnShowMessageHandler($scope, handler) {
       $scope.$on(OPEN_MESSAGE_EVENT, function (event, message) {
           handler(message);
       });
   }

   function setOnDismissMessageHandler($scope, handler) {
       $scope.$on(DISMISS_MESSAGE_EVENT, function (event) {
           handler();
       });
   }

   function showError(message) {
       showMessage({
           type: 'error',
           title: "There is a Problem Under the hood, but our mechanics are on it!",
           content: message || DEFAULT_MESSAGE
       });
   }

   return {
       showMessage: showMessage,
       setOnShowMessageHandler: setOnShowMessageHandler,
       dismissMessage: dismissMessage,
       setOnDismissMessageHandler: setOnDismissMessageHandler,
       showError: showError
   };
});