How to make a percentage-based progress bar?

plugins

#1

Hi,

How can I show a progress bar which can be filled up with a color while sending or getting an API response ??
At one end of the bar I would like to show the percentage of completion. the bar should fill up with a color based on the percentage done.
Any suggestions ???

Thanks.


#4

@sagar1911

use this

https://docs.nativescript.org/angular/code-samples/ui/progress

<Progress value="{{ timerProgress }}" maxValue="100" width="200" ></Progress>

#5

Thanks Shiva, this is what I wanted exactly :slight_smile:
will implement and get back to you


#6

Shiva,
I tried it

<Progress width="100%" height="100" value="{{ timerProgress }}" onValueChanged="onValueChanged" maxValue="100"></Progress>
<Label text="{{ progressBarValue + '%' }}" color="white" width="50%" />

homePage.prototype.onUpload = function() {
    viewModel.layerVisibility = "visible";
    viewModel.progressBarVisibility = "visible";
    setInterval(() => {
        viewModel.timerProgress += 1;
    }, 300);
}

homePage.prototype.onValueChanged = function(args) {
    var progressBar = args.object;
    viewModel.progressBarValue = progressBar.value;
}

but the onValueChange function not executing. did I made any mistake ???


#7

why are you attaching methods on the protoype of homePage?


#8

I am creating a global constructor function, creating an instance of it in every page just to access the side drawer functions on all pages without mentioning them all pages.
that will work shiva. but I am getting stuck here onChangeValue event not working. !??


#9

@sagar1911
got the problem.
The event name is valueChanged not onValueChanged

<Progress width="100%" height="100" value="{{ timerProgress }}" valueChanged="onValueChanged" maxValue="100"></Progress>

#10

Still not working but I made it using like this

var interval = setInterval(() => {
        viewModel.progress += 1;
        viewModel.progressBarValue = viewModel.progress;
        if(viewModel.progress == 100) {
            stopProgress();
            viewModel.layerVisibility = "collapse";
        }
    }, 100);
    var stopProgress = function(){
        clearInterval(interval);
        viewModel.progress = 0;
    }

I have a question.
can’t we make it without using interval functions .!??


#11

@sagar1911
Well, the interval only simulates progress, but it does not reflect on the actual result. You will have to figure out your own logic for updating the progress bar values, depending on your specific needs and use cases.


#12

Okay @Pete.K , thanks
will try.