Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.
Progress Bar
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.
Как се създава диагонален progress bar с linear-gradient
Ключът към ефектен progress bar е правилното използване на linear-gradient с точно зададени процентни стойности. Когато два цвята започват и свършват на една и съща позиция (например 25%, 50%, 75%), преливката изчезва и се получават ясни, остри линии. Така можем да създадем повтаряща се диагонална шарка, подходяща за индикатор на прогрес.
Стъпка по стъпка: създаване на шарката
- Създайте фон с
linear-gradientпод ъгъл 45 градуса. - Задайте редуващи се цветове (например green и white).
- Определете цветови стопове така, че да съвпадат:
- green до 25%
- white от 25% до 50%
- green от 50% до 75%
- white от 75%
- Създайте нов елемент
<div>с класprogress-bar. - Преместете градиента като
backgroundна този елемент. - Задайте
height: 20px;и по желание добаветеborder: 1px solid.
Резултатът е отделен елемент с диагонална повтаряща се шарка, подходящ за визуализация на прогрес.
Използвани CSS свойства
linear-gradient()– създава градиентен фон с определен ъгъл и цветови стоповеbackground– задава фона на елементаheight– определя височината (например 20px)border– добавя рамка около progress bar-аclass– използва се за отделяне и стилизиране на елемента чрез CSS
