Полоса загрузки html, css

867

31 марта 2017, 22:20

Видел, что есть тэг в HTML5 progress, но увы его нельзя стилизовать.

Как вернее всего сделать что-то подобное?

.value, 
progress { 
        width: 100%; 
	height: 10px; 
	background: #ddd; 
	margin-bottom: 20px; 
} 
.value-box { 
	height: 10px; 
	background: #36c36e; 
}

<div id="skills"> 
   <p>C++ development</p> 
   <progress value="23" max="100"></progress> 
    
   <p>HTML5</p> 
   <div class="value"><div class="value-box" style="width: 55%;"></div></div> 
    
   <p>.NET</p> 
   <div class="value"><div class="value-box" style="width: 74%;"></div></div> 
    
   <p>jQuery</p> 
   <div class="value"><div class="value-box" style="width: 65%;"></div></div> 
    
   <p>Angular</p> 
   <div class="value"><div class="value-box" style="width: 40%;"></div></div> 
</div>

Answer 1

Почему нельзя стилизовать? Можно!

.value { 
  width: 100%; 
  height: 10px; 
  background: #ddd; 
  margin-bottom: 20px; 
} 
 
progress[value] { 
  -webkit-appearance: none; 
  appearance: none; 
  width: 70%; 
  height: 20px; 
  background-color: red; 
} 
progress[value]::-webkit-progress-bar { 
  background-color: red; 
  border-radius: 2px; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; 
} 
progress[value]::-webkit-progress-value { 
  background-image: 
	   -webkit-linear-gradient(-45deg,  
	                           transparent 33%, rgba(0, 0, 0, .1) 33%,  
	                           rgba(0,0, 0, .1) 66%, transparent 66%), 
	   -webkit-linear-gradient(top,  
	                           rgba(255, 255, 255, .25),  
	                           rgba(0, 0, 0, .25)), 
	   -webkit-linear-gradient(left, #09c, #f44); 
 
    border-radius: 2px;  
    background-size: 35px 20px, 100% 100%, 100% 100%; 
} 
 
.value-box { 
  height: 10px; 
  background: #36c36e; 
}

<div id="skills"> 
  <p>C++ development</p> 
  <progress value="23" max="100"></progress> 
 
  <p>HTML5</p> 
  <div class="value"> 
    <div class="value-box" style="width: 55%;"></div> 
  </div> 
 
  <p>.NET</p> 
  <div class="value"> 
    <div class="value-box" style="width: 74%;"></div> 
  </div> 
 
  <p>jQuery</p> 
  <div class="value"> 
    <div class="value-box" style="width: 65%;"></div> 
  </div> 
 
  <p>Angular</p> 
  <div class="value"> 
    <div class="value-box" style="width: 40%;"></div> 
  </div> 
</div>