С очередным обновлением дизайна популярного видео хостинга YouTube, в самом верху появился так называемый Progress Bar. А точнее это такая полоса, которая показывает прогресс загрузки страницы. Согласитесь, что это довольно интересное решение. И конечно же многие веб мастера захотели себе такое новое чудо, и начали искать решения.
Не удивительно, что решение очень быстро нашли, теперь подобной полосой может похвастаться чуть ли не каждый веб мастер. К тому же эту полоску не так уж сложно установить, в общем, что мы сейчас и рассмотрим.
Как добавить на сайт полосу загрузки как на YouTube ι Скачать Установка
Как я уже говорил, что велосипед мы создавать не будем, а воспользуемся уже готовым вот этим плагином.
Вам нужно только скачать его и сделать следующее:
Скиньте два файла nprogress.css и nprogress.js к себе на хостинг, после этого на своём сайте в коде HTML укажите путь для них. Если Вы скините эти файлы прям в корневой каталог то путь будет выглядеть так:
YouTube Shorts progress bar? ______
После этого между тегами и вставьте следующий скрипт:
Всё! теперь можете наслаждаться своей полосой.
Изменение вида полосы
Чтобы изменить цвет, вид или размеры полосы, редактируйте файл стилей nprogress.css.
Вот и всё, друзья! Урок получился не большой, надеюсь, полезный. До скорых встреч.
Рад приветствовать начинающих и активно продолжающих! Упражнение планка — сегодня про него, да.
На календаре – среда, а это значит технический день и соответствующая заметка на проекте “ ”. Сегодня мы будем укреплять мышечный корсет мышц живота с помощью одного простого, но весьма эффективного упражнения. По прочтении Вы узнаете все о технике его выполнения, ошибках и программе тренировок по созданию стального пресса.
Итак, давайте приступим к нашему повествованию.
Упражнение планка. Что, к чему и почему?
Очень часто в зале мне приходится наблюдать такую картину – приходят новички и сразу же первым делом начинают долбить пресс стандартными упражнениями, типа скручивания на римской скамье или боковые скручивания в тренажере для . Несомненно, мышцы живота — очень важная и показательная мускульная группа, однако совсем не обязательно работать с ней по шаблонному стандарту. Можно отойти от этих клише и попробовать что-то новое и относительно диковинное, в частности, упражнение планка. Оно призвано создать жесткий мышечный корсет живота и укрепить фундамент под названием мышцы кора.
Стоит также сказать, что это именно не накачательное, а формирующее, укрепляющее упражнение, и поэтому не пользуется должной популярностью у посетителей тренажерных залов. В связи с такой несправедливостью я и решил рассмотреть этого отшельника:).
Как обычно, начнем с рассмотрения мышечного атласа, а точнее тех мышц, которые принимают на себя нагрузку.
Как можно заметить, упражнение планка – не изолирующее, и оно не нацелено на верхний/нижний или какие-то другие отделы брюшного пресса. Его можно назвать базовым общеукрепляющим для всех мышц живота. Если углубиться в технические детали, то планка относится к классу изометрических упражнений, т.е. оно статическое и не вызывает движения суставов.
Дальнейшее повествование по теме упражнение планка будет вестись в форме небольших подглав
Оно разом развивает множество телесных характеристик атлета, например:
№1. Укрепление и развитие силы
Упражнение планка – уникальное, оно (в т.ч.) позволяет развить силу сразу нескольких мышечных групп.
Основным эффектом от него является укрепление мышц кора, в особенности -абдоминальных и мышц спины. В первую очередь, упражнение ориентированно на erector spinae (разгибатель позвоночника) , прямую и поперечную мышцы живота. При правильном выполнении работают основные группы мышц в области шеи под названием трапеции. Они помогают осанке – поддерживают шею человека, если тот слишком много времени проводит за сидячей деятельностью (работа за ПК, офисная работа) .
Выполнение планки позволяет укрепить мышцы плеча, тем самым улучшая их производительность, например, в таком упражнении, как от пола. Удержание верхней части тела на руках позволяет активно включаться в работу двуглавой мышце плеча, что помогает развитию бицепса.
Если спуститься вниз, то следующие мышечные группы развивают свои силовые показатели.
Грудные мышцы также участвуют в работе и получают свою нагрузку. Упражнение отлично укрепляет мышцы пресса (вот это новость:)) . Низ спины также играет важную роль в удержании положения планки. Двигаясь вдоль тела, мы подходим к таким мышечным группам, как ягодицы, бедро и икроножные.
Итак, планка способствует силовому развитию и укреплению многих мышечных групп. Редко какое упражнение без использования тренажеров позволяет это сделать.
№2. Ментальная концентрация
Психологический аспект упражнения также очень важен. При выполнении планки, человеку необходимо сконцентрироваться, сосредоточиться на цели (удержать тело горизонтально как можно дольше) и проявить характер – либо слиться и клюнуть носом, либо простоять до истечения заданного времени.
Отличное упражнение, которое, помимо укрепления большого количества мышц, позволяет тренировать волю и “прокачивать” свои ментальные характеристики.
В результате сидячей работы мышцы сковываются и сжимаются. Удержание планки позволит потянуть множество мышц и снять с них напряжение.
№4. Эстетический вид
Упражнение является отличным инструментом для тех, кто хочет повлиять на свою талию – подтянуть живот, сделать брюшную стенку более компактной. Планка помогает в совершенствовании талии, однако не избавляет от режима, сбалансированной диеты и различных форм кардио-активности, — основных инструментов по «уборке» живота.
Собственно, с преимуществами разобрались, теперь переходим…
Упражнение планка: техника выполнения
В теории и на практике планка требует, чтобы Вы совокупно напрягли (сократили) мышцы кора, пока удерживаете собственный вес тела на руках (локти и предплечья) и пальцах ног. Техника выполнения состоит из следующих шагов.
Найдите в фитнес-зале (или дома) зеркальную стену/зеркало. Положите на пол гимнастический фитнес-коврик, примите горизонтальное положение – упор лежа.
Вытяните тело, опираясь на две опорные точки – локти/предплечья (согните руки до угла в 90 градусов) и носки стопы.
Держите спину плоской, чтобы можно было мысленно провести прямую линию от головы до пят. Напрягите мышцы брюшного пресса и следите за тем, чтобы средний отдел не провисал в середине, и пятая точка не выпячивалась вверх.
Задержитесь в таком положении на 30-60 секунд и выполните 3-5 повторений.
Технически планка включает в себя соблюдение всех следующих правил.
В картинном варианте это упражнение выглядит так.
Нередко упражнение планка рекомендуют в качестве терапевтического упражнения для укрепления мышц спины (например, после получения травмы) . В таком случае курс состоит из 10 дней с “продолжительностью зависания” от 30 секунд до 1,5 минуты.
На первый взгляд может показаться, что упражнение из серии “не бей лежачего!” – однако, это не так. Далеко не каждый человек сможет с первого раза преодолеть планку в 30 секунд. Разумеется, начинать нужно с малого и удерживать горизонталь как можно дольше. В частности, для увеличения времени удержания используйте следующие советы:
- практикуйте упражнение несколько раз в день, стараясь каждый раз удерживать позицию немного (даже несколько секунд) больше;
- используйте вспомогательные упражнения – отжимания и (или тяга верхнего блока) , чтобы укрепить профильные мускулы, участвующие в планке;
- приседания и становая тяга также помогут укрепить низ спины и мышцы кора.
Если у Вас не хватает сил мышечного корсета живота выполнять классическую планку, тогда можно попрактиковать облегченный вариант – с согнутыми коленями. Если же вы удерживаете положение более 2 -х минут, тогда можно переходить к более продвинутым вариациям упражнения.
При выполнении планки можно смотреть на время, однако лучше всего ориентироваться на ощущения – т.е. как только почувствовали начало жжения в области живота, можно прекращать повтор.
Упражнение планка: вариации
По мере Вашей тренированности обычная планка станет казаться Вам плевым делом, и тогда пригодятся следующие усложненные вариации этого упражнения.
№1. Планка и отжимания
Займите положение классической планки (а) . Поднимите Ваше тело до верхней позиции отжимания за счет рук (b) . Задержитесь в верхней точке (с) , затем измените направление движения и вернитесь в упор на локти. Это 1 повтор.
№2. Планка с прыжком
Займите положение классической планки (а) . Слегка подпрыгните, разведя ноги в стороны (b) . Убедитесь, что Ваша верхняя часть тела не поворачивается. Быстро верните ноги в исходное положение. Это 1 повтор.
№3. Планка с отрывом руки
Займите положение классической планки (а) . Поднимите и выпрямите левую руку, удерживая ее так, чтобы она было параллельна остальной части тела (b) . Вернитесь в исходное положение, затем поднимите правую руку, повторите заданное количество раз.
№4. Переходящая планка
Займите положение классической планки (а) . Повернитесь на левый бок в боковую планку (b) , задержитесь на 10 секунд. Затем повернитесь на правый бок и выполните правую боковую планку, задержитесь на 10 секунд (с) . Это 1 повтор. Вернитесь в ИП и повторите.
№5. Боковая планка с поворотом корпуса
Примите положение боковой планки, чтобы правая рука оказалась прямо над Вами и была перпендикулярна полу (а) . Пропустите Вашу руку под торсом (b) . Поднимите руку обратно в ИП. Это 1 повтор. Перекатитесь на другую сторону и повторите.
№6. Планка на прямых руках с выпадом вперед
Примите упор лежа на вытянутых руках (а) . Перенесите свою правую ногу вперед и поставьте ее рядом с правой рукой (или так близко, как сможете, (b)) . Следите за бедрами – они не должны провисать или уходить сильно вверх. Верните ногу в ИП, повторите с левой ноги. Это 1 повтор.
№7. Планка на фитболе и скамье
Поместите ноги на скамью, а предплечьями упритесь в . Ваше тело должно образовать прямую линию с Вашими плечами и лодыжками. Зафиксируйтесь в таком положении на протяжении 60 секунд.
Используйте эти вариации по мере своего прогресса в классическом стиле.
Изометрические упражнения могут вызвать подъем кровяного давления, поэтому если у Вас имеются сердечно-сосудистые проблемы, то необходимо отказаться от выполнения упражнения планка.
В заключении хотелось бы привести простой 5 -минутный комплекс на каждый день. Выполняйте его, и тогда Ваши мышцы кора будут стальные, как железо:).
Ну вот, как-то так, осталось подытожить всю эту хренотень информацию и сделать соответствующие выводы.
Упражнение планка, приятно познакомиться! Считается самым эффективным для создания жесткого мышечного корсета пресса. Укрепление последнего поможет хорошо спрогрессировать в других упражнениях, где нужна хорошая стабилизация и поддержка корпуса, например, или . Теория закончена, можно приступать к практике, поехали!
PS. Не ограничиваемся только прочтением, активно задаем вопросы, отписываем комментарии и прочее разное.
PPS. Помог проект? Тогда оставьте ссылку на него в статусе своей социальной сети — плюс 100 очков к карме, гарантированно.
С уважением и признательностью, Протасов Дмитрий .
Не верите, что можно подтянуть тело за месяц, занимаясь по пять минут в день? Вы просто никогда не делали “Планку”! Это статическое упражнение действительно творит чудеса, работая одновременно на все группы мышц. Сегодня мы расскажем вам, в домашних условиях, чтобы достичь максимального эффекта в короткие сроки. Но обо всем по порядку!
Какие мышцы работают в упражнении “Планка”?
Для начала давайте разберемся, какой эффект можно ожидать при регулярных тренировках и добросовестном исполнении. Если делать планку правильно, она работает в нескольких направлениях сразу:
- Прорабатывает пресс, поперечные и косые мышцы живота, за счет чего подтягивается живот и формируется талия.
- Укрепляет бицепсы, трицепсы и дельты.
- Нагружает большую ягодичную мышцу и квадрицепс, делая бедра и ягодицы более упругими.
- Улучшает рельеф ног и спины, укрепляет поясницу, подтягивает грудь, исправляет осанку.
- Сжигает лишний жир.
- Улучшает кровообращение тканей, борется с целлюлитом.
- Помогает при остеохондрозе позвоночника.
В пользу этого списка говорят многочисленные положительные отзывы тех, кто практиковал упражнение “Планка”, фото “до” и “после”, размещенные в сети, а также невероятная популярность этой тренировки. Без планки не обходится ни один комплекс силовых упражнений от гуру фитнеса – Джиллиан Майклс. Более чем убедительная причина начать тренироваться прямо сегодня, не правда ли?
Планка для похудения: как правильно делать, чтобы не потратить время впустую
Существует пять основных видов планки:
- классическое упражнение на прямых руках,
- усложненная классика – на локтях,
- боковая – с упором на вытянутой руке или локте,
- усложненная боковая – с двумя точками опоры,
- классическая на фитболе.
Сразу оговоримся: последние два вида – для продвинутых спортсменов и спортсменок. То есть пока вы как следует не отработаете первые два варианта, приступать к усложненной технике не стоит.
А теперь давайте разберемся, как правильно выполнять упражнение “Планка”. Первое, что хочется отметить, – тренироваться можно где угодно: дома, в зале, на спортивной площадке, в парке.
“Планка” – упражнение для мужчин и женщин любого возраста и уровня физической подготовки. Никаких специальных приспособлений или снарядов для выполнения планки не нужно. Главное – правильный настрой, упорство и мотивация.
Под каждым описанием упражнения “Планка” – фото, по которому можно ориентироваться. Будьте внимательны, и у вас все получится!
Стандартная схема упражнения “Планка” выглядит так: упор на ладони и кончики пальцев, спина и ноги прямые, ладони – строго под плечами, мышцы на животе напряжены, таз подтянут. Проследите, чтобы взгляд был направлен вперед, ноги не были согнуты в коленях, а голова – опущена вниз. Начинайте с минутной тренировки, каждые пару дней добавляя дополнительные тридцать секунд. Оптимальное время выполнения, к которому нужно стремиться, – 3-5 минут.
Когда вы как следует отработаете это упражнение, можете его немного разнообразить. Например, вытянуть вперед прямую руку или поднять ногу, не сгибая ее в колене. Так вместо четырех точек опоры у вас останется всего три, и эффективность тренировки повысится.
Еще один способ усложнить задачу – поднимать руки и ноги по очереди, выполнять скручивания из классической позиции или делать упражнение на скрещенных руках.
Как делать упражнение “Планка” в этой позиции? Все просто: тело вытягивается в прямую линию от макушки до пят, руки сгибаются под углом в 90 градусов, ладони соединяются в замок, упор – на носочки и локти. Как и в предыдущем варианте, нужно следить за прессом и поясницей: мышцы должны быть напряжены, а таз – подтянут. В этом положении вы должны чувствовать, как напрягаются руки, спина, живот, передняя поверхность бедра. Если упражнение кажется вам слишком простым, значит, вы что-то делаете неправильно.
Сколько держать упражнение “Планка” в положении на локтях? Желательно – не меньше минуты, но если для вас это слишком сложно, продержитесь хотя бы 30 секунд. Даже такая короткая тренировка, если она выполнена правильно, принесет заметный результат.
Боковая – на вытянутой руке или локте
Упражнение выполняется следующим образом: корпус – одна сплошная прямая линия, упор – на прямую руку (локоть) и боковую поверхность стоп. Противоположная рука вытянута вверх, ладонь раскрыта. Одна нога (одноименная с вытянутой рукой) выдвинута чуть вперед. Следите, чтобы живот был напряжен, а таз не провисал вниз.
Боковая планка – упражнение, которое нужно делать в два приема: сначала на одну сторону, потом на другую. Продержитесь минуту на одной руке, затем плавно перейдите в классическую позицию, а из нее повернитесь в другую сторону. Если выстоять целую минуту не получается, отдохните, но только в асане “собака мордой вниз” (она же “поза горки”). Когда почувствуете, что можете выполнить оба подхода без перерыва, увеличивайте время тренировки.
Боковая планка с опорой на две точки
Как следует отработали все предыдущие уровни? Пора осваивать новые горизонты! Упражнение с опорой на две точки – та же боковая планка, только более сложная. Техника выполнения отличается в мелочах: исходное положение то же, только упор осуществляется на одну ногу, а не на две, как в предыдущем варианте. Вытянутые нога и рука должны быть напряженными, живот и таз – подтянутыми, тело от макушки до пят – представлять собой прямую линию.
Что дает упражнение “Планка”, в котором всего две точки опоры? Как и в классическом варианте, работают почти все группы мышц, плюс отрабатывается равновесие.
Планка на фитболе
Одно из самых сложных упражнений, особенно для тех, кто никогда не тренировался на фитболе. Дело в том, что на мяче намного сложнее держать равновесие, чем на твердой поверхности. Зато такая тренировка будет намного эффективнее, чем все предыдущие.
Как правильно делать упражнение “Планка” на фитболе? Техника выполнения проста: нужно встать на колени, а мяч положить перед собой. Затем необходимо поставить локти на фитбол, и, уперевшись, медленно распрямить ноги и подняться. Все остальные требования стандартны: ноги и спина прямые, пресс напряжен, таз не провисает.
Этот скрипт позволит установить на Вашем сайта прогресс бар, показывающий загрузку сайта в целом в виде полоски в верхней части. Впервые я увидел такую загрузку на YouTube, но не будем гадать, где она появилась впервые. Подумайте, прежде чем установить скрипт, т.к. может оказаться, что это и будет лишней нагрузкой на сайт. Если на сайте нечего загружать, то такой плагин будет лишним, а если на сайте встроен видео-проигрыватель или просто тяжелые изображения, то следует поставить такой интересный и полезный плагин.
Ниже приведена инструкция как установить прогресс бар на свой сайт на uCoz.
Скачайте архив, загрузите папку nprogress через FTP.
В Вашего сайта вставьте следующий код:
Теперь немного о настройке .
NProgress.start() — показывает Progress Bar
NProgress.set(0.4) — устанавливает значение в процентах (0.5 — 50%, 1 — 100% и далее)
NProgress.done() — завершает загрузку страницы
Плагин может оказаться полезным для видеосервисов, файловых хостингов и просто для украшения сайта. Очень прост в установке и использовании.
Упс! Тут писали, что скрипт не работает, так вот проверка на этом сайте показала, что скрипт работает нормально с версией JQuery 1.10.2. А сам скрипт NProgress.js должен загружаться после библиотеки, поэтому нужно вставить его в «Верхнюю часть сайта» после body. А запуск плагина вставьте в «Нижнюю часть сайта», перед /body.
Источник: bilimdon.ru
Прогресс бар на Python
В Python доступно несколько модулей прогресс бара. Рекомендую использовать alive-progress, так как он имеет множество преимуществ. Этот модуль многофункционален, прост в использовании и имеет множество встроенных стилей. Более того, ты можешь легко создавать свои собственные эффекты. Предварительно установи с помощью pip install alive-progress.
from alive_progress import alive_bar qs = # usually some queryset or iterable with alive_bar(qs.count()) as bar: # or `len(iterable)`: declare your expected total for item in qs: # iterate over your items # process an item bar() # call after consuming one item
Вызов bar() — это метод, который заставляет бар двигаться вперед. Обычно вы вызываете его в каждой итерации, но вы можете проявить творческий подход! Вызывайте его только тогда, когда вы найдете что-то, например, в зависимости от того, что вы хотите отслеживать. Он возвращает текущий счет, если вы хотите знать, где вы находитесь.
Источник: uproger.com
Круговой прогресс бар на HTML и CSS
Круговой прогресс бар — полезный элемент для веб-страниц, когда требуется отразить циклические показатели. Однако, мне не удалось быстро найти в сети простых решений, поэтому я решил написать небольшой урок, как простым способом сделать круглый прогресс бар на HTML и СSS.
Когда я искал способы реализации кругового прогресс бара в Интернете, мне часто попадались решения на основе Canvas и SVG, либо нечто громоздкое с использованием JavaScript. Тогда я понял, что лучше придумать свой способ, тем более, что нынешние технологии позволяют сделать это весьма просто и кратко, то есть, не используя много кода.
В моем решении круглого прогресс бара совершенно не требуется использование JavaScript, но если потребуется отражать не только статические данные, для этого далее я приведу небольшой пример использования коротенького кода JavaScript для динамического изменения показателей.
Стоит также отметить, что использование HTML и CSS позволяет применять различные стилистические приемы, сохраняя гибкость элемента и компактность, что может оказаться менее значительным относительно SVG или Canvas, например, при использовании растровых изображений для фонов, множественных теней, анимационных эффектов и прочего.
Итак, для начала вот весь код кругового прогресс бара на HTML и CSS. Затем, если вам понадобится справка, ниже я объясняю как это работает.
Исходный код круглого прогресс бара
18 PERCENT
.diagram < width: 250px; height:250px; border-radius: 50%; background: #990; position: relative; overflow: hidden; >.diagram::before < content: »; display: block; position: absolute; top:20px; left:20px; right:20px; bottom:20px; border-radius: 50%; background: #ccc; z-index: 3; opacity: 1; >.diagram .piece < width: 100%; height: 100%; left: 0; right: 0; overflow: hidden; position: absolute; >.diagram .piece::before < content: »; display: block; position: absolute; width: 50%; height: 100%; >.diagram .piece.left < transform: rotate(0deg); z-index: 2; border-radius: 50%; /* only FireFox < 75.0v (fix bug)*/ >.diagram.over_50 .piece.left < transform: rotate(180deg); >.diagram .piece.right < transform: rotate(180deg); z-index: 1; border-radius: 50%; /* only FireFox < 75.0v (fix bug)*/ >.diagram.over_50 .piece.right < transform: rotate(360deg); >.diagram .left::before < background: #059; >.diagram.over_50 .left::before < background: #990; >.diagram .right::before < background: #059; >.diagram .text < position: absolute; z-index: 3; top: 0; bottom: 0; left:0; right:0; text-align: center; display: flex; align-items: center; justify-content: center; >.diagram .text b < font-size: 72px; >.diagram .text span
Как я уже говорил, для статического отображения прогресс бара не требуется JavaScript и для этого достаточно вручную прописать значения CSS-свойства transform: rotate(); для следующих элементов:
— блок перекрывающий правую или левую половины в зависимости от значения.
— блок отображающий само значение с помощью своего угла поворота, который рассчитывается по формуле (360 * текущее значение / 100) + 180 , где 100 — это максимальное значение прогресс бара, которое может принимать любое другое значение.
Но если вы хотите немного автоматизировать процесс расчета значения визуальных показаний (особенно это полезно, когда прогресс баров может быть несколько), можно прибегнуть к помощи JavaScript, передавая ему значение через атрибут data-percent и рассчитывая значения CSS свойств transform следующим методом:
function progressView() < let diagramBox = document.querySelectorAll(‘.diagram.progress’); diagramBox.forEach((box) =>< let deg = (360 * box.dataset.percent / 100) + 180; if(box.dataset.percent >= 50)< box.classList.add(‘over_50’); >else < box.classList.remove(‘over_50’); >box.querySelector(‘.piece.right’).style.transform = ‘rotate(‘+deg+’deg)’; >); > progressView();
Как работает прогресс бар
Принцип отображения реализован следующим нехитрым способом.
В основном блоке (div) с зеленым цветом фона, который визуализирует настоящее значение, заложены два дочерний блока.
Один дочерний блок, который я пепрекрасил на анимации ниже для наглядности в коричневый цвет, закрывает попеременно только половины родительского блока с зелёным фоном и при изменении своего положения принимает цвет большей (занятой синей или наоборот незанятой зеленой) области диаграммы. Этот (коричневый) блок является вспомогательным, поскольку второй дочерний блок (синий), который вращаясь визуально указывает точное значение, способен перекрыть только половину родительского блока. Таким образом, применив к основному блоку свойства overflow:hidden; и border-radius:50%; вращением этих внутренних блоков, мы создаем иллюзию постепенного замещения в нашем «бублике» одного цвета другим цветом.
Анимация блоков кругового прогресс бара отражающая принцип его работы
Если у вас еще не уложилось в голове, как это происходит, давайте разберем скрипт, выполняющий эти расчеты, код которого я привел выше.
let diagramBox = document.querySelectorAll(‘.diagram.progress’);
В этой строке мы выберем все элементы кругового прогресс бара с классами .diagram.progress, поскольку, будем считать, что их может быть несколько.
Далее мы проходим по коллекции (массиву) этих элементов, чтобы выполнить расчеты для каждого из них.
let deg = (360 * box.dataset.percent / 100) + 180;
В этой строке мы считаем, какой угол должен принять правый блок (плавно вращающийся) в зависимости от полученного значения из атрибута data-percent. В принципе, значения можно брать прямо из тега , но мне просто удобней использовать атрибуты data-.
if(box.dataset.percent >= 50)< box.classList.add(‘over_50’); >else
Следующим условием мы определяем, когда значение больше половины, то левому блоку (перескакивающему с одной половины на другую) добавляем класс .over_50, для которого прописаны свойства разворота на 180 градусов и перекрашивания фона в противоположный цвет (cм. CSS). А когда значения ниже 50%, просто удаляем этот класс.
Теперь нам осталось указать правому блоку градус поворота при помощи изменения CSS-свойства transform. Вот и вся «магия».
Пример: таймер обратного отсчета на JavaScript
Одним из полезных применений кругового прогресс бара можно считать счетчик. Такие решения нередко можно встретить на ресурсах коммерческой и финансовой тематики. Но давайте просто ради практики рассмотрим способ реализации кругового счетчика на примере таймера обратного отсчета.
И так, все что нам нужно это всего-лишь немного модифицировать код javaScript. Вместе с ним я приведу код HTML, хоть я его и почти не изменял, но для того, чтобы вам было проще ориентироваться.
100 SECONDS
function timer(seconds)< let diagramBox = document.querySelector(‘.diagram.timer’); seconds = seconds || diagramBox.dataset.seconds; let deg = (360 * seconds / diagramBox.dataset.seconds) + 180; if(seconds >= diagramBox.dataset.seconds / 2)< diagramBox.classList.add(‘over_50’); >else < diagramBox.classList.remove(‘over_50’); >diagramBox.querySelector(‘.piece.right’).style.transform = ‘rotate(‘+deg+’deg)’; diagramBox.querySelector(‘.text b’).innerText = seconds; setTimeout(function()< timer(seconds — 1); >, 1000); > timer();
Теперь немного подробностей.
В коде HTML я изменил только название класса и атрибут data-. Все это исключительно для правильной идентификации и осмысления. В остальном HTML остался неизменен. Но код JS модифицирован чуть больше.
И так, нам понадобится создать функцию timer(), поскольку ее нужно будет вызывать рекурсивно.
Найдем наш элемент с прогресс баром и запишем его в переменную:
let diagramBox = document.querySelector(‘.diagram.timer’);
Теперь нам нужно как-то считать секунды, а для этого нам послужит дополнительная переменная seconds. В ней мы поставим условие: если seconds пуста или равна нулю, тогда мы берем значение из атрибута data-seconds, то есть начинаем отсчет заново.
seconds = seconds || diagramBox.dataset.seconds;
Обратите внимание, что теперь нам нужно немного иначе пересчитывать значения для визуального отображения угла поворота блока прогресс бара.
Let deg = (360 * seconds / diagramBox.dataset.seconds) + 180;
Если для отображения процентов в первом примере в атрибуте data- хранилось текущее значение, которое мы делили на статичное максимальное — 100, то в таймере в этом атрибуте хранится теперь максимальное значение, а текущее фигурирует в самом сценарии. Таким образом, максимальное значение может принимать любое положительное число, при этом на диаграмме всегда верно отобразится прогресс.
Далее нужно выполнить ту же функцию, что и в первом примере — определить, когда вспомогательный блок делжен получать класс .over_50 и переворачиваться на другую сторону нашего блока с таймером.
if(seconds >= diagramBox.dataset.seconds / 2)< diagramBox.classList.add(‘over_50’); >else
Укажем рассчитанный угол поворота для CSS-свойства transform вращающегося блока и подставим текст текущего значения секунд в тег .
diagramBox.querySelector(‘.piece.right’).style.transform = ‘rotate(‘+deg+’deg)’; diagramBox.querySelector(‘.text b’).innerText = seconds;
И, наконец, нам осталось отнять одну секунду и запустить функцию расчета заново, то есть совершить новую итерацию с задержкой 1000 миллисекунд.
setTimeout(function()< timer(seconds — 1); >, 1000);
Как видите, ничего сложного, по крайней мере для того, кто более-менее знаком с синтаксисом языка, нет.
Прогресс бар в виде круговой диаграммы
Как вы можете видеть, данный прогресс бар уже представляет из себя круговую диаграмму. Лишь наслоением внутри него псевдоэлемента или другого внутреннего элемента с фоном, мы создаем видимость «бублика». Но в нашей диаграмме мы можем использовать более чем один показатель, создав полноценный динамический график-пирог. Попробуйте поразмышлять, как это сделать на основе того, что уже есть здесь. Но если вам пока сложно ориентироваться в этом, я разберу это в отдельном уроке.
Источник: exkaryon.ru