Pasek postępu z HTML i CSS

Question 1

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?

Question 2

#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)

Question 3

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

Question 4

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

Question 5

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

Question 6

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

Question 7

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

Question 8

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

Question 9

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 !

Question 10

.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

Question 11

    .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>

Question 12

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.

Question 13

.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;
}

Question 14

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

Question 15

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.

Question 16

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?

Answer 1

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

Answer 2

#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)

Answer 3

3

Niektórzy mogą uznać, że pasek postępu z wyśrodkowanym wskaźnikiem procentowym jest jeszcze bardziej przydatny.

Tomáš Zato - Przywróć Monikę

Answer 4

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

Answer 5

3

W zależności od przeglądarki trzeba użyć border-radius, -webkit-border-radiusalbo-moz-border-radius

Veger

Answer 6

Brawa za zajęcie tylko 3 minut, musisz być super utalentowaną osobą na pasku postępu! łał!

Daniël Tulp

Answer 7

@Daniel dlaczego dziękuję! Fajnie, gdy ludzie to zauważą!

Madara's Ghost

Answer 8

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

Answer 9

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

Answer 10

Od 2020 r. Obsługiwane całkiem dobrze we wszystkich przeglądarkach: caniuse.com/#feat=progress

frackham

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

@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,

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

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 !

Answer 19

.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

Answer 20

    .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>

Answer 21

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.

Answer 22

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

Answer 23

to jest to, czego użyłem ... do gimnazjalnego projektu kodowania, to; nie jest najładniejsze, ale działa

Tyler Donath

Answer 24

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

Answer 25

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

Answer 26

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.

Answer 27

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?

Pasek postępu z HTML i CSS

Odpowiedzi: