Процесс регистрации Бар CSS3 анимация

Question

Процесс регистрации Бар CSS3 анимация

0

Каков хороший способ реализовать эту функцию?

<div class="container">
  <h2>Basic Progress Bar</h2>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:50%">
      <span class="sr-only">70% Complete</span>
    </div>
  </div>
</div>

Должен ли я добавлять эти цифры на панели прогресса в виде фотографий? или я должен нарисовать круг с помощью CSS3? Если да, может ли кто-нибудь представить пример?

Yumiko 17 сен. 2015, в 01:57

Источник

0

Используйте CSS и текст ... Изображения не могут быть прочитаны на машинах
Akxe 17 сен. 2015, в 00:11

Теги:

html

angularjs

css

css3

2 ответа

Ещё вопросы

Используйте CSS и текст ... Изображения не могут быть прочитаны на машинах

misterManSam · Answer 1 · 2015-09-16T23-51-00.000Z

Позвольте создать что-то чистое и красивое!

Конечный результат:

HTML-код

Это удобное место для заказанного списка. Все, что нам нужно, это:

<ol>
    <li class="complete">Personal</li>
    <li class="complete">Profile</li>
    <li>Experience</li>
    <li>Setting</li>
    <li>Certificate</li>
    <li>Submit</li>
</ol>

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

CSS

Цифры

В Smashing Magazine есть углубленная запись counter.

Цифры создаются с помощью счетчика, который выглядит следующим образом:

ol {
  list-style: none;
  counter-reset: counter;
}

ol li {
  counter-increment: counter;
}        

ol li::before {
  content: counter(counter, decimal);
}

Свойство counter-increment содержит правильное число, которое помещается внутри с content в элементе ::before псевдоэлементом.

Затем цифры располагаются над текстом с position: absolute.

Индикатор выполнения

Подробнее о псевдоэлементах здесь, в MDN.

Это выглядит так и идет за номерами:

Он создается с помощью ::before псевдоэлементом с градиентом фона. Измените два средних процентных значения (в этом примере на 40%) по мере завершения формы:

ol::before {
  content: '';
  height: 8px;
  background: 
    linear-gradient(to right, #BFA15F 0, #BFA15F 40%, #A8A9AD 40%, #A8A9AD 100%);
  position: absolute;
  left: 50px;
  right: 50px;
  top: 6px;
}

Стиль чисел

Цифры вставляются с ol li::before, которые могут быть добавлены далее:

border-radius: 50% для создания круга
text-align: center и line-height: 20px чтобы идеально text-align: center по кругу
цвет фона, который изменяется по мере завершения шагов.

Полный пример

Примечание. Между закрывающим </li> и следующим открытием <li> нет пробелов. Это предотвращает разрыв между элементами списка inline-block. Подробнее читайте здесь.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: arial;
}
ol {
  list-style: none;
  counter-reset: counter;
  position: relative;
  width: 600px;
  margin: 50px auto;
  white-space: nowrap;
  /*white-space: nowrap; means -- don't wrap the text*/
}
ol::before {
  content: '';
  position: absolute;
  height: 8px;
  background: linear-gradient(to right, #BFA15F 0, #BFA15F 40%, #A8A9AD 40%, #A8A9AD 100%);
  left: 50px;
  right: 50px;
  top: 6px;
}
ol li {
  counter-increment: counter;
  display: inline-block;
  position: relative;
  text-transform: uppercase;
  font-size: 0.7em;
  padding-top: 30px;
  width: 100px;
  text-align: center;
}
ol li::before {
  content: counter(counter, decimal);
  position: absolute;
  background: #A8A9AD;
  top: 0;
  left: 50%;
  margin-left: -10px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  /*Matches height value*/
  text-align: center;
  border-radius: 50%;
  color: #FFF;
  font-weight: bold;
}
ol li.complete::before {
  background: #BFA15F;
}

<ol>
  <li class="complete">Personal</li><li class="complete">Profile</li><li>Experience</li><li>Setting</li><li>Certificate</li><li>Submit</li>
</ol>

Анимированный пример

Если индикатор выполнения должен анимировать, вы можете создать его с двумя псевдоэлементами вместо градиента с золотой линией, скользящей по серой.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: arial;
}
ol {
  list-style: none;
  counter-reset: counter;
  position: relative;
  width: 600px;
  margin: 50px auto;
  white-space: nowrap;
  /*white-space: nowrap; means -- don't wrap the text*/

}

