Круговой индикатор процесса на css. Круговая и кольцевая svg диаграммы на HTML5 с нуля. Как сделать SVG-диаграмму своими руками

Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS .

Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle , где приводится отличное решение для вертикального центрирования. Вот еще несколько на эту тему.

Рассмотрим способ поближе.

Достоинства

• Кроссбраузерность (включая IE 8-10)
• Никакой дополнительной разметки, минимум стилей
• Адаптивность
• Независимость от padding (без box-sizing !)
• Работает для изображений

Недостатки

• Должна быть задана высота (см. Variable Height)
• Рекомендуется задать overflow: auto , чтобы контент не расползался
• Не работает на Windows Phone

Совместимость с браузерами Метод был протестирован, и прекрасно работает в Chrome, Firefox, Safari, Mobile Safari и даже IE 8-10. Один пользователь упоминал, что контент не выравнивается по вертикали на Windows Phone.Внутри контейнера Контент, размещенный в контейнер с position: relative будет прекрасно выравниваться:

Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

С использованием viewport Установим для контента position: fixed и зададим z-index:

Absolute-Center.is-Fixed { width: 50%; height: 50%; overflow: auto; margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 999; }

Адаптивность Главное преимущество описываемого способа - это прекрасная работа, когда высота или ширина задана в процентах, да еще и понимание min-width/max-width и min-height/max-height .

