http://microblog.anthonyestebe.com/2013-12-04/automatic-loader-with-ajax-call-on-angular/

In this example below you will see how to do a http://microblog.anthonyestebe.com/2013-12-04/automatic-loader-with-ajax-call-on-angular/ with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by antho1404, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright antho1404 ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <html ng-app="app">
  <head>
    <link href='https://fonts.googleapis.com/css?family=Exo+2:400,100' rel='stylesheet' type='text/css'>
    <script src="https://code.angularjs.org/1.2.3/angular.min.js"></script>
  </head>
  <body ng-controller="myCtrl">
    <div class="loader"></div>
    <a href="#" ng-click="loadSomething()">Load something</a>
  </body>
</html> 

/*Downloaded from https://www.codeseek.co/antho1404/httpmicrobloganthonyestebecom2013-12-04automatic-loader-with-ajax-call-on-angular-FcGov */
    body { background-color: #FF667A; padding: 0; margin: 0; color: #222; text-align: center; font-family: 'Exo 2', sans-serif; }

$color: #00FF35;
$size: 30px;

.loader {
  &.active {
    top: 20px;
  }
  position: absolute;
  top: -$size * 2;
  left: calc(50% - #{$size});
  width: $size;
  height: $size;
  border: solid $size / 2 $color;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 100%;
  animation: spin 1s infinite linear;
  transition: top 300ms;
}

a {
  display: inline-block;
  padding: 20px;
  background-color: $color;
  border: solid 1px darken($color, 5%);
  border-radius: 3px;
  color: darken($color, 40%);
  text-shadow: 1px 1px darken($color, 10%);
  font-size: 2em;
  margin-top: 100px;
  text-decoration: none;
  &:hover {
    background-color: darken($color, 10%);
  }
  &:active {
    background-color: darken($color, 15%);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/*Downloaded from https://www.codeseek.co/antho1404/httpmicrobloganthonyestebecom2013-12-04automatic-loader-with-ajax-call-on-angular-FcGov */
    App = angular.module "app", []

loader = -> angular.element(document.querySelector(".loader"))
start  = -> console.log(loader());loader().addClass "active"
stop   = -> loader().removeClass "active"

App.config ($httpProvider) ->
  $httpProvider.responseInterceptors.push ->
    (promise) ->
      promise.then (response) -> 
        stop()
        response
      , (response) ->
        stop()
        response
  $httpProvider.defaults.transformRequest.push (data, headersGetter) ->
    start()
    data

    
App.controller "myCtrl", ($scope, $http) ->
  $scope.loadSomething = ->
    $http.get "http://microblog.anthonyestebe.com/2013-12-04/automatic-loader-with-ajax-call-on-angular/"

Comments