ol::before {
  content: '';
  position: absolute;
  height: 8px;
  background: #A8A9AD;
  left: 50px;
  right: 50px;
  top: 6px;
}
ol::after {
  content: '';
  position: absolute;
  height: 8px;
  background: #BFA15F;
  left: 50px;
  top: 6px;

  animation: stretch 2s linear infinite;
}
ol li {
  counter-increment: counter;
  display: inline-block;
  position: relative;
  text-transform: uppercase;
  font-size: 0.7em;
  padding-top: 30px;
  width: 100px;
  text-align: center;
}
ol li::before {
  content: counter(counter, decimal);
  position: absolute;
  background: #A8A9AD;
  top: 0;
  left: 50%;
  margin-left: -10px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  /*Matches height value*/
  text-align: center;
  border-radius: 50%;
  color: #FFF;
  font-weight: bold;
  z-index: 1;
}
ol li.complete::before {
  background: #BFA15F;
}

@keyframes stretch {
  0% {
	width: 0;
  }
  100% {
	width: calc(100% - 100px);
  }
}

<ol>
  <li class="complete">Personal</li><li class="complete">Profile</li><li>Experience</li><li>Setting</li><li>Certificate</li><li>Submit</li>
</ol>

Maximillian Laumeister · Answer 2 · 2015-09-16T22-52-00.000Z

Ниже приведена краткая демонстрация того, как можно начать создавать этот вид визуального в CSS. Этот пример является быстрым и грязным, поэтому, чтобы адаптировать его для производства, я бы рекомендовал упростить некоторые CSS и, возможно, генерировать HTML, используя JavaScript и, возможно, некоторые псевдоэлементы CSS. Затем я рассмотрю анимацию цветов с помощью анимации CSS. Это просто, чтобы дать вам представление о том, как это можно сделать, и, возможно, искусить некоторые идеи.

Снимок экрана:

Демо-версия:

html, body {
    background-color: #555048;
}

.segment {
    position: relative;
    display: inline-block;
    margin-right: -10px;
}
.circle {
    display: inline-block;
    background-color: #A8A9AD;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    color: white;
    overflow: hidden;
    text-align: center;
    font-size: 12px;
}
.line {
    display: inline-block;
    width: 80px;
    height: 10px;
    margin: 5px 0;
    background-color: #A8A9AD;
    position: relative;
    left: -5px;
}
.label {
    position: absolute;
    left: 10px;
    top: 35px;
    transform: translate(-50%, 0);
    font-size: 12px;
    color: #A8A9AD;
}
.container {
    margin: 50px;
}
.segment.active .circle, .segment.active .line {
    background-color: #C0A05F;
}
.segment.active .label {
    color: #C0A05F;
}

<div class="container">
<div class="segment active"><div class="circle">1</div><div class="label">PERSONAL</div><div class="line"></div></div>
<div class="segment active"><div class="circle">2</div><div class="label">PROFILE</div><div class="line"></div></div>
<div class="segment"><div class="circle">3</div><div class="label">EXPERIENCE</div><div class="line"></div></div>
<div class="segment"><div class="circle">4</div><div class="label">SETTING</div><div class="line"></div></div>
<div class="segment"><div class="circle">5</div><div class="label">CERTIFICATE</div><div class="line"></div></div>
<div class="segment"><div class="circle">6</div><div class="label">SUBMIT</div></div>
</div>

Версия JSFiddle: https://jsfiddle.net/8hxqunLx/1/