Pasek postępu z HTML i CSS

82

Chcę utworzyć pasek postępu jak na poniższym obrazku:

Przykład paska postępu

Nie mam pojęcia, jak to stworzyć. Czy powinienem używać technik HTML5?

Czy możesz mi pomóc w tworzeniu tego paska postępu?

html  css  progress-bar 
— Shahin
źródło

Odpowiedzi:

211 

#progressbar {
  background-color: black;
  border-radius: 13px;
  /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progressbar>div {
  background-color: orange;
  width: 40%;
  /* Adjust with JavaScript */
  height: 20px;
  border-radius: 10px;
}
<div id="progressbar">
  <div></div>
</div>
Rozwiń fragment

Skrzypce

(EDYCJA: Podświetlenie zmienionej składni; zmieniono element potomny na selektor podrzędny)

— RoToRa
źródło
3
Niektórzy mogą uznać, że pasek postępu z wyśrodkowanym wskaźnikiem procentowym jest jeszcze bardziej przydatny.
— Tomáš Zato - Przywróć Monikę
20

http://jsfiddle.net/cwZSW/1406/

#progress {
    background: #333;
    border-radius: 13px;
    height: 20px;
    width: 300px;
    padding: 3px;
}

#progress:after {
    content: '';
    display: block;
    background: orange;
    width: 50%;
    height: 100%;
    border-radius: 9px;
}
<div id="progress"></div>
Rozwiń fragment

— Duch Madary
źródło
3
W zależności od przeglądarki trzeba użyć border-radius, -webkit-border-radiusalbo-moz-border-radius
— Veger
Brawa za zajęcie tylko 3 minut, musisz być super utalentowaną osobą na pasku postępu! łał!
— Daniël Tulp
@Daniel dlaczego dziękuję! Fajnie, gdy ludzie to zauważą!
— Madara's Ghost
6
Jedynym problemem związanym z tym rozwiązaniem jest to, że kodowi JavaScript bardzo trudno jest zmienić długość pseudoelementu: after, ponieważ nie jest on częścią DOM. Chyba że czegoś mi brakuje.
— FrontierPsycho
17

Odpowiedź z 2014 roku : Od 2014 roku HTML 5 zawiera teraz kod<progress> element , który nie wymaga JavaScript. Wartość procentowa przesuwa się wraz z postępem przy użyciu zawartości wbudowanej. Testowany tylko w webkicie. Mam nadzieję, że to pomoże:

jsFiddle

CSS:

progress {
	display:inline-block;
	width:190px;
	height:20px;
	padding:15px 0 0 0;
	margin:0;
	background:none;
	border: 0;
	border-radius: 15px;
	text-align: left;
	position:relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}
progress::-webkit-progress-bar {
	height:11px;
	width:150px;
	margin:0 auto;
	background-color: #CCC;
	border-radius: 15px;
	box-shadow:0px 0px 6px #777 inset;
}
progress::-webkit-progress-value {
	display:inline-block;
	float:left;
	height:11px;
	margin:0px -10px 0 0;
	background: #F70;
	border-radius: 15px;
	box-shadow:0px 0px 6px #777 inset;
}
progress:after {
	margin:-26px 0 0 -7px;
	padding:0;
	display:inline-block;
	float:left;
	content: attr(value) '%';
}
<progress id="progressBar" max="100" value="77"></progress>
Rozwiń fragment

— Andrelo
źródło
Od 2020 r. Obsługiwane całkiem dobrze we wszystkich przeglądarkach: caniuse.com/#feat=progress
— frackham
Czy nie jest trochę nierealistyczne stwierdzenie, że „nie potrzebuje JavaScript”? Chodzi mi o to, że sam element jest dość prostym komponentem wizualnym, ale jeśli kiedykolwiek zamierzasz uzyskać z niego jakąkolwiek wartość, POTRZEBUJESZ dynamicznie ustawić właściwość „value” w jakiś sposób. Jak to będzie? Założę się, że zgadnę Javascript. Powstaje więc pytanie, czy ten element rzeczywiście zapewnia tyle wygody lub korzyści, skoro tak naprawdę niewiele robi, ale przedstawia coś w bardzo kontrolowany sposób.
— Lew
4

Podoba mi się ten:

bardzo sprytny, tylko z tym jako HTML i resztą CSS3, który jest kompatybilny wstecz (chociaż będzie mniej atrakcyjny)

Edytuj Dodany kod poniżej, ale pobrany bezpośrednio z powyższej strony, wszystkie zasługi dla tego autora

