angular-progress-arc

WebJar for angular-progress-arc

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	angular-progress-arc
Last Version	1.0.0
Release Date	Jun 3, 2017
Type	jar
Description	angular-progress-arc WebJar for angular-progress-arc
Project URL	http://webjars.org
Source Code Management	https://github.com/mathewbyrne/angular-progress-arc

Download angular-progress-arc

Filename	Size
angular-progress-arc-1.0.0.pom
angular-progress-arc-1.0.0.jar	10 KB
angular-progress-arc-1.0.0-sources.jar	22 bytes
angular-progress-arc-1.0.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/angular-progress-arc/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>angular-progress-arc</artifactId>
    <version>1.0.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/angular-progress-arc/
implementation 'org.webjars.npm:angular-progress-arc:1.0.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/angular-progress-arc/
implementation ("org.webjars.npm:angular-progress-arc:1.0.0")

Apache Buildr

'org.webjars.npm:angular-progress-arc:jar:1.0.0'

Apache Ivy

<dependency org="org.webjars.npm" name="angular-progress-arc" rev="1.0.0">
  <artifact name="angular-progress-arc" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='angular-progress-arc', version='1.0.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "angular-progress-arc" % "1.0.0"

Leiningen

[org.webjars.npm/angular-progress-arc "1.0.0"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.npm : angular	jar	[1.2.19,)

Project Modules

There are no modules declared in this project.

angular-progress-arc

An AngularJS directive for displaying a circular progress meter.

Demo

Features

• Displays a circular progress meter.
• Utilises SVG for rendering.
• Adjustable dimensions, color and thickness.
• No additional dependencies outside of AngularJS.

Installation

This module can be installed using bower:

bower install angular-progress-arc --save

Otherwise, simply add the angular-progress-arc.min.js file to your project.

Usage

Include the script in your application and include the angular-progress-arc module as a dependency in your application module.

angular.module('myApp', ['angular-progress-arc']);

Add a progress-arc element to your application as required.

<progress-arc
    size="{integer}"
    stroke="{string}"
    stroke-width="{integer}"
    complete="{expression}"
    counter-clockwise="{string}"
    background="{string}">
</progress-arc>

Attributes

• size defines the pixel width and height for the svg element. This defaults to 200.
• stroke defines the color of the progress arc. This should be a valid stroke property for an SVG circle element. This defaults to black.
• stroke-width defines the width of the progress arc line in pixels. This should be a value between 1 and size / 2. This defaults to 20.
• complete is an expression that should evaluate to a float value between 0.0 and 1.0; where 0.0 is an empty progress arc, and 1.0 is a full ring.
• counter-clockwise is a boolean value that will render the progress arc in a counter-clockwise direction. Any value Javascript would recognise as true will be treated as such, with the exception of the literal string false which will be treated as a boolean false.
• background defines the color of the ring background. If not defined, no background is rendered.

Styling

As well as using attributes of the directive element, a progress arc can be styled using CSS.

// Use a more complex selector in your application to avoid styling other SVG elements.
circle {
    stroke: rgba(0, 0, 0, 0.1);
    stroke-linecap: round;
}

The stroke-dashoffset property is used to render the position of the progress arc, so adding a transition for this property will result in smoother transitions between progress values.

circle {
    transition: stroke-dashoffset 0.1s linear;
}

If you use CSS for styling, avoid setting the following properties that are used to calculate the progress arc position:

• stroke-width
• stroke-dasharray
• stroke-dashoffset

Defaults

This module provides a service for configuring application-wide defaults for progress-arc directives. To change default values, inject the progressArcDefaultsProvider into your module's config method:

myApp.config(['progressArcDefaultsProvider', function (progressArcDefaultsProvider) {
    progressArcDefaultsProvider
        .setDefault('background', '#aaa')
        .setDefault('size', 300);
});

The values you can configure this way are size, strokeWidth, stroke and background.

License

angular-progress-arc is licensed under the MIT license. See LICENSE for details.

Versions

Version
1.0.0 Jun 3, 2017