feat: add sifrr-progress-round

elements/sifrr-progress-round/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@sifrr/progress-round",
+  "version": "0.0.4",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sifrr/sifrr-elements.git"
+  },
+  "author": "Sifrr",
+  "bugs": {
+    "url": "https://github.com/sifrr/sifrr-elements/issues"
+  },
+  "homepage": "https://github.com/sifrr/sifrr-elements",
+  "private": true,
+  "main": "src/sifrrprogressround.js",
+  "module": "dist/sifrrprogressround.module.js",
+  "browser": "dist/sifrrprogressround.js",
+  "browserslist": [
+    "chrome >= 55",
+    "safari >= 10.1",
+    "opera >= 42",
+    "firefox >= 63"
+  ],
+  "scripts": {
+    "test": "rm -rf ../../.nyc_output; node ../../scripts/test/run.js ./elements/sifrr-progress-round",
+    "build": "../../node_modules/.bin/rollup -c",
+    "test-build": "cd test/public && ../../node_modules/.bin/rollup -c",
+    "test-server": "node ../../scripts/test/run.js ./elements/sifrr-progress-round -s"
+  },
+  "files": [
+    "bin",
+    "dist",
+    "src"
+  ]
+}

elements/sifrr-progress-round/rollup.config.js

@@ -0,0 +1,3 @@
+const getConfig = require('../../rollup.base');
+
+module.exports = getConfig('SifrrProgressRound', __dirname, true);

elements/sifrr-progress-round/src/sifrrprogressround.js

@@ -0,0 +1,24 @@
+import SifrrDom from '@sifrr/dom';
+
+import template from './template.html';
+
+//Sifrr Lazy Loading Picture
+class SifrrProgressRound extends Sifrr.Dom.Element {
+  static get template() {
+    return SifrrDom.template(template);
+  }
+
+  static observedAttrs() {
+    return ['progress'];
+  }
+
+  onAttributeChange(n, _, v) {
+    if (n === 'progress') this.state = { [n]: v };
+  }
+}
+
+SifrrProgressRound.defaultState = { progress: 0 };
+
+SifrrDom.register(SifrrProgressRound);
+
+export default SifrrProgressRound;

elements/sifrr-progress-round/src/template.html

@@ -0,0 +1,62 @@
+<style media="screen">
+  * {
+    box-sizing: border-box;
+  }
+
+  .circle {
+    position: relative;
+    border: 2px solid #666;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+
+  .left-half, .bar, .f50-bar {
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    top: 0;
+    left: 0;
+  }
+
+  .left-half {
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    margin: -2px;
+    clip-path: polygon(50% 0, 100% 0%, 100% 100%, 50% 100%);
+  }
+
+  .circle.over50 .left-half {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+
+  .bar {
+    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+    border: 2px solid #ffffff;
+  }
+
+  .circle.over50 .f50-bar {
+    clip-path: polygon(50% 0, 100% 0%, 100% 100%, 50% 100%);
+    border: 2px solid #ffffff;
+    box-sizing: border-box;
+  }
+
+  .circle:not(.over50) .f50-bar {
+    display: none
+  }
+
+  .circle .bar {
+    transform: rotate(${this.state.progress * 360 / 100}deg)
+  }
+</style>
+<div class="circle ${this.state.progress > 50 ? 'over50' : ''}">
+  <div class="left-half">
+    <div class="f50-bar"></div>
+    <div class="bar"></div>
+  </div>
+</div>