NativeScript-ProgressBar

A set of XML widget to create native Progress Bars in NativeScript apps.

Installation

npm install nativescript-progressbar

Screenshot

Type of available Progress Bars

• CircleProgressBar
• CircleSegmentBar
• ArcProgressBar
• LineProgressBar

Usage

CircleProgressBar

<page xmlns:pb="nativescript-progressbar">
    <pb:CircleProgressBar
        progress="{{progress}}"
        text="{{message}}"
        textSize="50"
        widthProgressBackground="20"
        widthProgressBarLine="50"
        backgroundColor="red"
        progressColor="blue"
        linearGradient="false"
        width="200"
    />
</page>

CircleSegmentBar

<page xmlns:pb="nativescript-progressbar">
    <pb:CircleSegmentBar
        progress="{{progress}}"
        text="{{message}}"
        textSize="50"
        widthProgressBackground="20"
        widthProgressBarLine="50"
        backgroundColor="red"
        progressColor="blue"
        linearGradient="false"
        width="200"
    />
</page>

ArcProgressBar

Note that ArcProgressBar doesn't have linearGradient property

<page xmlns:pb="nativescript-progressbar">
    <pb:ArcProgressBar
        progress="{{progress}}"
        text="{{message}}"
        textSize="50"
        widthProgressBackground="20"
        widthProgressBarLine="50"
        backgroundColor="red"
        progressColor="blue"
        width="200"
    />
</page>

LineProgressBar

<page xmlns:pb="nativescript-progressbar">
    <pb:LineProgressBar
        progress="{{progress}}"
        text="{{message}}"
        textSize="50"
        widthProgressBackground="20"
        widthProgressBarLine="50"
        backgroundColor="red"
        progressColor="blue"
        linearGradient="false"
        width="200"
    />
</page>

Attributes

| Property | Description | Values | Notes | |-------------------------|-------------------------------------------------|--------------|-| | progress | Sets the progress value | number 0-100 | | | text | Sets the text in the middle of the progress bar | text | | | textSize | Sets the size of the text color of the button | number | | | widthProgressBackground | Sets the size of the progress background | number | | | widthProgressBarLine | Sets the size of the progress bar | number | | | backgroundColor | Sets the color of the progress background | color | | | progressColor | Sets the color of the progress bar | color | | | linearGradient | Sets the progress bar color to gradient | boolean | Not available for ArcProgressBar |

Android Notes

• We're using Android-ProgressViewsLib by natasam