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
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

Android Notes

• We're using Android-ProgressViewsLib by natasam