Выровняйте индикатор прогресса по кругу - PullRequest
Новая
       18

Выровняйте индикатор прогресса по кругу

0 голосов
/ 04 марта 2019

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

<ProgressBar now={40} />

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

enter image description here

1 Ответ

0 голосов
/ 04 марта 2019

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

  • Много перемещений / вращений
  • 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

...