Можно ли реализовать такой прогресс бар:
Если у кого нибудь есть сниппет данного скрипта, поделитесь пожалуйста. Прогресс бар делиться на с этапа. Работает как обычный от 0% до 100%
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуМожно ли реализовать такой прогресс бар:
Если у кого нибудь есть сниппет данного скрипта, поделитесь пожалуйста. Прогресс бар делиться на с этапа. Работает как обычный от 0% до 100%
Не нужен никакой яваскрипт, достаточно CSS-градиента.
Вот (в переменную --gap
я записал ширину промежутка между этапами для удобства изменения):
let root = document.documentElement;
function changeProgress() {
root.style.setProperty('--color2', "var(--completedStageColor)");
}
:root {
--gap: 20px;
--completedStageColor: navy;
--futureStageColor: #70B2D4;
--color1: var(--completedStageColor);
--color2: var(--futureStageColor);
--color3: var(--futureStageColor)
}
.prorgress {
display:inline-block;
width:400px;
height:20px;
background-image:linear-gradient(to right,
var(--color1) 0%,
var(--color1) calc((100% - var(--gap) * 2) / 3),
transparent calc((100% - var(--gap) * 2) / 3),
transparent calc((100% - var(--gap) * 2) / 3 + var(--gap)),
var(--color2) calc((100% - var(--gap) * 2) / 3 + var(--gap)),
var(--color2) calc((100% - var(--gap) * 2) / 3 * 2 + var(--gap)),
transparent calc((100% - var(--gap) * 2) / 3 * 2 + var(--gap)),
transparent calc((100% - var(--gap) * 2) / 3 * 2 + var(--gap) * 2),
var(--color3) calc((100% - var(--gap) * 2) / 3 * 2 + var(--gap) * 2),
var(--color3) 100%
);
}
0% <div class="prorgress"></div> 100%<br><br>
<button onclick="changeProgress();">change progress</button>
--color1
, отвечающим за цвет определенного этапа.
12 июл 2021 в 11:39
Пример svg с маской и плавным движением прогрессбара
В примере вместо animate
должен работать js скрипт загрузки
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 487 64" style="enable-background:new 0 0 487 64;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#mask);}
.st1{fill:none;stroke:#00A99D;stroke-width:37;stroke-miterlimit:10;}
.st2{fill:none;stroke:#29ABE2;stroke-width:37;stroke-miterlimit:10;}
</style>
<g>
<defs>
<path id="SVGID_1_" d="M162,34L162,34c0,9.9-8.1,18-18,18H42c-9.9,0-18-8.1-18-18v0c0-9.9,8.1-18,18-18h102
C153.9,16,162,24.1,162,34z M299,16H197c-9.9,0-18,8.1-18,18v0c0,9.9,8.1,18,18,18h102c9.9,0,18-8.1,18-18v0
C317,24.1,308.9,16,299,16z M454,16H352c-9.9,0-18,8.1-18,18v0c0,9.9,8.1,18,18,18h102c9.9,0,18-8.1,18-18v0
C472,24.1,463.9,16,454,16z"/>
</defs>
<clipPath id="mask">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g class="st0">
<line class="st1" x1="-6.5" y1="34.5" x2="495.5" y2="34.5"/>
</g>
<g class="st0">
<line class="st2" x1="-6.5" y1="34.5" x2="0" y2="34.5">
<animate attributeName="x2" from="0" to="495.5" begin="1s" dur="2s" repeatCount="indefinite" />
</line>
</g>
</g>
</svg>