Как поместить текст в индикатор выполнения в HTML5 с помощью bulma? - PullRequest
Новая
       6

Как поместить текст в индикатор выполнения в HTML5 с помощью bulma?

0 голосов
/ 13 ноября 2018

По умолчанию то, что вы помещаете между тегами <progress></progress>, не будет отображаться. 

<progress class="progress" value="15" max="100">15%</progress>

Как бы получить 15%, чтобы показать?Я использую Bulma в качестве основы.

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Оберните вас progress с div и добавьте span

(я не использовал :after/before и он должен работать во всех браузерах)

См. Скрипку, используя булму 

<div>
<span>
  15%
</span>
<progress  class="progress" value="15" max="100" >

</progress>
</div>

CSS: 

span{
    position: absolute;
    top: -2px;
    left: 50%;
    font-size: 12px;
}
0 голосов
/ 13 ноября 2018

Использовать псевдоэлемент и атрибут данных (работает только на Chrome ...) 

.progress:before {
  content:attr(data-text);
}
.progress {
 text-align:center;
}
<progress class="progress" value="15" max="100" data-text="15%"></progress>

Или вы можете просто рассмотреть дополнительную обертку: 

.progress:before {
  content:attr(data-text);
  position:absolute;
  left:0;
  right:0;
}
.progress {
 text-align:center;
 display:inline-block;
 position:relative;
}
<div class="progress" data-text="15%"><progress  value="15" max="100" ></progress></div>

Включая булму: 

.progress-container:before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  right: 0;
  top:0;
  line-height:1em;
}

.progress-container {
  text-align: center;
  position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="progress-container" data-text="15%"><progress class="progress" value="15" max="100"></progress></div>
...