Элемент прогресса HTML-текст внутри

Question

Элемент прогресса HTML-текст внутри

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

 String fileName="/home/shriram/Desktop/Images/"+"test.txt";
  FileWriter fw=new FileWriter(fileName,true);    
  fw.write("here will be you content to insert or append in file");    
  fw.close(); 
  FileWriter fw1=new FileWriter(fileName,true);    
 fw1.write("another content will be here to be append in the same file");    
 fw1.close();

0

html css

задан lilo 19 March 2019 в 09:23

4 ответа

Другие вопросы по тегам:

html css

Похожие вопросы:

score 0 · Answer 1

Вы должны использовать последнюю версию начальной загрузки, и она имеет встроенный CSS:

Пример:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<br><br>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">10%</div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">20%</div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">30%</div>
</div>

score 0 · Answer 2

Я обновил индикатор выполнения, используя чистый CSS. Давайте попробуем использовать этот пример и прокомментировать для получения дополнительной информации.

progress {
    -webkit-appearance: none;
}

progress::-webkit-progress-bar {
    background-color: orange;
}

.progress-bar span {
    position: absolute;
    display: inline-block;
    color: #fff;
    text-align: right;
}

.progress-bar {
    display: block;
    position: relative;
    width: 100%;
}

progress {
    width: 100%;
}

<div class="progress-bar">
    <span data-value="60" style="width: 60%;">60</span>
    <progress value="60" max="100"></progress>
</div>
<div class="progress-bar">
    <span data-value="90" style="width: 90%;">90</span>
    <progress value="90" max="100"></progress>
</div>

score 0 · Answer 3

Вы можете сделать это с небольшим количеством js и css. Я бы лично избегал причин появления элементов прогресса, связанных с кросс-браузерным стилем.

Сторонние библиотеки хороши, но они идут со значительной стоимостью. Раздутые CSS и JS иногда не стоят этого.

Надеюсь, это поможет.

<style>
.progress {
  width: 100%;
  position: relative;
  background-color: orange;
}

.bar {
  width: 0%;
  height: 30px;
  background-color: green;
  text-align: center;
  line-height: 30px;
  color: black;
}

.bar-text {
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: black;
}

</style>

<script>
function init() {
  var bar = document.getElementById("bar");   
  var width = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      bar.style.width = width + '%'; 
      document.querySelector('.bar-text').innerHTML = width * 1  + '%';
    }
  }
}
</script>

<div class="progress" id="progress">
  <div class="bar" id="bar"></div>
  <div class="bar-text">10%</div>
</div>
<br>
<button onclick="init()">Click Me</button>

score 0 · Answer 4

Вы должны использовать пользовательский индикатор выполнения или библиотеку, у которой есть опция для этого. Вот пример пользовательского индикатора выполнения. Используйте Javascript для управления шириной и содержанием псевдоэлемента before

.progress{
  height:30px;
  width:300px;
  background-color:orange;
  position:relative;
}

.progress::before{
  position:absolute;
  height:30px;
  background:green;
  content:'50%';// hrere you should add the text
  top:0;
  left:0;
  width:50%;
  display:flex;
  color:white;
  align-items:center;
  justify-content:flex-end;
  padding-right:10px;
}

<div class="progress"></div>