I'm currently building a CSS audio player and I am setting the width of a div to represent the current progress of the audio using a [style] like below, and it works just great:
<div class="player-progress-current" [style.width.%]="(currentTime * 100)/duration"></div> I also want to draw a little circle at the end of the progress div above by setting the 'left' CSS property of another class. This would be in english:
(Parent Width px) - (Progress Width px) I've tried using the calc() function but it doesn't like it and the percentage calculated wouldn't know to use the width I think....
<div class="player-progress-handle" [style.left.px]="calc(100% - (currentTime * 100)/duration"></div> The CSS classes are:
.player-progress-current { width: 100%; height: 1px; background-color: red; } .player-progress-handle { position: relative; bottom: 1px; border: 1px solid #f50; border-radius: 100%; height: 8px; width: 8px; background-color: #f50; box-sizing: border-box; margin-top: -4px; margin-left: -4px; } Any ideas how the best way to do this is? I'm sure I can find a hacky way but would like the find the correct way
