подборка красивых круглых прогресс-баров

Подборка красивых круглых прогресс баров

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

Источником является Alex Marinenko – https://codepen.io/jo-asakura/pen/stFHi

Полная подборка выглядит так

30%
60%
90%
45%
75%
95%
65%
25%
88%

Давайте я разобью для вас все прогресс-бары на части.

Подборка 1

Первый тип круглого прогресс бара отличается видом шкалы прогресса. Шкала прогресса находится за границей круга.

30%
60%
90%

HTML

<div class="set-size charts-container">
<div class="pie-wrapper progress-30">
    <span class="label">30<span class="smaller">%</span></span>
    <div class="pie">
      <div class="left-side half-circle"></div>
      <div class="right-side half-circle"></div>
    </div>
  </div>
  <div class="pie-wrapper progress-60">
    <span class="label">60<span class="smaller">%</span></span>
    <div class="pie">
      <div class="left-side half-circle"></div>
      <div class="right-side half-circle"></div>
    </div>
  </div>
  <div class="pie-wrapper progress-90">
    <span class="label">90<span class="smaller">%</span></span>
    <div class="pie">
      <div class="left-side half-circle"></div>
      <div class="right-side half-circle"></div>
    </div>
  </div>
</div>

CSS

/*ЭТО ОСНОВНЫЕ СТИЛИ КОТОРЫЕ ПРИМЕНЯЮТСЯ ДЛЯ ВСЕХ ТИПОВ ПРОГРЕСС-БАРОВ*/
.set-size {
  font-size: 10em;
}
.charts-container:after {
  clear: both;
  content: '';
  display: table;
}
.pie-wrapper {
  height: 1em;
  width: 1em;
  float: left;
  margin: 15px;
  position: relative;
}
.pie-wrapper:nth-child(3n + 1) {
  clear: both;
}
.pie-wrapper .pie {
  height: 100%;
  width: 100%;
  clip: rect(0, 1em, 1em, 0.5em);
  left: 0;
  position: absolute;
  top: 0;
}
.pie-wrapper .pie .half-circle {
  height: 100%;
  width: 100%;
  border: 0.1em solid #3498db;
  border-radius: 50%;
  clip: rect(0, 0.5em, 1em, 0);
  left: 0;
  position: absolute;
  top: 0;
}
.pie-wrapper .label {
  background: #34495e;
  border-radius: 50%;
  bottom: 0.4em;
  color: #ecf0f1;
  cursor: default;
  display: block;
  font-size: 0.25em;
  left: 0.4em;
  line-height: 2.8em;
  position: absolute;
  right: 0.4em;
  text-align: center;
  top: 0.4em;
}
.pie-wrapper .label .smaller {
  color: #bdc3c7;
  font-size: .45em;
  padding-bottom: 20px;
  vertical-align: super;
}
.pie-wrapper .shadow {
  height: 100%;
  width: 100%;
  border: 0.1em solid #bdc3c7;
  border-radius: 50%;
}
.pie-wrapper.style-2 .label {
  background: none;
  color: #7f8c8d;
}
.pie-wrapper.style-2 .label .smaller {
  color: #bdc3c7;
}
/*СТИЛИ КОТОРЫЕ НУЖНЫ ТОЛЬКО ДЛЯ ТЕКУЩЕГО ТИПА*/
.pie-wrapper.progress-30 .pie .half-circle {
  border-color: #3498db;
}
.pie-wrapper.progress-30 .pie .left-side {
  -webkit-transform: rotate(108deg);
          transform: rotate(108deg);
}
.pie-wrapper.progress-30 .pie .right-side {
  display: none;
}
.pie-wrapper.progress-60 .pie {
  clip: rect(auto, auto, auto, auto);
}
.pie-wrapper.progress-60 .pie .half-circle {
  border-color: #9b59b6;
}
.pie-wrapper.progress-60 .pie .left-side {
  -webkit-transform: rotate(216deg);
          transform: rotate(216deg);
}
.pie-wrapper.progress-60 .pie .right-side {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.pie-wrapper.progress-90 .pie {
  clip: rect(auto, auto, auto, auto);
}
.pie-wrapper.progress-90 .pie .half-circle {
  border-color: #e67e22;
}
.pie-wrapper.progress-90 .pie .left-side {
  -webkit-transform: rotate(324deg);
          transform: rotate(324deg);
}
.pie-wrapper.progress-90 .pie .right-side {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

Подборка 2

Второй тип, это простые прогресс-бары которые чаще всего встречаются на сайтах.

45%
75%
95%

HTML

<div class="set-size charts-container">
<div class="pie-wrapper progress-45 style-2">
    <span class="label">45<span class="smaller">%</span></span>
    <div class="pie">
      <div class="left-side half-circle"></div>
      <div class="right-side half-circle"></div>
    </div>
    <div class="shadow"></div>
  </div>
  <div class="pie-wrapper progress-75 style-2">
    <span class="label">75<span class="smaller">%</span></span>
    <div class="pie">
      <div class="left-side half-circle"></div>
      <div class="right-side half-circle"></div>
    </div>
    <div class="shadow"></div>
  </div>
  <div class="pie-wrapper progress-95 style-2">
    <span class="label">95<span class="smaller">%</span></span>
    <div class="pie">
      <div class="left-side half-circle"></div>
      <div class="right-side half-circle"></div>
    </div>
    <div class="shadow"></div>
  </div>
</div>

CSS

/*ЭТО ОСНОВНЫЕ СТИЛИ КОТОРЫЕ ПРИМЕНЯЮТСЯ ДЛЯ ВСЕХ ТИПОВ ПРОГРЕСС-БАРОВ*/
.set-size {
  font-size: 10em;
}
.charts-container:after {
  clear: both;
  content: '';
  display: table;
}
.pie-wrapper {
  height: 1em;
  width: 1em;
  float: left;
  margin: 15px;
  position: relative;
}
.pie-wrapper:nth-child(3n + 1) {
  clear: both;
}
.pie-wrapper .pie {
  height: 100%;
  width: 100%;
  clip: rect(0, 1em, 1em, 0.5em);
  left: 0;
  position: absolute;
  top: 0;
}
.pie-wrapper .pie .half-circle {
  height: 100%;
  width: 100%;
  border: 0.1em solid #3498db;
  border-radius: 50%;
  clip: rect(0, 0.5em, 1em, 0);
  left: 0;
  position: absolute;
  top: 0;
}
.pie-wrapper .label {
  background: #34495e;
  border-radius: 50%;
  bottom: 0.4em;
  color: #ecf0f1;
  cursor: default;
  display: block;
  font-size: 0.25em;
  left: 0.4em;
  line-height: 2.8em;
  position: absolute;
  right: 0.4em;
  text-align: center;
  top: 0.4em;
}
.pie-wrapper .label .smaller {
  color: #bdc3c7;
  font-size: .45em;
  padding-bottom: 20px;
  vertical-align: super;
}
.pie-wrapper .shadow {
  height: 100%;
  width: 100%;
  border: 0.1em solid #bdc3c7;
  border-radius: 50%;
}
.pie-wrapper.style-2 .label {
  background: none;
  color: #7f8c8d;
}
.pie-wrapper.style-2 .label .smaller {
  color: #bdc3c7;
}
/*СТИЛИ КОТОРЫЕ НУЖНЫ ТОЛЬКО ДЛЯ ТЕКУЩЕГО ТИПА*/
.pie-wrapper.progress-45 .pie .half-circle {
  border-color: #1abc9c;
}
.pie-wrapper.progress-45 .pie .left-side {
  -webkit-transform: rotate(162deg);
          transform: rotate(162deg);
}
.pie-wrapper.progress-45 .pie .right-side {
  display: none;
}
.pie-wrapper.progress-75 .pie {
  clip: rect(auto, auto, auto, auto);
}
.pie-wrapper.progress-75 .pie .half-circle {
  border-color: #8e44ad;
}
.pie-wrapper.progress-75 .pie .left-side {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.pie-wrapper.progress-75 .pie .right-side {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.pie-wrapper.progress-95 .pie {
  clip: rect(auto, auto, auto, auto);
}
.pie-wrapper.progress-95 .pie .half-circle {
  border-color: #e74c3c;
}
.pie-wrapper.progress-95 .pie .left-side {
  -webkit-transform: rotate(342deg);
          transform: rotate(342deg);
}
.pie-wrapper.progress-95 .pie .right-side {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

Подборка 3

Последний вариант больше похож на диаграмму.

65%
25%
88%

HTML

<div class="set-size charts-container">
<div class="pie-wrapper pie-wrapper--solid progress-65">
    <span class="label">65<span class="smaller">%</span></span>
  </div>
  <div class="pie-wrapper pie-wrapper--solid progress-25">
    <span class="label">25<span class="smaller">%</span></span>
  </div>
  <div class="pie-wrapper pie-wrapper--solid progress-88">
    <span class="label">88<span class="smaller">%</span></span>
  </div>
</div>

CSS

/*ЭТО ОСНОВНЫЕ СТИЛИ КОТОРЫЕ ПРИМЕНЯЮТСЯ ДЛЯ ВСЕХ ТИПОВ ПРОГРЕСС-БАРОВ*/
.set-size {
  font-size: 10em;
}
.charts-container:after {
  clear: both;
  content: '';
  display: table;
}
.pie-wrapper {
  height: 1em;
  width: 1em;
  float: left;
  margin: 15px;
  position: relative;
}
.pie-wrapper:nth-child(3n + 1) {
  clear: both;
}
.pie-wrapper .pie {
  height: 100%;
  width: 100%;
  clip: rect(0, 1em, 1em, 0.5em);
  left: 0;
  position: absolute;
  top: 0;
}
.pie-wrapper .pie .half-circle {
  height: 100%;
  width: 100%;
  border: 0.1em solid #3498db;
  border-radius: 50%;
  clip: rect(0, 0.5em, 1em, 0);
  left: 0;
  position: absolute;
  top: 0;
}
.pie-wrapper .label {
  background: #34495e;
  border-radius: 50%;
  bottom: 0.4em;
  color: #ecf0f1;
  cursor: default;
  display: block;
  font-size: 0.25em;
  left: 0.4em;
  line-height: 2.8em;
  position: absolute;
  right: 0.4em;
  text-align: center;
  top: 0.4em;
}
.pie-wrapper .label .smaller {
  color: #bdc3c7;
  font-size: .45em;
  padding-bottom: 20px;
  vertical-align: super;
}
.pie-wrapper .shadow {
  height: 100%;
  width: 100%;
  border: 0.1em solid #bdc3c7;
  border-radius: 50%;
}
.pie-wrapper.style-2 .label {
  background: none;
  color: #7f8c8d;
}
.pie-wrapper.style-2 .label .smaller {
  color: #bdc3c7;
}
/*СТИЛИ КОТОРЫЕ НУЖНЫ ТОЛЬКО ДЛЯ ТЕКУЩЕГО ТИПА*/
.pie-wrapper--solid {
  border-radius: 50%;
  overflow: hidden;
}
.pie-wrapper--solid:before {
  border-radius: 0 100% 100% 0 / 50%;
  content: '';
  display: block;
  height: 100%;
  margin-left: 50%;
  -webkit-transform-origin: left;
          transform-origin: left;
}
.pie-wrapper--solid .label {
  background: transparent;
}
.pie-wrapper--solid.progress-65 {
  background: linear-gradient(to right, #e67e22 50%, #34495e 50%);
}
.pie-wrapper--solid.progress-65:before {
  background: #e67e22;
  -webkit-transform: rotate(126deg);
          transform: rotate(126deg);
}
.pie-wrapper--solid.progress-25 {
  background: linear-gradient(to right, #9b59b6 50%, #34495e 50%);
}
.pie-wrapper--solid.progress-25:before {
  background: #34495e;
  -webkit-transform: rotate(-270deg);
          transform: rotate(-270deg);
}
.pie-wrapper--solid.progress-88 {
  background: linear-gradient(to right, #3498db 50%, #34495e 50%);
}
.pie-wrapper--solid.progress-88:before {
  background: #3498db;
  -webkit-transform: rotate(43.2deg);
          transform: rotate(43.2deg);
}
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

4
Оставить комментарий

avatar
4 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
3 Авторы комментариев
JanleFАллаТатьяна Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Татьяна
Гость

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

Алла
Гость

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

JanleF
Гость

Cialis E Antidepressivi [url=http://apcialisle.com/#]Cialis[/url] Ed Supplements Overnight canadian pharmacy cialis Cialis 20mg Filmtabletten

JanleF
Гость

Cialis Por Vida [url=http://apcialisle.com/#]Cialis[/url] Cialis Hormona Cialis Effet Du Cialis 20