Как сверстать такую статистику?

245

05 февраля 2020, 02:30

Я уже год наверное просто избегаю этих статистик просто потому что не могу их верстатьКак это правильнее сделать?Это тренировочный макет и здесь нет привязки к js или тому подобное.Нужно просто сверстать

Answer 1

Решений для этого может быть несколько. Я лишь показываю одно из таких решений. На мой взгляд оно хорошее. Итак первым делом создаем просто блок (см код, это просто пример) создаете такой какой вам нужно, с конкретными значениями, которые необходимы вам. 2) Создаем внутри этого блока еще один блок, в данном случае на флексе, ставим ширину 100% 3) Внутри второго блока третий блок, пишем ширину в процентах такую, какую нужно. Выбираем цвет, эстетику, все дела.

Всё.

.block { 
    width: 540px; 
    background-color: yellow; 
    padding: 10px; 
    display: flex; 
    align-items: center; 
    flex-direction: column; 
    justify-content: center; 
} 
.stata100 { 
    width: 100%; 
    height: 20px; 
    background-color: aliceblue; 
    display: flex; 
    justify-content: flex-start; 
} 
.shkala { 
    width: 78%; 
    background-color: blue; 
}

<div class="block"><h2>Сделано на 78%</h2><div class="stata100"><div class="shkala"></div></div></div>

Второй вариант сделать градиентом, довольно простой:

.grad { 
    width: 100%; 
    height: 9px; 
    background: linear-gradient(to right, #8BC34A 0% 78%, #FFEB3B 78% 100%); 
}

<div class="grad"></div>

Answer 2

Я так обычно делаю....с цветами сами разберетесь

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <title>Title</title> 
    <style> 
        .progressbar { 
            height: 4px; 
            position: relative; 
            background: #5555552f; 
            border-radius: 4px; 
        } 
 
        .progressbar>span { 
            display: block; 
            height: 100%; 
            background-color: rgb(43, 194, 83); 
            background-image: linear-gradient(center bottom, 
                rgb(43, 194, 83) 37%, 
                rgb(84, 240, 84) 69%); 
            box-shadow: 
                inset 0 2px 9px rgba(255, 255, 255, 0.3), 
                inset 0 -2px 6px rgba(0, 0, 0, 0.4); 
            position: relative; 
            overflow: hidden; 
        } 
    </style> 
</head> 
 
<body> 
    <div class="progressbar"> 
        <span style="width: 30%"></span> 
    </div> 
</body> 
 
</html>

Answer 3

Ай? Это можно просто представить в виде двух блоков, один внутри другого. Родительский с серым фоном и внутренний блок - голубой.

Элементы div по дефолту ведут себя как display:block; width:100%;, поэтому родительскому дополнительно не нужно задавать ширину - он и так принимает 100%. Останется лишь записать высоту и фоновый цвет.

Не удержался, записал сразу c JS )) [ JsFiddle ]

*Функция, записанная в левой сиське ( )( ); выполняется сразу при загрузке.

(function(){ 
  const number = document.getElementsByClassName('number'); 
  const bubu = document.getElementsByClassName('bubu'); 
  for (let i = 0; i < number.length; i++){ 
    bubu[i].style.width = Number(number[i].innerText) + '%'; 
  } 
})();

.desc {font-family:Tahoma; font-size:20px; font-weight:bold; margin:10px;} 
.number:after {content:'%';} 
.number {margin-left: 25px;} 
 
.mama {background:#bbb; height:5px; margin: 10px;} 
.bubu {background:#099; height:5px;} 
 
body {background: #eee}

<div class="desc">UI/UX DESIGN <span class="number">75</span></div> 
<div class="mama"><div class="bubu"></div></div> 
 
<div class="desc">WEB DEVELOPMENT <span class="number">90</span></div> 
<div class="mama"><div class="bubu"></div></div> 
 
<div class="desc">MARKETING <span class="number">65</span></div> 
<div class="mama"><div class="bubu"></div></div>

Если захочется ограничить их ширину, чтобы не растягивались по всей странице - останется только весь этот код поместить в дополнительный блок с ограниченной шириной и уже разместить этот общий блок куда надо.