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