Posted By

aravindnair93 on 05/18/16

Tagged

Versions (?)

Last Edited at 05/18/16 05:49pm

Statistics

Viewed 205 times

Favorited by 0 user(s)

Related snippets

Loading screen Directive - AngularJS

/ Published in: JavaScript

HTML, CSS and AngularJS Directive for Showing loading screen during an Ajax call

Highlighted TextExpand

//AngularJS
.directive('loading', ['$http', function ($http)
            {
                return {
                    restrict: 'A',
                    link: function (scope, elm, attrs)
                    {
                        scope.isLoading = function () {
                            return $http.pendingRequests.length > 0;
                        };
                        scope.$watch(scope.isLoading, function (v)
                        {
                            if (v) {
                                elm.show();
                            } else {
                                elm.hide();
                            }
                        });
                    }
                };
            }])

//CSS
<style type="text/css">

.loading-screen {
            top:0;
            left:0;
            width:100%;
            height:100%;
            position: fixed;
            z-index: 20;
            background-color: #110C09;
            opacity: 0.5;
            filter: alpha(opacity=50);

}
        .loading-icon{
            margin-left: auto;
            margin-right: auto;
            margin-top: 21%;
        }
        .sk-wave {
            margin: 40px auto;
            width: 50px;
            height: 40px;
            text-align: center;
            font-size: 10px; }
        .sk-wave .sk-rect {
            background-color: #DE4197;
            height: 100%;
            width: 6px;
            display: inline-block;
            -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
            animation: sk-waveStretchDelay 1.2s infinite ease-in-out; }
        .sk-wave .sk-rect1 {
            -webkit-animation-delay: -1.2s;
            animation-delay: -1.2s; }
        .sk-wave .sk-rect2 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s; }
        .sk-wave .sk-rect3 {
            -webkit-animation-delay: -1s;
            animation-delay: -1s; }
        .sk-wave .sk-rect4 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s; }
        .sk-wave .sk-rect5 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; }

@-webkit-keyframes sk-waveStretchDelay {
            0%, 40%, 100% {
                -webkit-transform: scaleY(0.4);
                transform: scaleY(0.4); }
            20% {
                -webkit-transform: scaleY(1);
                transform: scaleY(1); } }

@keyframes sk-waveStretchDelay {
            0%, 40%, 100% {
                -webkit-transform: scaleY(0.4);
                transform: scaleY(0.4); }
            20% {
                -webkit-transform: scaleY(1);
                transform: scaleY(1); } }

</style>

//HTML
 <div data-loading class="loading-screen">
     <div class="loading-icon">
          <div class="sk-wave">
              <div class="sk-rect sk-rect1"></div>
              <div class="sk-rect sk-rect2"></div>
              <div class="sk-rect sk-rect3"></div>
              <div class="sk-rect sk-rect4"></div>
              <div class="sk-rect sk-rect5"></div>
          </div>
      </div>
 </div>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.