.meter {
  height: 20px;
  /* Can be anything */
  position: relative;
  background: #555;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  padding: 10px;
  -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.meter>span {
  display: block;
  height: 100%;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: #f1a165;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
  background-image: -webkit-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -ms-linear-gradient(top, #f1a165, #f36d0a);
  background-image: -o-linear-gradient(top, #f1a165, #f36d0a);
  -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
<div class="meter">
  <span style="width: 33%"></span>
  <!-- I use my viewmodel in MVC to calculate the progress and then use @Model.progress to place it in my HTML with Razor -->
</div>
Rozwiń fragment

— Daniël Tulp
źródło
2
Należy pamiętać, że odradza się udzielanie odpowiedzi zawierających tylko łącze , odpowiedzi SO powinny być końcowym punktem poszukiwania rozwiązania (w porównaniu z kolejną przerwą w dostępie do odniesień, które z czasem stają się nieaktualne). Rozważ dodanie tutaj samodzielnego streszczenia, zachowując link jako odniesienie.
— kleopatra
@kleopatra, dziękujemy za utrzymanie użyteczności witryny. Wiem, że tylko linki (na pewno do witryn takich jak jsfiddle) są odradzane. Dodam kod, którego użyłem.
— Daniël Tulp,
4

To samo, co odpowiedź @ RoToRa, z niewielkimi poprawkami (poprawne kolory i wymiary):

body {
  background-color: #636363;
  padding: 1em;
}

#progressbar {
  background-color: #20201F;
  border-radius: 20px; /* (heightOfInnerDiv / 2) + padding */
  padding: 4px;
}

#progressbar>div {
  background-color: #F7901E;
  width: 48%;
  /* Adjust with JavaScript */
  height: 16px;
  border-radius: 10px;
}
<div id="progressbar">
  <div></div>
</div>
Rozwiń fragment

Oto skrzypce: jsFiddle

A oto jak to wygląda: jsFiddle-screenshot

— DaJF
źródło
4

W nowoczesnych przeglądarkach możesz użyć elementu postępu CSS3 i HTML5!

progress {
  width: 40%;
  display: block; /* default: inline-block */
  margin: 2em auto;
  padding: 3px;
  border: 0 none;
  background: #444;
  border-radius: 14px;
}
progress::-moz-progress-bar {
  border-radius: 12px;
  background: orange;

}
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  progress {
    height: 25px;
  }
}
progress::-webkit-progress-bar {
    background: transparent;
}  
progress::-webkit-progress-value {  
  border-radius: 12px;
  background: orange;
} 
<progress max="100" value="40"></progress>
Rozwiń fragment

— Sanxofon
źródło
3

Pasek postępu bez zagnieżdżonych elementów div ... dla każdego elementu, w którym działa liniowy gradient css.

Tutaj JSFiddle http://jsfiddle.net/oj1L3y6t/2/

function show_progress(i) {
  var progress1 = i;
  var progress2 = progress1 + 1;
  var progress3 = progress1 + 2;

  var magic = "linear-gradient(to right, #FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
  document.getElementById("progress-0").style.background = magic;

  var magic = "linear-gradient(to right, lightblue " + progress1 + "% , lightgreen " + progress2 + "%)";
  document.getElementById("progress-1").style.background = magic;

  var magic = "linear-gradient(to right, lightblue " + progress1 + "% , #FFFFFF 100%)";
  document.getElementById("progress-2").style.background = magic;

  var magic = "linear-gradient(#FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
  document.getElementById("progress-3").style.background = magic;
}

function timeout() {
  t = setTimeout(function() {
    show_progress(t)
    timeout();
  }, 50);
  if (t == 78) {
    clearTimeout(t);
  }
  console.log(t);
}

timeout();
#progress-0 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
}

#progress-1 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
  margin-top: 10px;
  border-radius: 10px;
}

#progress-2 {
  border: 1px solid black;
  width: 500px;
  background: #999;
  text-align: center;
  margin-top: 10px;
}

#progress-3 {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  background: #999;
  line-height: 100px;
  text-align: center;
  margin-top: 10px;
  border-radius: 200px;
}
<div id="progress-0">Loading</div>
<input id="progress-1" value="Loading"></input>
<button id="progress-2">Loading</button>
<p id="progress-3">Loading</p>
Rozwiń fragment

— James
źródło
2

Utwórz element pokazujący lewą część pręta (część okrągłą), stwórz także element dla prawej części. Dla aktualnego paska postępu utwórz trzeci element z powtarzającym się tłem i szerokością zależną od rzeczywistego postępu. Umieść to wszystko na wierzchu obrazu tła (zawierającego pusty pasek postępu).

Ale przypuszczam, że już wiedziałeś, że ...

Edycja : Podczas tworzenia paska postępu, który nie używa tekstowego tła. Możesz użyć, border-radiusaby uzyskać efekt okrągłości , jak pokazali Rikudo Sennin i RoToRa !

— Veger
źródło
1 

.loading {
  position: relative;
  width: 50%;
  height: 200px;
  border: 1px solid rgba(160, 160, 164, 0.2);
  background-color: rgba(160, 160, 164, 0.2);
  border-radius: 3px;
}

span.loader {
  position: absolute;
  top: 40%;
  left: 10%;
  width: 250px;
  height: 20px;
  border-radius: 8px;
  border: 2px solid rgba(160, 160, 164, 0.8);
  padding: 0;
}