Absolute-Center.is-Responsive { width: 60%; height: 60%; min-width: 400px; max-width: 500px; padding: 40px; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

Смещения Если на сайте присутствует фиксированная шапка или требуется сделать какой-то другой отступ, просто нужно добавить в стили код вроде top: 70px; Пока задан margin: auto; блок с контентом будет корректно центрироваться по высоте.

Еще можно выравнивать контент по нужной стороне, оставляя центрирование по высоте. Для этого нужно использовать right: 0; left: auto; для выравнивания справа или left: 0; right: auto; для выравнивания слева.

Absolute-Center.is-Right { width: 50%; height: 50%; margin: auto; overflow: auto; position: absolute; top: 0; left: auto; bottom: 0; right: 20px; text-align: right; }

Много контента Для того, чтобы большое количество контента не позволяло верстке разъезжаться, используем overflow: auto . Появится вертикальная прокрутка. Также можно добавить max-height: 100%; если у контента нет дополнительных отступов.
.Absolute-Center.is-Overflow { width: 50%; height: 300px; max-height: 100%; margin: auto; overflow: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

Изображения Способ отлично работает и для изображений! Добавим стиль height: auto; тогда картинка будет масштабироваться вместе с контейнером.

Absolute-Center.is-Image { width: 50%; height: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

Изменяемая высота Описываемый способ требует заданной высоты блока, которая может быть указана в процентах и контролироваться с помощью max-height , что делает метод идеальным для адаптивных сайтов. Один из способов не задавать высоту - использование display: table . При этом блок контента центрируется независимо от размера.

Могут возникнуть проблемы с кроссбраузерностью, возможно следует использовать способ с table-cell (описан ниже).

• Firefox/IE8: использование display: table выравнивает блок вертикально по верхней границе документа.
• IE9/10: использование display: table выравнивает блок по левому верхнему углу страницы.
• Mobile Safari: если ширина задана в процентах, страдает горизонтальное центрирование

.Absolute-Center.is-Variable { display: table; width: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

Другие способы Описанный способ отлично работает в большинстве случаев, но есть и другие методы, которые могут быть применимы для решения специфических задач.Отрицательный margin Наверное, самый популярный способ. Подходит, если известны размеры блока.

Is-Negative { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */ }
Преимущества:

• Кроссбраузерность
• Минимальный код

Недостатки:

• Не адаптивный
• Ползет верстка, если в контейнере слишком много контента
• Приходится компенсировать отступы или использовать box-sizing: border-box

Использование transform Один из самых простых способов, поддерживает изменение высоты. Есть подробная статья на эту тему - "Centering Percentage Width/Height Elements " от CSS-Tricks.

Is-Transformed { width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
Преимущества:

• Изменяемая высота
• Минимальный код

Недостатки:

• Не работает в IE 8
• Использование префиксов
• Может мешать работе других эффектов с transform
• В некоторых случаях при рендеринге размываются края блока и текст

Table-cell Возможно один из самых лучших и простых способов. Подробно описан в статье "Flexible height vertical centering with CSS, beyond IE7 " от 456bereastreet. Главный недостаток - дополнительная разметка: требуется аж три элемента:

<!-- CONTENT -->
CSS:
.Pos-Container.is-Table { display: table; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%; margin: 0 auto; }
Преимущества:

• Изменяемая высота
• Верстка не едет при большом количестве текста в блоке
• Кроссбраузерность

Недостатки:

• Сложная структура

Flexbox Будущее CSS, flexbox будет решать множество сегодняшних проблем верстки. Подробно об этом написано в статье Smashing Magazine, которая называется Centering Elements with Flexbox .

Pos-Container.is-Flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }
Преимущества:

• Контаент может быть любой высоты или ширины
• Может использоваться в более сложных случаях

Недостатки:

• Нет поддержки IE 8-9
• Требуется контейнер или стили в body
• Требует множество разнообразных префиксов для корректной работы в современных браузерах
• Возможные проблемы производительности

Итог Каждый способ имеет преимущества и недостатки. По сути, выбор сводится к выбору браузеров, которые должны поддерживаться
18.02.15 21.4K

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

Преимущества верстки с помощью тега

Существует два основных типа построения структуры сайта:

• Табличная;
• Блочная.

Табличная верстка была доминирующей еще на заре зарождения интернета. К ее преимуществам можно отнести точность заданного позиционирования. Но, тем не менее, она обладает явными недостатками. Главными из них является объемность кода и низкая скорость загрузки.

При использовании табличной верстки веб-страница не будет отображаться вплоть до полной загрузки. В то время как при использовании блоков div элементы отображаются сразу.

Кроме высокой скорости загрузки блочное построение сайта позволяет в несколько раз уменьшить объем кода html . В том числе и за счет использования классов CSS .

Тем не менее, табличную верстку следует использовать для структуризации отображения данных на странице. Классическим примером ее применения является отображение таблиц.

Блочное построение на основе тегов также называют послойным, а сами блоки слоями. Это связано с тем, что при использовании определенных значений свойств их можно размещать один поверх другого подобно слоям в Photoshop.

Средства позиционирования

В блочной верстке позиционирование слоев лучше осуществлять с помощью средств каскадных таблиц стилей. Основным свойством CSS, отвечающим за расположение , является float.
Синтаксис свойства:
float: left | right | none | inherit ,
Где:

• left – выравнивание элемента по левому краю экрана. Обтекание остальными элементами происходит справа;
• right – выравнивание справа, обтекание остальными элементами – слева;
• none – обтекание не допускается;
• inherit – наследование значения родительского элемента.

Рассмотрим облегченный пример позиционирования блоков div с помощью этого свойства:

#left { width: 200px; height: 100px; float: left; background: rgb(255,51,102); } #right { width: 200px; height: 100px; float: right; background: rgb(0,255,153); } Левый блок Правый блок

Теперь постараемся с помощью этого же свойства расположить третий div по центру страницы. Но, к сожалению, у float нет значения center . А при задании новому блоку значения выравнивания вправо или влево он сдвигается в указанную сторону. Поэтому остается лишь всем трем блокам задать float: left :

Но и это не является оптимальным вариантом. При уменьшении окна все слои выстраиваются в один ряд по вертикали, а при увеличении размеров – прилипают к левому краю окна. Поэтому нужен более совершенный способ выравнивание div по центру. Центрирование слоев

В следующем примере мы будем использовать слой-контейнер, в котором разместим остальные элементы. Это решает проблему смещения блоков друг относительно друга при изменении размеров окна. Центрирование контейнера посредине осуществляется с помощью задания свойствам margin нулевого значения отступам от верхнего края и auto по бокам (margin: 0 auto ):

#container { width: 600px; margin: 0 auto; } #left { width: 200px; height: 100px; float: left; background: rgb(255,51,102); } #right { width: 200px; height: 100px; float: left; background: rgb(0,255,153); } #center { width: 200px; height: 100px; float: left; background: rgb(255,0,0); } Левый блок Центральный блок Правый блок

Этот же пример показывает, как можно отцентровать div по горизонтали. А если немного отредактировать приведенный выше код, то можно добиться вертикального выравнивания блоков. Для этого нужно лишь изменить длину слоя-контейнера (уменьшить его ). То есть после редактирования его css класс должен выглядеть вот так:

После изменения все блоки выстроятся строго в ряд посредине. И их положение не изменится при любых размерах окна браузера. Вот как выглядит такое центрирование div по центру по вертикали:

В следующем примере для центрирования слоев внутри контейнера мы использовали ряд новых свойств css :

#container { width: 450px; height:150px; margin:0 auto; background-color:#66CCFF; } #left { width: 100px; height: 100px; background: rgb(255,51,102); display: inline-block; vertical-align: middle; margin-left: 35px; } #right { width: 100px; height: 100px; background: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; } #center { width: 100px; height: 100px; background: rgb(255,0,0); display: inline-block; vertical-align: middle; margin-left: 35px; }

Краткое описание свойств css и их значений, которые мы использовали в данном примере для центрирования div внутри div :

• display: inline-block – выравнивает блочный элемент в строку и обеспечивает его обтекание другим элементом;
• vertical-align: middle – выравнивает элемент посредине относительно родительского;
• margin-left – устанавливает отступ слева.

Как из слоя сделать ссылку

Как ни странно звучит, но такое возможно. Иногда div блок как ссылка может понадобиться при верстке различных видов меню. Рассмотрим практический пример реализации слоя-ссылки:

#layer1{ width: 500px; height: 100px; background: rgb(51,255,204); border:groove; } a { display: block; text-align: center; height: 100%; color: rgb(255,0,51); } Ссылка на наш сайт

В данном примере с помощью строки display: block мы задали ссылке значение блочного элемента. А чтобы вся высота блока div стала ссылкой, установили height : 100%. Скрытие и отображение блочных элементов

Блочные элементы предоставляют больше возможностей для расширения функционала интерфейса, чем устаревшая табличная верстка. Часто бывает, что дизайн сайта является уникальным и узнаваемым. Но за такой эксклюзив приходиться платить нехваткой свободного места.

Особенно это касается главной страницы, стоимость размещения рекламы на которой является самой высокой. Поэтому и появляется проблема, куда бы «впихнуть » еще один рекламный баннер. И тут уж выравниванием div по центру страницы никак не отделаешься!

Более рациональным решением является сделать какой-нибудь блок скрывающимся. Вот простой пример такой реализации:

#layer1{ display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; } function show() { if(layer1=="none") { layer1="block"; } else { layer1="none"; } document.getElementById("layer1").style.display=layer1; }

Это волшебная кнопка. Нажатие на нее скроет или отобразит скрывающийся блок.

• Перевод
• Tutorial

Формы это неплохой способ добавить некую изюминку элементам на вашей веб странице. Круги особенно хороши в этом отношении, потому что они целостны, просты и похожи на пирог. А теперь серьёзно, кто не любит пироги?

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

Итак, начнём! При написании этого туториала, я буду работать с Circliful . Это бесплатный jQuery плагин с открытыми исходниками. Вы можете загрузить основной файл с Github . Он включает.js файл вместе с соответствующей CSS таблицей стилей. Страница должна содержать и то и другое, чтобы добиться эффекта круга.

Animated Circle Stats - Template Monster Demo

Моя страница содержит подобную таблицу стилей styles.css для моих личных CSS стилей. Вам также необходимо сделать копию библиотеки jQuery . Она необходима для того, чтобы плагин корректно работал.
Саму по себе, страницу довольно легко структурировать. Элементы круга содержатся в тэгах div, которые используют атрибуты HTML5 для управления данными. В качестве альтернативы, они могут храниться в функции jQuery, но если вы хотите лучше контролировать каждый элемент, тогда проще работать в HTML.

Photoshop Illustrator After Effects

Это копия первого ряда кругов, состоящего из 3 анимированных единиц. Все эти атрибуты данных в дальнейшем разъяснены в документации к плагину . Каждый представляет опцию, которая определяет анимационный эффект. Ниже привожу краткое описание опций, которые я использую:

• data-dimension – общий размер круга ширина/высота;
• data-text – текст, который появляется в центре каждого круга;
• data-width – толщина вращающейся дуги данных;
• data-fontsize – размер шрифта текста по центру;
• data-percent – число от 0-100 отображающее проценты в вашем круге;
• data-fgcolor – цвет переднего плана круга;
• data-bgcolor – цвет фона круга;
• data-fill – внутренняя заливка цвета фона внутреннего круга.

Компоновка CSS страницы Я не настаиваю на том, чтобы вы напрямую редактировали jquery.circliful.css , конечно если вы не желаете кастомизировать плагин. Большая часть цветов может быть изменена прямо из атрибутов данных HTML5, и если вы действительно хотите переписать какие-либо из стилей Circliful , я бы рекомендовал вам делать это в своей собственной таблице стилей.
Сказав вам это, я создал свою собственную таблицу стилей для данного проекта, а не для того, чтобы переписывать стили Circliful . Сама по себе веб страница нуждается в компоновке по умолчанию, которую действительно легко спроектировать. Контентная область отцентрирована в маленькой секции для круговой диаграммы. Каждая область свободно перемещается в контейнере строки в пределах оригинального #stats div .

/** page structure **/ .wrap { display: block; margin: 0 auto; max-width: 800px; } #intro { display: block; margin-bottom: 25px; text-align: center; } #intro p { font-size: 1.8em; line-height: 1.35em; color: #616161; font-style: italic; margin-bottom: 25px; } #stats { display: block; width: 100%; padding: 15px 0; background: #f8f8f8; border-top: 4px solid #c3c3c3; border-bottom: 4px solid #c3c3c3; } #stats .row { display: block; } .circle-container { display: block; float: left; margin-right: 55px; margin-bottom: 45px; } .circle-container h3 { display: block; text-align: center; font-size: 2.25em; line-height: 1.4em; color: #363636; text-shadow: 1px 1px 0 #fff; }

Внутри каждой секции, контент удерживается в пределах .wrap div для фиксации в центре. Также, свободно передвигающимся элементам круга необходим дополнительный контейнер .clearfix , для того чтобы всё оставалось правильно выровненным.

/** clearfix **/ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html .clearfix { display: block; } * html .clearfix { height: 1%; }

Этот класс clearfix был известен годами как решение для контейнера со свободно двигающимися элементами. Обычно их удаляют из текста документа и не сохраняют значение их оригинальной ширины/высоты. Но это поддерживает постоянную ширину контейнера #stats и оставляет место для большего количества контента, который будет располагаться ниже на странице.

Заключительные штрихи Так, мы замесили тесто, заполнили противень для пирога, поместили его в духовку и уже практически готовы снять пробу. Если всё выглядит достаточно хорошо, то каков же будет финальный шаг? Нам нужно немного jQuery кода в качестве украшения этого проекта.
Откройте новый скрипт тэг внизу этой HTML страницы. Он будет содержать небольшой отрывок JavaScript. Так как я использовал все атрибуты данных HTML5, нам не нужно вызывать никаких jQuery опций. Скрипт просто должен запустить функцию Circliful на каждом круге divs. Используя продублированное название класса, как например, .circlestat делает процесс очень простым.

$(function(){ $(".circlestat").circliful(); });

Для тех, кто не знаком с синтаксической структурой jQuery, я предоставлю короткое описание. После того, как документ загрузится, мы запускаем новую функцию. Нашей внутренней целью является каждый элемент, который использует класс .circlestat и запускает функцию circliful() . Это приводит плагин Circliful , который создаёт анимационные эффекты, в действие и применяет дополнительный контент/цвета.

Я не могу сказать, что эти круги всегда будут наилучшим решением. Я видел много портфолио, которые были основаны на словах и цифрах, но не на работе как таковой. Подумайте об использовании этих кругов в редких случаях и попробуйте позаимствовать их для других целей, вне простых навыков. Ваши статистические данные не обязательно должны измеряться в процентах – они могут показывать, сколько лет вы находитесь в бизнесе, общее количество ваших проектов или другие подобные цифры. Вы можете бесплатно загружать копию моего руководства и экспериментировать с кодом для того, чтобы он лучше подходил для ваших проектов.

Обратите внимание, что в этой главе мы будем загружать код напрямую с локального жёсткого диска, а не через веб-сервер. Вам, возможно, потребуется отключить безопасность в Chrome на время разработки. Если в Chrome у вас возникли проблемы с загрузкой изображений или других файлов непосредственно с диска, попробуйте добавить некоторые флаги безопасности в командной строке.

На Mac OS X это будет так:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files --disable-web-security

Chromium-browser --disable-web-security

Chrome.exe --disable-web-security

Кроме того, вы можете загрузить страницы через локальный веб-сервер.

В этой главе мы отобразим некоторые данные путём рисования гистограммы. Это покажет вам основы рисования линий, фигур и текста, затем мы сделаем круговую диаграмму с градиентом.

Создание новой страницы

Начните с создания нового текстового файла с именем barchart.html и наберите в нём:

var data = [ 16, 68, 20, 30, 54 ];

Страница выше содержит элементы и . Элемент представляет собой прямоугольник на экране, в котором будет происходить рисование. width и height определяют, насколько он будет большой. это блочный элемент похожий на , так что вы можете стилизовать его или позиционировать так же, как и всё остальное на странице.

Переменная data в скрипте хранит набор точек данных, которые мы отобразим в гистограмме.

Теперь получим указатель на холст и зальём фон серым цветом. Добавьте это в скрипт после переменной data .

// получаем указатель на холст var canvas = document.getElementById("canvas"); // получаем указатель на контекст рисования var c = canvas.getContext("2d"); // рисуем c.fillStyle = "gray"; c.fillRect(0,0,500,500);

Добавляем данные

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