Skocz do zawartości


 

Zdjęcie

Uzyskanie efektu progresu w HTML

Uzyskanie efektu progresu w HTML html progress efekt

  • Proszę się zalogować aby odpowiedzieć
2 odpowiedzi na ten temat

Uzyskanie efektu progresu w HTML

#1 Onyke

Onyke

    Nowy użytkownik

  • Użytkownicy
  • 6 postów

Napisany 16 czerwiec 2014 - 12:09

Witam.

Chciałbym zrobić stronę w HTML, a na niej dodać efekt progresu dokładnie taki jak tutaj po kliknięciue "Hack account" : 

http://www.fb-hacker.net/hack.php

Chciałbym wiedzieć jak zrobić, żeby tekst np "Verifying" przesuwał się oraz żeby niżej było odliczanie procentowe. Czyli w skrócie chcę uzyskać dokładnie taki sam efekt jaki jest na tej stronie. Jestem laikiem w tych sprawach więc proszę o jakieś jasne wytłumaczenie/przykład/gotowiec.

 

PS. Tak wiem, że ta strona nie działa, ale chodzi mi tylko o efekt, którego nie mogłem znaleźć na innych stronach.

 

Pozdrawiam.

 


  • 0

#2 kcp

kcp

    Stały użytkownik

  • Użytkownicy
  • PipPipPipPipPip
  • 108 postów
  • Imię:Kacper

Napisany 16 czerwiec 2014 - 17:35

Ja bym użył do tego jQuery.

Tworzysz diva o danej szerokości, w nim diva o szerokości 0% i wysokością 100%, jako background ustawiasz kolor docelowy paska.

Następnie piszesz funkcję która zmienia szerokość tego "diva w divie" od 0% do 100%. ;)

Tyle :P


  • 0

#3 wlodziu

wlodziu

    Stały użytkownik

  • Użytkownicy
  • PipPipPipPipPip
  • 289 postów
  • Skąd:Wieluń

Napisany 16 czerwiec 2014 - 22:23

Mozna zrobić to w jednym, za pomocą :before, czy :after i użyć dodatkowych atrybutów.

Coś na tym przykładzie, ale z animacją i jQuery: http://jquery.nostat...-progress-bary/


  • 0






Także otagowane jednym lub więcej z tych słów kluczowych: html, progress, efekt

0 użytkowników czyta ten temat

0 użytkowników, 0 gości, 0 anonimowych użytkowników