Выровнять индикатор выполнения равномерно по окружности

#reactjs #css #progress-bar #react-bootstrap

#reactjs #css #индикатор выполнения #react-bootstrap

Вопрос:

Мне нужно разработать приведенный ниже компонент в ReactJS . Круг в середине — это просто среднее значение (которое является div элементом), и у меня есть 12 индикаторов выполнения, выровненных под равным углом с этим кругом. Я использую React Bootstrap ProgressBar .

 <ProgressBar now={40} />

Какой наилучший подход я могу предпринять, чтобы выровнять индикатор выполнения таким образом? Фиксированный индикатор выполнения будет иметь только 12 номеров.

Ответ №1:

Вот мой подход:

Много переводов / поворотов
transform-origin используется для перемещения progressbar s из центральной точки
Установите цвет фона для центрального круга, чтобы progressbar концы не выглядывали

 .container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(15deg);
}

.average {
  border-radius: 50%;
  width: 75px;
  height: 75px;
  border: 2px solid green;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) rotate(-15deg);
  top: 50%;
  left: 50%;
  position: absolute;
  background-color: #fff;
}

.average span:first-child {
  border-bottom: 1px solid;
  margin-bottom: 1px;
}

progress {
  transform: translateY(-50%);
  top: 50%;
  left: calc(50%   29px);
  position: absolute;
  transform-origin: -29px center;
  padding: 10px;
  max-width: 90px;
}

progress:nth-child(1) {
  transform: translateY(-50%) rotate(360deg);
}

progress:nth-child(2) {
  transform: translateY(-50%) rotate(330deg);
}

progress:nth-child(3) {
  transform: translateY(-50%) rotate(300deg);
}

progress:nth-child(4) {
  transform: translateY(-50%) rotate(270deg);
}

progress:nth-child(5) {
  transform: translateY(-50%) rotate(240deg);
}

progress:nth-child(6) {
  transform: translateY(-50%) rotate(210deg);
}

progress:nth-child(7) {
  transform: translateY(-50%) rotate(180deg);
}

progress:nth-child(8) {
  transform: translateY(-50%) rotate(150deg);
}

progress:nth-child(9) {
  transform: translateY(-50%) rotate(120deg);
}

progress:nth-child(10) {
  transform: translateY(-50%) rotate(90deg);
}

progress:nth-child(11) {
  transform: translateY(-50%) rotate(60deg);
}

progress:nth-child(12) {
  transform: translateY(-50%) rotate(30deg);
}

 <div class="container">
  <progress max="100" value="40"> 40% </progress>
  <progress max="100" value="75"> 75% </progress>
  <progress max="100" value="17"> 17% </progress>
  <progress max="100" value="27"> 27% </progress>
  <progress max="100" value="44"> 44% </progress>
  <progress max="100" value="31"> 31% </progress>
  <progress max="100" value="40"> 40% </progress>
  <progress max="100" value="75"> 75% </progress>
  <progress max="100" value="17"> 17% </progress>
  <progress max="100" value="27"> 27% </progress>
  <progress max="100" value="44"> 44% </progress>
  <progress max="100" value="31"> 31% </progress>
  <div class="average">
    <span>4.9</span>
    <span>10</span>
  </div>
</div>

jsFiddle