Package Exports

svg-progress-circle

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svg-progress-circle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

SVG-progress-circle

An addon for ember-cli that adds a component to show a sizable circle made with a SVG. This component is part of the rewrite of the frontend-app for my job at easyPEP.

easyPEP (german name): homepage
Staffomatic (english name): homepage
easyPEP github

Screenshot

DEMO

See the demo

Installation

ember install ember-cli-sass
ember install svg-progress-circle

Usage

// blockless:
{{progress-circle size="40" strokeWidth="3" percentage=model.somePercentage}}



// as a block
{{#progress-circle size="40" strokeWidth="3" percentage=model.somePercentage}}
  {{!-- inner content --}}
{{/svg-progress-circle}}



// with inner text
{{#progress-circle
  size="200"
  strokeWidth="10"
  percentage=percentage
}}

  {{#progress-circle/text
    font-size="2rem"
    font-family="inherit"
  }}
    {{percentage}}
  {{/progress-circle/text}}

{{/progress-circle}}




// with inner image
{{#progress-circle
  size="200"
  strokeWidth="10"
  percentage=percentage
    as |strokeWidth|
}}

  {{progress-circle/image
    imageUrl="assets/bill.jpg"
    strokeWidth=strokeWidth
    imageGap="2"
  }}

{{/progress-circle}}

Options

progress-circle

size default 90 -> the SVG viewport
strokeWidth default 10 -> the width of the border
percentage default 0 -> a value between 1 and 100

progress-circle/text

font-size default initial
font-family dfeault arial

progress-circle/image

imageUrl -> a standard URL to the image
strokeWidth -> an integer number to control the width of the image border
imageGap default 0 -> an integer number to control the gap between the circle and the image

CSS

The addon provides the following classes to style the file-picker:

.progress-circle
- .progress-circle__svg
  - .progress-circle__circle
  - .progress-circle__indicator(--empty|--filled|--invalid)

or you can import the default styles:

@import "svg-progress-circle";

** NOTE: After wrecking the gh-pages and messing with the repository, I had to rollback everything and properly learn how to handle this github stuff. I hope all is now properly documented, pushed and published. But also there have been Features as well. Read below.

Changelog

1.1.4

[UPDATE] Updated ember-cli-sass to 7.2.0

1.1.3

[FEATURE] Added a an SVG image component.
[FEATURE] Added a an SVG text component.
[ENHANCEMENT] Proper responsiveness provided. (Use sizes like "3em" or percentages)

0.0.9

[BUGFIX] Added the missing viewBox attribute
[ENHANCEMENT] Added tests

0.0.8

[ENHANCEMENT] Added a demo

0.0.7

[BUGFIX] Fixed check for 0 percentage

0.0.6

[FEATURE] Added animation for the progress indicator
[ENHANCEMENT] Optimized the check for valid values
[FEATURE] Added more state class names for the indicator (empty, filled, invalid)

Linting

npm run lint:js
npm run lint:js -- --fix

Running tests

ember test – Runs the test suite on the current Ember version
ember test --server – Runs the test suite in "watch mode"
npm test – Runs ember try:each to test your addon against multiple Ember versions