Advertisement:
Read Later
In this tutorial, I will show you how to develop a progress bar which is gaugeable by the user using AngularJS Data Binding easily. In that regard, you can use this method to display page or image loading time using AngularJS or plain JavaScript as the back-end language.
Attributes(*):
max: This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than zero and be a valid floating point number. The default value is 1.
value: This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.
- Implement the application and the controller to the div element using ng-app and ng-controller
- To change the progress scope parameter via the input element, use ng-model.
- To bind the progress scope parameter to the progress tag as the described value, use double curly brackets like {{progress}}.
- Add the latest AngularJS library from googleapis.
- Define the application anf the controller including the pre-defined progress scope parameter in AngularJS.
----------- HTML & AngularJS -----------
<div ng-app="myApp" ng-controller="myCtrl">
<label style="color:white;fonr-weight:bold;">Value: </label><input type="text" ng-model="progress"></input><br><br>
<progress value={{progress}} max="100"></progress>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", ($scope) => {
$scope.progress = "Enter a value";
});
</script>
Result:
Enter a value up to 100 to change the progress bar.
(*) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress