How to use Angular SVG round progress bar with Blur background?

Question

I am working with an angular project and I have a GET and POST $http request in my application. I used before angular loading bar on the top of the screen. But as per the new requirement I need to change the current loading bar with big circular loading bar with percentage inside and blur background.

I found Angular SVG round progress bar perfect for my problem. I have checked their website and Gitlab, but I did not found that how can I integrate with my submit form action? (Basically I submit a form to the server and I get response, but It takes too long time that's why I want this circular progress bar in between)

Any help would be appreciated...:)

UPDATE

My HTML looks something like this,

<form ng-submit="ctrl.submitSearch()">
   <input type="text">
   <input type="text">
   <input type="checkbox">

   <button> Start </button>
</form>

/* Result Table */

<table>
</table>

Example circular loading bar (This is how I want) http://crisbeto.github.io/angular-svg-round-progressbar/

EDIT

currently I have that progress bar element like this,

<!--Background element when loading is in progress -->
<div class="overlay" ng-show="loading"></div>

    <!--Angular SVG circular loading bar -->
    <div class="popup"
        ng-show="loading"
        round-progress
        max="100"
        current="current"
        color="#64b8e3"
        bgcolor="#008acf"
        radius="100"
        stroke="20"
        semi="false"
        rounded="true"
        clockwise="true"
        responsive="false"
        duration="800"
        animation="easeInOutQuart">
    </div> 

And here is my current CSS,

/* CSS for adding blury black background while loading is in progress */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding-left: 0;
  padding-top: 0;
  z-index: 998;
  background-color: Black;
  opacity: .5;
} 

/* CSS for loading bar */
.popup {
  position: fixed;
  z-index: 999;
  padding-left: 45%;
}

Everything is working perfect except the position of circular loading bar, which I want on the center of the page and fixed while scrolling.

Answer 1

Assuming your posts are async this fiddle shows how you might do it.

you set up angular bindings as follows:

1) use ng-class on a div or other element you can bind the blur css class, depending on the structure of your code, you might want to unset the 'blur' css class on the progress meter.

2) on the progress meter bind the 'current' property to a ticks counter variable in your $scope.

3) when you submit your post, also kick off an $interval with a tick increment function which recurs until you get your post callback(s) which will stop the increment, reset the blur class on your div and populate the results table.

You mention you've got two posts, you might want to explicitly set the value of currentTicks when you get the first response ( for example if that represented 50% of the work you'd set it to 50).

you'll likely need to work some css absolute position magic to get your progress meter to appear in the exact right place (and mine is displayed from the outset, but you can use a bound css class to make it display:none until its ready to show)

edit: I didn't mention the blur css, I've just lifted it from BenSlight's answer here Blur effect on a div element

edit refined blur ...

form.blur {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

some additional info based on comments. - on completion of your POST you'll need to remove the blur class from the element if you've bound the class to an angular element (say bgClass) $scope.bgClass =""; will clear it.

• re: timings, the problem with using this particular visualisation as a percentage is that you have to somehow know when it's going to reach 100%. i.e. the calls always finished after 40 seconds or you are polling or getting callbacks every few seconds with an indicator of progress. The best you can do with the current set up I've outlined here and keeping it percentage based is to adjust your interval amount or the max value on the chart so that it definitely doesn't finish before your POST processing completes.

-re: positioning your overlay there's some static css applied to the progress div that makes it a bit tricky, but you can put a separate div around it and apply the following style to that (again, you'll want to add this class to the element on when you start the process, and remove it once the POST completes) - you'll probably need to tweak those padding values for best results. If you have a look around SO you'll probably find simpler cleaner css for overlays tbh. (I've updated the fiddle with an example)

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100px;
    height: 100%;
    margin: 0 auto;
    padding-left: 40%;
    padding-top: 30%;
    z-index: 5;
}