Pracujemy na znalezionym w internecie kodzie. Zamieniamy animację paska ładowania na dynamiczny pasek ładowania. Odkrywamy, że funkcja 'attr’ nie jest w stanie zawsze nas poratować, ale są inne rozwiązania, takie jak wstrzykiwanie zmiennych CSS na przykład.
Post ten napisałem w oparciu o ciekawą animację paska ładowania znalezioną w internecie, którą również polecam. Oto HTML:
<div class="progress">
<div class="color"></div>
</div>Oraz CSS:
.progress{
position: relative;
height: 10px;
width: 1110%;
border: 10px solid #f4a261;
border-radius: 15px;
}
.progress .color{
position: absolute;
background-color: #ffffff;
width: 0px;
height: 10px;
border-radius: 15px;
animation: progres 4s infinite linear;
}
@keyframes progres{
0%{
width: 0%;
}
25%{
width: 50%;
}
50%{
width: 75%;
}
75%{
width: 85%;
}
100%{
width: 100%;
}
};
Wbrew pozorom nie jest to szczególnie trudne. My jednak chcemy coś bardziej dynamicznego. Myślałem na początku o użyciu data-setu, który w data-percent miałby wartość procentową dla width, którą wyciągniemy przez attr i przypiszemy do width, ale niestety to nie chciało działać.
Znalazłem inne obejście – wstrzykiwanie zmiennych CSS poprzez atrybut style:
<div class="progress">
<div class="color" style="--percent: 10%;"></div>
</div>Teraz pora tego użyć:
.progress{
position: relative;
height: 10px;
width: 500px;
border: 10px solid #f4a261;
border-radius: 15px;
}
.progress .color{
position: absolute;
background-color: #e60d0d;
width: var(--percent);
height: 10px;
border-radius: 15px;
}Nasz progress bar załadowany na 10%. Teraz podmieńmy sobie wstrzykiwaną zmienną:
<div class="color" style="--percent: 100%;"></div>Teraz na 100%. Te sztuczkę z wstrzykiwaniem zmiennych CSS warto sobie odnotować.
