Global Mithril.js AJAX Loader

ajax-loader.scss

// Taken from http://loading.io/
uiload {
  display: inline-block;
  position: relative;
  & > div {
    position: relative;
  }
}

@-webkit-keyframes ajax-loader {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
  }

  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@-moz-keyframes ajax-loader {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-ms-keyframes ajax-loader {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes ajax-loader {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.ajax-loader {
  position: fixed; top: 0; right: 0;
}

.ajax-loader > div {
  -ms-animation: ajax-loader 1s linear infinite;
  -moz-animation: ajax-loader 1s linear infinite;
  -webkit-animation: ajax-loader 1s linear infinite;
  -o-animation: ajax-loader 1s linear infinite;
  animation: ajax-loader 1s linear infinite;
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 100px;
  border: 10px solid #f03a82;
  border-top: 10px solid rgba(0, 0, 0, 0);
  border-right: 10px solid #f03a82;
  border-bottom: 10px solid #f03a82;

  &::after {
    content: " ";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 20px 20px 20px;
    border-color: transparent transparent #f03a82 transparent;
    display: block;
    -ms-transform: translate(-16px, -13px) rotate(29deg);
    -moz-transform: translate(-16px, -13px) rotate(29deg);
    -webkit-transform: translate(-16px, -13px) rotate(29deg);
    -o-transform: translate(-16px, -13px) rotate(29deg);
    transform: translate(-16px, -13px) rotate(29deg);
  }
}

layout.html

<!-- Somewhere in your HTML body... -->
<div class="ajax-loader" style="display: none;-webkit-transform:scale(0.6)"><div></div></div>

mithril.ext.js

//
// Global ajax mod
// This shows an ajax loader any time a request is in play
//

// The loader is assumed to already be on the page
var loader = document.querySelector('.ajax-loader')
m.onLoadingStart = function () { loader.style.display = 'block' }
m.onLoadingEnd = function () { loader.style.display = 'none' }

// Monkey-patch m.request to display loader when necessary
var originalRequest = m.request
var pendingCount = 0
m.request = function () {
  if (pendingCount === 0) m.onLoadingStart()
  pendingCount += 1

  var promise = originalRequest.apply(null, arguments)
  var decrement = function() {
    pendingCount -= 1
    if (pendingCount === 0) m.onLoadingEnd()
  }
  promise.then(decrement, decrement)

  return promise
}

Perfect! Thank you :)

Nice!!!