Как сделать эти линии-прогрессбары? Искал в интернете не нашёл.
-
1bootstrap имеет свои аналоги. progress bar– michael_bestCommented 30 мар. 2019 в 18:05
-
w3schools.com/tags/tag_progress.asp– user262779Commented 30 мар. 2019 в 18:11
-
Вот ответ на Bootstrap: ru.stackoverflow.com/a/950094/262779 Всё остальное делается стилями. Удачи!– user262779Commented 30 мар. 2019 в 18:12
-
Благодарю. Простите за тупой вопрос .– ZakCommented 30 мар. 2019 в 18:12
-
1@Zak он не тупой, он просто начальный, все мы учились когда-то. Всё ок.– user262779Commented 30 мар. 2019 в 18:13
|
Показать ещё 4 комментария
4 ответа
Вариантов тысячи, я использовал вариант javascript
+ svg
как наиболее гибкий:
[
['UI/UX DESIGN', 75, 'red'],
['WEB DEVELOPMENT', 90, 'green'],
['MARKETING', 65, 'blue'],
].forEach(el => document.body.append(progress(el)))
function progress(el) {
let div = document.createElement('div');
let pathCfg = `class="fill" d="M0,5 L${el[1]*2},5" stroke="${el[2]}"`;
div.innerHTML = `
<div>${el[0]} ${el[1]}%</div>
<svg viewbox="0 0 200 10" width="400" height="20">
<path d="M0,5 L200,5" stroke="lightgray"></path>
<path ${pathCfg} opacity="0.1" stroke-width="2"></path>
<path ${pathCfg}></path>
</svg>
`;
return div;
}
body {
font-family: arial;
margin-top: 0;
overflow: hidden;
}
path.fill {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 3s ease-in-out forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<h2>Professional Skills</h2>
И согнул его чтобы показать гибкость =)
[
['UI/UX DESIGN', 75, 'red'],
['WEB DEVELOPMENT', 90, 'green'],
['MARKETING', 65, 'blue'],
].forEach(el => document.body.append(progress(el)))
function progress(el) {
let div = document.createElement('div');
let pathCfg = `class="fill" d="${sine(0, el[1])}" stroke="${el[2]}"`;
div.innerHTML = `
<div>${el[0]} ${el[1]}%</div>
<svg viewbox="0 0 200 10" width="400" height="20">
<path d="${sine(0, 200)}" stroke="lightgray"></path>
<path ${pathCfg} opacity="0.1" stroke-width="2"></path>
<path ${pathCfg}></path>
</svg>
`;
return div;
}
function sine(x0, x1){
let path = 'M0,5 ';
for (let x = x0; x<x1; x+=1)
path += `L${x*2},${5+Math.sin(x/5)*3} `;
return path;
}
body {
font-family: arial;
margin-top: 0;
overflow: hidden;
}
path{
fill:none;
}
path.fill {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 3s ease-in-out forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<h2>Professional Skills</h2>
-
Для начинающего верстальщика самое оно, понятнее некуда :)– user262779Commented 30 мар. 2019 в 18:14
-
-
@Qwertiy да, html + css это круто, но нет, но Вам + Commented 30 мар. 2019 в 20:33
-
-
@Qwertiy да я понимаю, но гибкости меньше, вот я могу синусоидой её завернуть =) Commented 30 мар. 2019 в 20:35
div {
height: 4px;
background: silver;
}
div::before {
content: "";
display: block;
width: 80%;
height: 100%;
background: blue;
}
<div></div>
-
Извини, когда писал не видел твой ответ. +1 Вот это вариант для начинающего, спасибо Qwertiy– user262779Commented 30 мар. 2019 в 20:34
Ванильный JS. (Компонент)
class Progress {
constructor(node, width) {
this.node = node;
this.defaultWidth = width;
if(!this.node) return;
this.animation = this.animation.bind(this);
this.label = this.node.querySelector(".progress__label-progress");
this.bar = this.node.querySelector(".progress__bar-progress");
this.interval = setInterval(this.animation, 1000);
}
animation() {
this.defaultWidth >= 99 ? clearInterval(this.interval) : null;
this.defaultWidth++;
this.label.textContent = this.defaultWidth + "%";
this.bar.style.width = this.defaultWidth + "%";
if(this.defaultWidth < 99) {
window.requestAnimationFrame(this.animation);
}
}
}
const root = document.querySelector(".progress");
var label = root.querySelector(".progress__label-progress").textContent.replace(/%/g, "");
var obj = new Progress(root, +label);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
}
.progress__label {
text-transform: uppercase;
margin-bottom: 15px;
}
.progress__bar {
width: 100%;
background-color: #d8d8d8;
}
.progress__bar-progress {
width: 10%;
height: 5px;
background-color: #51aca7;
}
<div class="container">
<div class="progress">
<div class="progress__label">
Marketing
<span class="progress__label-progress">10%</span>
</div>
<div class="progress__bar">
<div class="progress__bar-progress"></div>
</div>
</div>
</div>
-
Смотрится супер! +1– user262779Commented 30 мар. 2019 в 20:52
Простой вариант на HTML и CSS
$('input[type="number"]').on('change', function(){
$('.progress-bar-edit .background')
.css('width', $(this).val()+'%');
});
.progress-bar, .progress-bar-edit {
display: block;
width: 100%;
height: 4px;
background: #ddd;
}
.background {
display: block;
width: 40%;
height: 4px;
background: #07f;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-bar">
<div class="background"></div>
</div>
<br>
<br>
<div class="progress-bar-edit">
<div class="background"></div>
</div>
<input type="number" min="0" value="40" max="100" step="1">
-
2HTML и CSS + JS! :))) +1. Учится ведь только ТС, какой JS? Для кругозора пусть варианты видит– user262779Commented 30 мар. 2019 в 20:29
-
1
-
так тут еще и JQuery, что может быть не приемлемо и все же указать бы в описании– romanownCommented 11 окт. 2022 в 10:05
-
Вариант тут только на HTML и CSS, как я указал выше, механика используется лишь для демонстрации работы прогресс бара. Даже если данный код кому-то нужен будет, то переписать его на JS - труда не составит.– De.MinovCommented 12 окт. 2022 в 3:07