Tak jak w temacie
w html5
Nie da się, potrzebujesz jeszcze JS. To w skrypcie JS będzie zaimplementowana cała funkcjonalność.
Czyli jak
A co już masz? Bo jeśli czekasz na gotowy kod, to średni pomysł na naukę.
@Fizyda: Nie koniecznie. Pasek można zrobić w css, a tylko kliknięcie w JS. 
1 polubienie
To prawda czy nie? Bo najpierw mówisz, że niekoniecznie mam rację - czyli istnieje inne wyjście niż JS, a potem mówisz, że JS jest potrzebny. Gdzie tu logika i konsekwencja?
Nawet gdyby się uprzeć i chcieć to zrobić w C++ to i tak do manipulacji drzewem DOM potrzebujesz JS, czyli algorytm (jakkolwiek śmiesznie to brzmi bo to może z 5 linijek kodu łącznie) możesz napisać w C++ i podpiąć się do niego przy pomocy JS.
Można też się posiłować z inputami i labelami by od ich stanu ustalić czy uruchomić animacje (tak np. można zrobić spoiler bez JS - chociaż już można spokojne do spoilerów użyć details).
Dodajesz obsługę zdarzenia onclick na przycisku i w funkcji obsługującej to zdarzenie manipulujesz paskiem postęp zwiększając postęp. Manipulacja ogranicza się do zmiany wartości atrybutu value dla elementu progress.
EDIT:
Dla jasności pisząc o elemencie progress mam na myśli ten - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
1 polubienie
To prawda czy nie? Bo najpierw mówisz, że niekoniecznie mam rację - czyli istnieje inne wyjście niż JS, a potem mówisz, że JS jest potrzebny. Gdzie tu logika i konsekwencja?
Kolego, bez obrazy ale czy Ty masz problem z nerwicą natręctw? Lubisz się czepiać czy to odwet za ostatni temat z konfiguracją htaccess, gdzie być może nadepnąłem Ci na odcisk?
Napisałeś:
To w skrypcie JS będzie zaimplementowana cała funkcjonalność.
Na co ja odpisałem, że nie koniecznie (w sensie "nie koniecznie cała funkcjonalność będzie w JS). Bo samą animację można zrobić w CSS, a tylko kliknięcie (a właściwie reakcja) w JS.
Serio, nie widzę potrzeby czepiania się i wzajemnej wrogości.
Pozdrawiam cieplutko w ten jesienny późny wieczór.
@aktywny27
Nie musisz koniecznie korzystać z progressbara do wyświetlenia postępu jakiegoś procesu. Można użyć 2 elementow DIV (jeden w drugim), z czego pierwszy będzie robił za ramkę, a drugi za “napełniający się pasek”. Wtedy masz większe pole do popisu jeśli chodzi o dopieszczenie tego graficznie.
I dziwię się, że nie wpisałeś swojego pytania do Google, to tam jest masa gotowych skryptów i pewnie kilka dobrze opisanych poradników, jak zrobić to samemu krok po kroku.
Faktycznie w necie jest dużo przykładowych kodów.
Coś znalazłem i jak zrobić żeby był to kolorowy pasek i z gradientem i jak to zmieniać
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_progressbar_js
Ogólny kod CSS przykładowego gradientu dla atrybutu tła:
background: linear-gradient(left, #1e5799 0%,#2989d8 50%,#7db9e8 100%);
Zastosowanie go do podanego przykładu (wkleić nad znacznikiem body):
<style>#myBar {background: linear-gradient(left, #1e5799 0%,#2989d8 50%,#7db9e8 100%);}</style>
Prefiksy przeglądarek stosowane w CSS:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Jeśli chcesz by gradient był wyświetlany w “każdej” przeglądarce, musisz powielić zapis atrybutu tła, dopisując prefix do “linear-gradient”, czyli np. “-webkit-linear-gradient”, “-moz-linear-gradient” itd.
Ja bym to powielał z głową:
https://caniuse.com/#feat=css-gradients - może nie akurat dokładnie linear gradient ale widać jakie starocie ktoś by musiał używać (IE9, FX35, Chrome 25, Opera 11.5) a np. pod Safari niby trzeba by przerobić na starszą specyfikacje gradientów.
A gdzie wstawić link do strony gdzie po naciśnięciu w button i jak progress bar dojdzie do końca to on click przekieruje mnie na stronę www jakąś i gdzie ten link wstawić.
Czekam na odpowiedz
A może jednak sam poszukasz? Po kliknięciu musisz odczekać x sekund (tyle ile trwa animacja) a potem przekierować.
Już dostałeś, nawet kilka, więc nie kłam i powiedz wprost, że czekasz na gotowe rozwiązanie.
Tylko to przekierowanie nie wiem jak zrobić w buttonie po wykonaniu progress bar.