Добавьте анимацию прогресса в круг ⇐ CSS

[Anonymous]

Я использую таймер Pomodoro, используя HTML+CSS+JavaScript.
Я хочу иметь анимацию прогресса вокруг круга, которая начинается в верхней части круга и вращается по часовой стрелке до тех пор, пока завершая полный круг.
Я уже пробовал много разных способов написания кода, но что бы я ни делал, я не могу заставить его работать правильно.
Вот мой код:

Код: Выделить всё

const bells = new Audio('./sounds/bell.wav');
const startBtn = document.querySelector('.btn-start');
const pauseBtn = document.querySelector('.btn-pause');
const resetBtn = document.querySelector('.btn-reset');
const session = document.querySelector('.minutes');
const sessionInput = document.querySelector('#session-length');
const breakInput = document.querySelector('#break-length');

let myInterval;
let state = true;
let isPaused = false
let totalSeconds;
let initialSeconds;

const updateTimerDisplay = () => {
const minuteDiv = document.querySelector('.minutes');
const secondDiv = document.querySelector('.seconds');

let minutesLeft = Math.floor(totalSeconds / 60);
let secondsLeft = totalSeconds % 60;

secondDiv.textContent = secondsLeft < 10 ? '0' + secondsLeft : secondsLeft;
minuteDiv.textContent = `${minutesLeft}`;

// Update the circle animation
const leftSide = document.querySelector('.left-side');
const rightSide = document.querySelector('.right-side');

const duration = initialSeconds; // Total duration in seconds
const elapsed = initialSeconds - totalSeconds;
const percentage = (elapsed / duration) * 100;

let rotationRight, rotationLeft;

if (percentage  {
const sessionAmount = Number.parseInt(sessionInput.value)
if (isNaN(sessionAmount) || sessionAmount  {
if (!isPaused) {
totalSeconds--;
updateTimerDisplay();

if (totalSeconds  {
if (!state) {
isPaused = !isPaused;
pauseBtn.textContent = isPaused ? 'resume' : 'pause';
}
}

const startBreakTimer = () => {
const breakAmount = Number.parseInt(breakInput.value);
if (isNaN(breakAmount) || breakAmount  {
if (!isPaused) {
totalSeconds--;
updateTimerDisplay();

if (totalSeconds   {
clearInterval(myInterval);
state = true;
isPaused = false;
pauseBtn.textContent = 'pause';
const minuteDiv = document.querySelector('.minutes');
const secondDiv = document.querySelector('.seconds');
minuteDiv.textContent = sessionInput.value;;
secondDiv.textContent = '00';

// Reset circle animation
const leftSide = document.querySelector('.left-side');
const rightSide = document.querySelector('.right-side');
leftSide.style.transform = 'rotate(-90deg)';
rightSide.style.transform = 'rotate(-90deg)';
}

startBtn.addEventListener('click', appTimer);
pauseBtn.addEventListener('click', pauseTimer);
resetBtn.addEventListener('click', resetTimer);

Код: Выделить всё

html {
font-family: 'Fira Sans', sans-serif;
font-size: 20px;
letter-spacing: 0.8px;
min-height: 100vh;
color: #d8e9ef;
background-image: linear-gradient(-20deg, #025159 0%, #733b36 100%);
background-size: cover;
}

h1 {
margin: 0 auto 10px auto;
color: #d8e9ef;
}

p {
margin: 0;
}

.app-message {
height: 20px;
margin: 10px auto 20px auto;
}

.app-container {
width: 250px;
height: 420px;
margin: 40px auto;
text-align: center;
border-radius: 5px;
padding: 20px;
}

/*@keyframes rotate-right-from-top {
0% {
transform: rotate(-90deg);
}
100% {
transform: rotate(90deg);
}
}

@keyframes rotate-left-from-top {
0% {
transform: rotate(-90deg);
}
100% {
transform: rotate(90deg);
}
}*/

.app-circle {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
}

.circle-shape {
pointer-events: none;
}

.semi-circle {
position: absolute;
width: 100px;
height: 200px;
box-sizing: border-box;
border: solid 6px;
transform: rotate(-90deg);
transform-origin: 50% 100%;  /* Set the transform origin to the bottom center */
}

.left-side {
top: 0;
left: 0;
transform-origin: right center;
/*transform: rotate(0deg);*/
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
border-right: none;
z-index: 1;
/*animation-name: rotate-left-from-top;*/
}

.right-side {
top: 0;
left: 100px;
transform-origin: left center;
/*transform: rotate(0deg);*/
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-left: none;
/*animation-name: rotate-right-from-top;*/
}

.circle {
border-color: #bf5239;
}

.circle-mask {
border-color: #e85a71;
}

.app-counter-box {
font-family: 'Droid Sans Mono', monospace;
font-size: 250%;
position: relative;
top: 50px;
color: #d8e9ef;
}

button {
position: relative;
top: 50px;
font-size: 80%;
text-transform: uppercase;
letter-spacing: 1px;
border: none;
background: none;
outline: none;
color: #d8e9ef;
margin: 5px;
}

button:hover {
color: #90c0d1;
}

.btn-pause, .btn-reset {
display: inline-block;
}

.settings {
position: relative;
top: 100px;
display: flex;
flex-direction: column;
align-items: center;
}

.settings label {
margin: 5px 0;
color: #d8e9ef;
}

Код: Выделить всё

Pomodoro App




pomodoro
press start to begin






25:00

start
pause
reset

Session (minutes): 
Break (minutes): 

Сейчас ничего не происходит, пока таймер не достигнет половины общего времени, затем он заполняет верхнюю половину круга, и анимация начинается с середины левой части круга.
Может кто-нибудь помочь мне с этим, пожалуйста?
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/787 ... o-a-circle