span.loader span.innerLoad {
  text-align: center;
  width: 140px;
  font-size: 15px;
  font-stretch: extra-expanded;
  color: #2A00FF;
  padding: 1px 18px 3px 80px;
  border-radius: 8px;
  background: rgb(250, 198, 149);
  background: -moz-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(250, 198, 149, 1)), color-stop(47%, rgba(245, 171, 102, 1)), color-stop(100%, rgba(239, 141, 49, 1)));
  background: -webkit-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -o-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: -ms-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  background: linear-gradient(to right, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fac695', endColorstr='#ef8d31', GradientType=1);
}
<div class="loading">
  <span class="loader">
     	<span class="innerLoad">Loading...</span>
  </span>
</div>
Rozwiń fragment

— user2579594
źródło
1 
    .black-strip
{   width:100%;
    height: 30px;       
    background-color:black; 
}

.green-strip
{   width:0%;           
    height: 30px;       
    background-color:lime;
    animation-name: progress-bar;           
    animation-duration: 4s;  
    animation-iteration-count: infinite; 
}

@keyframes progress-bar { 
    from{width:0%} 
    to{width:100%} 
}

    <div class="black-strip">
        <div class="green-strip">
        </div>
   </div>
— Mujahid Hussain
źródło
0

Jeśli chcesz mieć pasek postępu bez dodawania kodu, PACE może być dla Ciebie niesamowitym narzędziem.

Wystarczy dołączyć plik pace.js i wybrany motyw CSS, a otrzymasz piękny wskaźnik postępu ładowania strony i nawigacji AJAX. Najlepszą rzeczą w PACE jest automatyczne wykrywanie postępu.

Zawiera również różne motywy i schematy kolorów.

Warte spróbowania.

— Anurag Verma
źródło
0 
.bar {
background - color: blue;
height: 40 px;
width: 40 px;
border - style: solid;
border - right - width: 1300 px;
border - radius: 40 px;
animation - name: Load;
animation - duration: 11 s;
position: relative;
animation - iteration - count: 1;
animation - fill - mode: forwards;
}

@keyframes Load {
100 % {
    width: 1300 px;border - right - width: 5;
}
— Tyler Donath
źródło
to jest to, czego użyłem ... do gimnazjalnego projektu kodowania, to; nie jest najładniejsze, ale działa
— Tyler Donath
1
Nie tylko nie jest to najładniejsze, ale jest też nieważne i nie będzie działać. Właściwości CSS nie zawierają spacji. Na przykład background - color: blue;musi byćbackground-color: blue;
— Matijs
0

Korzystanie setInterval.

var totalelem = document.getElementById("total");
var progresselem = document.getElementById("progress");
var interval = setInterval(function(){
    if(progresselem.clientWidth>=totalelem.clientWidth)
    {
        clearInterval(interval);
        return;
    }
    progresselem.style.width = progresselem.offsetWidth+1+"px";
},10)
.outer
{
    width: 200px;
    height: 15px;
    background: red;
}
.inner
{
    width: 0px;
    height: 15px;
    background: green;
}
<div id="total" class="outer">
    <div id="progress" class="inner"></div>
</div>
Rozwiń fragment

Korzystanie CSS Transtitions.

function loading()
{
    document.getElementById("progress").style.width="200px";
}
.outer
{
    width: 200px;
    height: 15px;
    background: red;
}
.inner
{
    width: 0px;
    height: 15px;
    background: green;
    -webkit-transition:width 3s linear;
    transition: width 3s linear;
}
<div id="total" class="outer">
    <div id="progress" class="inner"></div>
</div>
<button id="load" onclick="loading()">Load</button>
Rozwiń fragment

— Vignesh Raja
źródło
0

Jest to poradnik do tworzenia paska postępu HTML5 tutaj . Jeśli nie chcesz używać metod HTML5 lub szukasz rozwiązania obejmującego wszystkie przeglądarki, wypróbuj ten kod:

<div style="width: 150px; height: 25px; background-color: #dbdbdb;">
  <div style="height: 25px; width:87%; background-color: gold">&nbsp;</div>
</div>
Rozwiń fragment

Możesz zmienić kolor ZŁOTY na dowolny kolor paska postępu i #dbdbdb na kolor tła paska postępu.

— Cannicide
źródło
-3

Dlaczego nie możesz po prostu utworzyć wielu zdjęć dla każdej części paska stanu? Jeśli jest to jedna trzecia, po prostu pokaż trzecią część paska stanu ... to bardzo proste. Prawdopodobnie możesz dowiedzieć się, jak zmienić to na następne zdjęcie na podstawie danych wejściowych za pomocą tagu formularza. Oto moja część kodu, musisz później wymyślić treść formularza

<form> <!--(extra code)-->
<!--first progress bar:-->
<img src="directory"></img>
<!--second progress bar:-->
<img src="directory"></img>
<!--et caetera...-->
</form>

Teraz wydaje się to proste, prawda?

— user4093060
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.