Для цвета правую часть нашего круга коричневый, мы будем использовать простой линейный градиент:

background-image:
  linear-gradient(to right, transparent 50%, #655 0);

КакВы можете видеть на рисунке 2, это все, что нужно.Теперь мы можем приступить к укладке псевдо-элемент, который будет выступать в качестве маски:

.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
}

Вы можете увидеть на рисунке 3, где наша псевдо-элемент в настоящее время находится по отношению к круговой элемент.В настоящее время, это не стиль, а он ничего не покрыть.Это всего лишь невидимый прямоугольник.Для начала укладки, давайте сделаем несколько замечаний:

• Потому что мы хотим, чтобы он покрытия коричневый часть нашего circle, мы должны применить зеленый фон с ней, используя background-color: inherit, чтобы избежать дублирования, а мы хотим, чтобы иметь тот же цвет фона, как его родитель.
• Мы хотим, чтобы вращаются вокруг center, который находится на середине левой стороны псевдо-элемента, таким образом, мы должны применить transform-origin из 0 50% к нему, или просто left .
• Мы не хотим, чтобы это было прямоугольник, как это делает его истекать кровью за края круговой диаграммы, так что мы должны либо применить overflow: hidden к .pie, или соответствующее border-radius, чтобы сделать егополукруг .

Собираем все вместе, CSS Наш псевдо-элемент будет выглядеть следующим образом:

.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
}

Примечание: Будьте осторожны, чтобы не использовать background: inherit;, а background-color: inherit;, в противном случае градиент будет наследоваться слишком

Наша круговая диаграмма в настоящее время выглядит как на рисунке 4. Это где начинается веселье!Мы можем начать вращая псевдо-element, применяя rotate() преобразования.Для 20% мы пытались достичь, мы можем использовать значение 72deg (0,2 × 360 = 72), или .2turn, который является гораздо более удобным для чтения.Вы можете увидеть, как это выглядит на несколько других ценностей, а также, на рисунке 5 .

Мы могли бы быть склонны думать, что мы сделали, но, к сожалению, это не так просто.Наша круговая диаграмма работает отлично подходит для отображения процент от 0 до 50%, но если мы попытаемся изобразить вращение на 60% (с применением .6turn), Рисунок 6 происходит.Не теряем надежды, все же, хотя, как мы можем — и мы будем — это исправить

Если мы думаем о 50% -100% процент в качестве отдельной проблемы, мы могли бы заметить, что мы можем использовать перевернутую версию предыдущей solution для них: коричневый псевдо-элемент, вращающийся с 0 к .5turn, соответственно.Таким образом, для 60% пирога, код псевдо-элемент будет выглядеть следующим образом:

.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background: #655;
  transform-origin: left;
  transform: rotate(.1turn);
}

Вы можете увидеть это в действии на рисунке 7. Потому что мы в настоящее время разработан способ изобразить любой процент, мы могли бы даже анимировать круговую диаграмму от 0% до 100% с CSS animations, создавая причудливую прогрессаИндикатор:

@keyframes spin {
  to { transform: rotate(.5turn); }
}

@keyframes bg {
  50% { background: #655; }
}

.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 3s linear infinite,
             bg 6s step-end infinite;
}

Анимированные Pie ³

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

<div class="pie">20%</div>
<div class="pie">60%</div>

| __57 И получить два круговых диаграмм, один показывая 20%, а другой показывает 60%.Во-первых, мы рассмотрим, как мы можем сделать это с внутренних стилей, а затем мы всегда могли бы написать короткий скрипт для разбора текстового содержимого и добавить сказал встроенные стили, для кода элегантности, инкапсуляции, ремонтопригодности и, возможно, самое главное, доступность .

Вызов управления круговую диаграмму процент с внутренних стилей является то, что код CSS, который отвечает за установление процент устанавливается на псевдо-элемента.Как вы уже знаете, мы не можем установить встроенные стили на псевдо-elements, так мы должны быть inventive .

Примечание: Вы можете использовать ту же технику для других случаев, где вы хотите, чтобы использовать значения из spectrum без повторения и сложных расчетов, а также для отладки animations ступая через них. Просмотр простой, изолированный пример technique __33 | | 4__10 .

— CSS Анимации Уровень 1 ⁵

Потому что наша анимация приостановлена, первый кадр из него (определяется наше негативное animation-delay), будет отображаться только один.Процент показано на круговой диаграмме будет процент общей продолжительности нашего animation-delay есть.Например, с текущей длительностииз 6s, мы должны были бы animation-delay 64 из ~ |, чтобы отобразить процент 20%.Для упрощения математику, мы будем устанавливать продолжительность 100s.Имейте в виду, что из-за анимации остановился навсегда, продолжительность мы указываем не имеет другого эффекта .

Существует один последний вопрос: анимация на псевдо-элемента, но мы хотим, чтобы установить встроенный стиль на .pie element.Тем не менее, потому что нет анимации на <div>, мы можем установить animation-delay на, что в качестве внутреннего стиля, а затем использовать animation-delay: inherit; на псевдо-элемента.Чтобы положить его вместе, наша разметка для 20% и 60% круговых диаграмм будет выглядеть следующим образом:

<div class="pie"
     style="animation-delay: -20s"></div>
<div class="pie"
     style="animation-delay: -60s"></div>

И УС код, который мы только что представил для этой анимации в настоящее время станет (не включая .pie правило, в том, что остается тот же):

@keyframes spin {
  to { transform: rotate(.5turn); }
}

@keyframes bg {
  50% { background: #655; }
}

.pie::before {
  /* [Rest of styling stays the same] */
  animation: spin 50s linear infinite,
             bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
}

На данный момент, мы можем преобразовать разметку использовать проценты как содержание, так как мы изначально предназначена для, и добавьте animation-delay встроенные стили с помощью простого скрипта:

$$('.pie').forEach(function(pie) {
  var p = parseFloat(pie.textContent);
  pie.style.animationDelay = '-' + p + 's';
});

Обратите внимание, что мы оставили текст нетронутым, потому что мы должны его доступности и юзабилити причинам.В настоящее время, наши круговые диаграммы выглядеть как на рисунке 8. Мы должны скрыть текст, который мы можем сделать с помощью доступно color: transparent, так что он остается выбрать и printable.Как дополнительную ногтей, мы можем Центр процент пирога chart, так что это не в случайном месте, когда пользователь выбирает его.Чтобы сделать это, мы должны:

• Преобразование пирог в
  Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров
  
  
  Главная → Программирование → 28.07.2015 by coding.smashingmagazine.com