Прогресс со временем ⇐ Html

[Anonymous]

Я работаю с Smarty, HTML, SASS (компиляция в CSS), JavaScript и jQuery на переднем конце и PHP на заднем конце, с парой файлов (.tpl и .php). Я также использую API REST для запросов. Figma:

До сих пор я разработал то, что присутствует во втором изображении. Описание изображения здесь "src =" https://i.sstatic.net/mk6dqmpb.png "/>
код в. URL: < /p>

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

$infoCenso = Academico_model::GETCensup(array("id_censup"=>$this->url->id_censup));
$this->assign("infoCenso", array_reverse($infoCenso['dados']));
< /code>
Код сборки карт в .tpl в соответствии с данными: < /p>




Início

Fim








">

Примечание: Эти два фрагмента кода, .tpl и .php являются ровными файлами, поскольку существует отдельный файл с именем watamadasajax.php для функциональных возможностей. < /p>
Card Sass Code: < /p>

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

.card-valores {
max-height: 100px;
width: 80%;
margin-left: 1%;
height: 60px;
overflow-y: auto;
overflow-x: hidden;
position: relative;
grid-column: span 3;

&::-webkit-scrollbar {
width: 5px;
}

&::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}

&::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid darkgrey;
border-radius: 10px;
}

.valor-box {
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;

&:not(:last-child) {
margin-bottom: 30px;
}

.valor-box-top {
display: flex;
justify-content: space-between;
margin-bottom: 10px;

&.Futuro {
border-bottom: 1px solid #23C6C8;
}

&.Atual {
border-bottom: 1px solid #FF4BE7;
}

&.Passado {
border-bottom: 1px solid #E18234;
}

.valor-box-inicio-fim {
width: 25%;
text-align: center;
padding-bottom: 11px;
}

.valor-box-valor {
display: flex;
align-items: center;
justify-content: center;
width: 60%;
font-size: 1.3rem;
font-weight: 600;
position: relative;

.valor-box-final-pag {
position: absolute;
text-align: center;
top: 30px;
}

&.encerrada {
.valor-box-final {
text-decoration: line-through;
}
}
}
}

.valor-box-bottom {
display: flex;
justify-content: space-between;

.valor-data-inicio-fim {
width: 25%;
text-align: center;

&::before {
content: "";
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
margin-left: -7px;
margin-top: -18px;
border: 1px solid #707070;
background-color: white;
}

&.Futuro {
&::before {
border: 1px solid #23C6C8;
background-color: #23C6C8;
}
}

&.Atual {
&::before {
border: 1px solid #FF4BE7;
background-color: #FF4BE7;
}
}

&.Passado {
&::before {
border: 1px solid #E18234;
background-color: #E18234;
}
}
}
}
}
}

Моя реальная трудность - понимание того, как я могу применить эти знания, чтобы анимировать его в соответствии с отчетом времени и изображением фигмы , примером на первом изображении, учитывая, учитывая, учитывая, учитывая, учитывая, учитывая, учитывая с учетом первого изображения. что мы будем в период с февраля по март 2025 года.
Как я могу это сделать?

Подробнее здесь: https://stackoverflow.com/questions/794 ... -over-time