| 123456789101112131415161718192021222324252627282930313233343536 |
- const { h } = require('preact')
- // http://codepen.io/Harkko/pen/rVxvNM
- // https://css-tricks.com/svg-line-animation-works/
- // https://gist.github.com/eswak/ad4ea57bcd5ff7aa5d42
- // circle length equals 2 * PI * R
- const circleLength = 2 * Math.PI * 15
- // stroke-dashoffset is a percentage of the progress from circleLength,
- // substracted from circleLength, because its an offset
- module.exports = (props) => {
- return (
- <svg width="70" height="70" viewBox="0 0 36 36" class="UppyIcon UppyIcon-progressCircle">
- <g class="progress-group">
- <circle class="bg" r="15" cx="18" cy="18" stroke-width="2" fill="none" />
- <circle class="progress" r="15" cx="18" cy="18" transform="rotate(-90, 18, 18)" stroke-width="2" fill="none"
- stroke-dasharray={circleLength}
- stroke-dashoffset={circleLength - (circleLength / 100 * props.progress)}
- />
- </g>
- {!props.hidePauseResumeCancelButtons ? (
- <g>
- <polygon class="play" transform="translate(3, 3)" points="12 20 12 10 20 15" />
- <g class="pause" transform="translate(14.5, 13)">
- <rect x="0" y="0" width="2" height="10" rx="0" />
- <rect x="5" y="0" width="2" height="10" rx="0" />
- </g>
- <polygon class="cancel" transform="translate(2, 2)" points="19.8856516 11.0625 16 14.9481516 12.1019737 11.0625 11.0625 12.1143484 14.9481516 16 11.0625 19.8980263 12.1019737 20.9375 16 17.0518484 19.8856516 20.9375 20.9375 19.8980263 17.0518484 16 20.9375 12" />
- </g>
- ) : null
- }
- <polygon class="check" transform="translate(2, 3)" points="14 22.5 7 15.2457065 8.99985857 13.1732815 14 18.3547104 22.9729883 9 25 11.1005634" />
- </svg>
- )
- }
|
