A HTML5 progress element használata
A HTML5-ben debütált a progress element, amely ahogy a neve is mutatja egy folyamatot képes vizuálisan is megjeleníteni a számunkra. Eddig a böngészők nem, vagy csak részben támogatták, de a legutóbbi tesztjeink alapján immár felkerült a palettára.
A következőkben egy-két példát szeretnék mutatni nektek a használatára, valamint a stilizálási lehetőségeinkre.
Használata:
|
1 |
<progress value="23" max="100"></progress> |
Ahogy látjátok, definiálhatunk egy értéket és egy maximumot is. Például remekül használható egy form esetén, ahol le tudjuk definiálni, hogy egy bizonyos kitöltöttség milyen értéket képvisel a maximumhoz képest.
Böngésző támogatottság: Chrome 8+, Firefox 16+, IE 10+, Opera 11+, Safari 6+
Egy rendkívül egyszerű példa a használatára:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> Downloading progress: <progress value="22" max="100"> </progress> </body> </html> |
No hát a móka része innen kezdődik, mert a böngészők mind máshogy támogatják és saját pseudo class-okat használnak a stíluselemekhez.
No nézzük is:
1. Chrome/Safari/Opera
A definíció itt a következő:
|
1 2 3 4 5 6 7 8 |
progress[value] { /* Reset */ -webkit-appearance: none; appearance: none; /* méretek */ width: 250px; height: 20px; } |
A pseudo class-ok pedig a következők:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
progress[value]::-webkit-progress-bar { background-color: #eee; 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%; } |
Itt a példa, ha megnézed, csak a fent említett böngészőkben működik.
2. Firefox
A definíció a következő:
|
1 2 3 4 5 6 7 8 9 10 |
progress[value] { /* Reset */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Méretek */ width: 250px; height: 20px; } |
A pseudo class-ok pedig a következők:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
progress[value]::-moz-progress-bar { background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66% ), -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25) ), -moz-linear-gradient( left, #09c, #f44 ); border-radius: 2px; background-size: 35px 20px, 100% 100%, 100% 100%; } |
3. Internet Explorer 10+
Ismét vicces, de itt csak a színt állíthatjuk. Semmi mást nem támogat. Példa:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
progress[value] { /* Reset */ -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; /* Méretek */ width: 250px; height: 20px; /* For IE10 */ color: blue; } |
A progress bar animálása
Ezt remekül megtehetjük akár jQuery-vel is. Hiszen ez a legegyszerűbb.
A teljes kód:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!doctype html> <html> <head> <title>HTML5 Progress Bar Demo</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/modernizr.js" type="text/javascript"></script> <script> $(document).ready(function() { if(!Modernizr.meter){ alert('Sorry your brower does not support HTML5 progress bar'); } else { var progressbar = $('#progressbar'), max = progressbar.attr('max'), time = (1000/max)*5, value = progressbar.val(); var loading = function() { value += 1; var val = progressbar.val(value); $('.progress-value').html(value + '%'); if (value == max) { clearInterval(animate); $('.progress-value').html(max + '%'); } }; var animate = setInterval(function() { loading(); }, time); }; }); </script> </head> <body> <div class="demo-wrapper html5-progress-bar"> <div class="progress-bar-wrapper"> <progress id="progressbar" value="0" max="100"></progress> <span class="progress-value">0%</span> </div> </div> </body> </html> |
A példát itt megtekintheted. Itt pedig le tudod tölteni.
173 hozzászólás
tadalafil 20 mg http://cialisonli.com/
Useful advice. Thank you.
canadian pharmacy online 24 http://aderodsgen.strikingly.com/
Nicely put, Thanks a lot!
northwest pharmacy canada http://www.yogabank.co.kr/keep/3605321
Incredible a good deal of great info!
Viagra bula http://kwoodraco.strikingly.com/
Many thanks. An abundance of material.
Viagra vs viagra http://opveiflor.strikingly.com/
Thanks, I like this!
medication without a doctors prescription http://cialisvi.com/
You actually reported that superbly!
Viagra dosage http://viagravonline.com/
Thanks, Quite a lot of facts.
canadian pharmacy meds http://www.buylevitraa.com/
Amazing a lot of helpful facts!
global pharmacy canada http://www.buylevitraa.com/
Thank you, A lot of postings.
canadian prescriptions online http://www.viagravonline.com/
You actually stated that well!
canadian pharmacy cialis http://www.viagravonline.com/
Lovely content. Cheers.
Google
Although internet sites we backlink to below are considerably not connected to ours, we really feel they’re actually worth a go by, so have a look.
male stroker review
[…]check beneath, are some totally unrelated internet sites to ours, on the other hand, they’re most trustworthy sources that we use[…]
hire a skip bin
[…]the time to read or check out the subject material or web sites we have linked to beneath the[…]
Suan Sunandha Rajabhat University
[…]check beneath, are some absolutely unrelated websites to ours, having said that, they are most trustworthy sources that we use[…]
power bullet vibe
[…]Sites of interest we have a link to[…]
spanking paddle
[…]The details talked about within the write-up are some of the best offered […]
top vibrating panties
[…]the time to read or go to the content material or web sites we’ve linked to beneath the[…]
bondage
[…]always a big fan of linking to bloggers that I adore but dont get a good deal of link appreciate from[…]
babypoppen kopen
[…]below youll uncover the link to some web-sites that we feel you must visit[…]
Christine Reidhead, Podcaster
[…]below you will discover the link to some websites that we consider you’ll want to visit[…]
porn
[…]Here is a great Blog You may Locate Intriguing that we Encourage You[…]
viagra
[…]usually posts some extremely exciting stuff like this. If you are new to this site[…]
Online Gambling
[…]below you will uncover the link to some internet sites that we think you should visit[…]
Julia Ann Porn
[…]that is the finish of this post. Here you will locate some sites that we believe you will enjoy, just click the hyperlinks over[…]
Download Adobe Photoshop
[…]although web sites we backlink to beneath are considerably not related to ours, we feel they may be really really worth a go by way of, so possess a look[…]
Fashion Station
[…]The information talked about in the write-up are some of the most effective offered […]
geile sex filmpjes
[…]just beneath, are several totally not connected web-sites to ours, having said that, they may be certainly really worth going over[…]
pornofilmpjes
[…]The information mentioned within the write-up are some of the most beneficial offered […]
homemade sex toy
[…]here are some links to internet sites that we link to due to the fact we believe they are really worth visiting[…]
nightwish – while your lips are still red перевод
[…]Here are several of the sites we suggest for our visitors[…]
english translation
[…]one of our guests recently encouraged the following website[…]
hundejakke
[…]we came across a cool site that you simply may possibly love. Take a search should you want[…]
nipple clamping
[…]Wonderful story, reckoned we could combine a few unrelated information, nevertheless actually really worth taking a look, whoa did 1 discover about Mid East has got a lot more problerms too […]
plus size sex toys
[…]below you will locate the link to some web sites that we assume it is best to visit[…]
cairo massage
[…]please visit the web sites we follow, such as this a single, because it represents our picks from the web[…]
one walmart login
[…]one of our guests not too long ago proposed the following website[…]
Bluechew reviews
[…]check below, are some absolutely unrelated web sites to ours, even so, they’re most trustworthy sources that we use[…]
rape porn
[…]Sites of interest we’ve a link to[…]
3 weeks pregnant symptoms
[…]check below, are some totally unrelated web-sites to ours, nonetheless, they may be most trustworthy sources that we use[…]
http://www.outlook.fr
[…]Here are some of the web-sites we recommend for our visitors[…]
bondage gear
[…]we prefer to honor quite a few other online internet sites on the net, even when they arent linked to us, by linking to them. Beneath are some webpages really worth checking out[…]
toefl Institute in Delhi
[…]we came across a cool web page that you simply might delight in. Take a look for those who want[…]
فني ستلايت مبارك الكبير
[…]The information mentioned within the post are a few of the very best obtainable […]
sex lube
[…]here are some links to web pages that we link to due to the fact we consider they’re really worth visiting[…]
podcast
[…]here are some hyperlinks to web sites that we link to since we think they may be worth visiting[…]
dominoqq
[…]check beneath, are some absolutely unrelated internet websites to ours, even so, they are most trustworthy sources that we use[…]
Executive transportation
[…]the time to study or pay a visit to the content material or internet sites we’ve linked to beneath the[…]
best vibrator
[…]always a big fan of linking to bloggers that I love but really don’t get quite a bit of link love from[…]
suction cup dildo
[…]very few internet sites that take place to become detailed below, from our point of view are undoubtedly nicely worth checking out[…]
tax free
[…]Wonderful story, reckoned we could combine a handful of unrelated data, nevertheless truly worth taking a look, whoa did one understand about Mid East has got far more problerms too […]
home decor elephant
[…]check beneath, are some completely unrelated internet websites to ours, having said that, they may be most trustworthy sources that we use[…]
Ντετέκτιβ Θεσσαλονίκη
[…]Here are a few of the websites we advise for our visitors[…]
How To Remove The Background From An Image Online Free Without PhotoShop
[…]just beneath, are various completely not related internet sites to ours, even so, they’re certainly really worth going over[…]
Roadrunner Email
[…]please go to the internet sites we adhere to, including this 1, as it represents our picks from the web[…]
Roadrunner Email
[…]please pay a visit to the web-sites we follow, including this 1, as it represents our picks from the web[…]
hasta yatağı
[…]here are some links to internet sites that we link to simply because we believe they’re worth visiting[…]
online marketing agency
[…]we like to honor several other internet sites on the web, even if they arent linked to us, by linking to them. Below are some webpages really worth checking out[…]
realistic masturbators
[…]Here is a great Weblog You may Find Intriguing that we Encourage You[…]
turtle jewelry
[…]below you will come across the link to some sites that we think it is best to visit[…]
gay sex toys tumblr
[…]below youll obtain the link to some web-sites that we consider you ought to visit[…]
best pleasure toys for couples
[…]check beneath, are some totally unrelated websites to ours, even so, they may be most trustworthy sources that we use[…]
pocket pussy
[…]please pay a visit to the web sites we follow, which includes this 1, because it represents our picks from the web[…]
mide 676
[…]always a significant fan of linking to bloggers that I enjoy but really don’t get quite a bit of link love from[…]
gay dildo
[…]please pay a visit to the web-sites we follow, like this one, because it represents our picks from the web[…]
canada online pharmacies http://www.buylevitraa.com/
Regards! Great stuff.
EZ baccarat Strategy
[…]here are some hyperlinks to web pages that we link to for the reason that we think they are worth visiting[…]
Blackjack Strategies
[…]always a massive fan of linking to bloggers that I appreciate but do not get a good deal of link really like from[…]
canadian cialis http://www.viagravipsale.com/
Very well expressed certainly. .
online pharmacy canada http://www.viagraessale.com/
You actually expressed it effectively!
domain registration
[…]Every as soon as inside a even though we opt for blogs that we read. Listed below would be the most up-to-date websites that we pick […]
davido song
[…]just beneath, are a lot of completely not related web-sites to ours, on the other hand, they are surely worth going over[…]
global pharmacy canada http://www.viagrayosale.com/
Many thanks, An abundance of material.
canada pharmacies http://www.viagravonline.com/
You expressed this adequately.
outlook sign in
[…]although internet websites we backlink to beneath are considerably not related to ours, we really feel they’re truly really worth a go via, so possess a look[…]
prescriptions from canada without http://canadianpharmacyes.com/
Seriously all kinds of amazing material!
ssni 550
[…]check beneath, are some absolutely unrelated web sites to ours, having said that, they are most trustworthy sources that we use[…]
rabbit vibrators
[…]although internet websites we backlink to beneath are considerably not related to ours, we really feel they are actually really worth a go by, so have a look[…]
online pharmacy http://canadianpharmacyonl.com/
Thanks, Quite a lot of content!
adam and eve offer codes
[…]The information and facts talked about inside the report are several of the ideal accessible […]
rechargeable rabbit vibrator
[…]we came across a cool web-site that you could get pleasure from. Take a appear if you want[…]
canadian viagra http://canadianorderpharmacy.com/
Amazing facts, Many thanks.
canada drugs online http://canadiantousapharmacy.com/
Really all kinds of wonderful material!
Instagram Likes
[…]The details mentioned in the article are some of the top available […]
Ghana News
[…]that may be the end of this article. Right here you will locate some sites that we assume you will appreciate, just click the hyperlinks over[…]
canada drug pharmacy http://ukcanadianpharmacy.com/
Lovely write ups, With thanks.
sex positive
[…]The information and facts mentioned inside the write-up are a few of the most effective obtainable […]
how much is penis enlargement
[…]we prefer to honor several other world-wide-web web pages on the internet, even when they arent linked to us, by linking to them. Underneath are some webpages worth checking out[…]
bàn tăng chỉnh chiều cao
[…]one of our visitors just lately recommended the following website[…]
https://www.prepaidgiftbalance.site/
[…]usually posts some extremely fascinating stuff like this. If youre new to this site[…]
pharmacy canada http://babecolate.com/
With thanks. Useful information.
canada pharmacy http://babecolate.com/
Helpful stuff. With thanks!
canadian pharmacy online http://canadianpharmacyes.com/
Beneficial forum posts. With thanks!
Virtual Card buy
[…]that may be the end of this write-up. Right here youll come across some internet sites that we think youll enjoy, just click the hyperlinks over[…]
CAWD-004
[…]Here is a good Blog You may Find Fascinating that we Encourage You[…]
mynordstrom.com
[…]very few sites that transpire to be detailed beneath, from our point of view are undoubtedly properly worth checking out[…]
anal play
[…]just beneath, are many entirely not connected sites to ours, on the other hand, they may be certainly really worth going over[…]
fashion jockstraps
[…]although websites we backlink to beneath are considerably not related to ours, we feel they may be basically worth a go through, so possess a look[…]
Google
The time to study or visit the subject material or sites we have linked to beneath.
siofok siofok siofok siofok
[…]The facts mentioned in the report are a few of the top accessible […]
adam and eve promo codes july 2019
[…]Wonderful story, reckoned we could combine a handful of unrelated information, nevertheless really worth taking a search, whoa did one particular find out about Mid East has got far more problerms too […]
apps download for windows 10
[…]Every the moment inside a though we select blogs that we study. Listed below are the most recent websites that we choose […]
pc software full download
[…]Every after in a even though we decide on blogs that we study. Listed below are the most recent sites that we decide on […]
apps for pc download
[…]below youll locate the link to some web-sites that we feel it is best to visit[…]
free download for windows
[…]just beneath, are many completely not related sites to ours, nevertheless, they may be certainly worth going over[…]
play games on pc
[…]check below, are some absolutely unrelated websites to ours, on the other hand, they are most trustworthy sources that we use[…]
pc games for windows 8
[…]here are some hyperlinks to web pages that we link to since we feel they are worth visiting[…]
free download for windows 10
[…]Here are a few of the web-sites we suggest for our visitors[…]
vcc buy for paypal verify
[…]we came across a cool internet site that you could possibly delight in. Take a search for those who want[…]
full version pc games download
[…]below you will locate the link to some sites that we feel you ought to visit[…]
apps download for windows 8
[…]here are some links to web pages that we link to because we feel they’re really worth visiting[…]
app download for pc
[…]we prefer to honor lots of other world-wide-web web-sites on the web, even though they arent linked to us, by linking to them. Beneath are some webpages worth checking out[…]
pc games apps for laptop
[…]although internet websites we backlink to below are considerably not associated to ours, we feel they may be really worth a go via, so possess a look[…]
uk number for whatsapp verification
[…]we like to honor lots of other internet internet sites on the internet, even though they arent linked to us, by linking to them. Below are some webpages worth checking out[…]
free download for windows 10
[…]always a major fan of linking to bloggers that I really like but dont get a whole lot of link like from[…]
pc games for windows xp
[…]although web-sites we backlink to below are considerably not related to ours, we feel they may be really worth a go by means of, so possess a look[…]
app download for windows 10
[…]Here is a good Blog You might Obtain Interesting that we Encourage You[…]
داستان سکسی مامان
[…]check below, are some absolutely unrelated internet websites to ours, nonetheless, they may be most trustworthy sources that we use[…]
pc games for laptop pc
[…]although websites we backlink to below are considerably not associated to ours, we really feel they’re essentially worth a go by way of, so possess a look[…]
free download for pc windows
[…]Here are a number of the web sites we suggest for our visitors[…]
exotic carts official
[…]the time to read or visit the content or sites we’ve linked to beneath the[…]
Boston Car Service
[…]The details talked about inside the report are several of the ideal obtainable […]
Eweka
[…]Here is a good Weblog You may Find Intriguing that we Encourage You[…]
Minyak Kelapa
[…]usually posts some very fascinating stuff like this. If you are new to this site[…]
best blow job tips
[…]one of our visitors recently recommended the following website[…]
college grants for women
[…]usually posts some really intriguing stuff like this. If you are new to this site[…]
tree care saskatoon
[…]always a massive fan of linking to bloggers that I like but dont get a whole lot of link really like from[…]
exotic carts for sale
[…]Here is a good Weblog You may Uncover Interesting that we Encourage You[…]
العاب اكشن
[…]the time to study or stop by the content or internet sites we’ve linked to below the[…]
supreme dab cartridges
[…]we came across a cool web-site that you simply could possibly appreciate. Take a appear when you want[…]
supreme wax cartridge
[…]here are some links to web sites that we link to because we believe they are worth visiting[…]
Melbourne Lawyer
[…]we came across a cool internet site which you may get pleasure from. Take a look when you want[…]
THC vape oil discreet shipping UK
[…]please stop by the sites we follow, which includes this one, as it represents our picks from the web[…]
THC vape juice discreet shipping USA
[…]Every after inside a even though we pick out blogs that we read. Listed below would be the latest web pages that we pick […]
baking cakes in kenya
[…]Here are some of the websites we advocate for our visitors[…]
Teen Swallow
[…]Here is a great Weblog You might Come across Intriguing that we Encourage You[…]
THC vape juice discreet shipping
[…]Here is a great Blog You might Obtain Interesting that we Encourage You[…]
https://www.amazon.com/dp/B07W6SP89N/ref=sr_1_1?keywords=books+best+sellers&qid=1565320651&s=digital-text…
[…]we came across a cool web-site that you may take pleasure in. Take a look in case you want[…]
network marketing
[…]please go to the web sites we follow, which includes this one, because it represents our picks in the web[…]
Golden Eagle Blackjack Strategy
[…]we prefer to honor lots of other net sites around the net, even when they arent linked to us, by linking to them. Below are some webpages really worth checking out[…]
Roulette Strategy that Works
[…]Wonderful story, reckoned we could combine a few unrelated information, nevertheless definitely worth taking a appear, whoa did one particular study about Mid East has got much more problerms also […]
runelite
[…]check beneath, are some totally unrelated web-sites to ours, nonetheless, they may be most trustworthy sources that we use[…]
one.walmart.com
[…]we like to honor lots of other internet sites around the web, even though they arent linked to us, by linking to them. Underneath are some webpages worth checking out[…]
mygiftcardsite.com login
[…]Here is a great Blog You may Uncover Interesting that we Encourage You[…]
MEYD 525
[…]we like to honor numerous other online websites on the internet, even if they arent linked to us, by linking to them. Underneath are some webpages really worth checking out[…]
Beautiful t shirts
[…]Sites of interest we’ve a link to[…]
Sexy girl clothing
[…]Here is a great Weblog You may Discover Interesting that we Encourage You[…]
http://thefrenchsupply.com
[…]Every when in a even though we pick blogs that we study. Listed beneath would be the newest web sites that we opt for […]
618media.com
[…]the time to read or take a look at the content material or sites we’ve linked to beneath the[…]
Factory & warehouse Cleaning Sydney
[…]Here is a superb Blog You may Discover Intriguing that we Encourage You[…]
adam and eve masturbator
[…]The info talked about within the post are a few of the most beneficial obtainable […]
prostate toys
[…]check below, are some entirely unrelated internet sites to ours, however, they are most trustworthy sources that we use[…]
tech news
[…]Every once in a when we choose blogs that we read. Listed below are the latest sites that we pick […]
dank vapes
[…]please take a look at the web-sites we comply with, which includes this one, as it represents our picks through the web[…]
buy ambien online
[…]here are some hyperlinks to web pages that we link to since we consider they are really worth visiting[…]
jockstrap bulge
[…]we came across a cool web page that you just might enjoy. Take a appear should you want[…]
gay male bondage gear
[…]just beneath, are a lot of completely not connected internet sites to ours, on the other hand, they may be surely worth going over[…]
gay bondage set
[…]Wonderful story, reckoned we could combine a couple of unrelated data, nonetheless seriously worth taking a look, whoa did one particular study about Mid East has got extra problerms also […]
best lube for gay men
[…]Wonderful story, reckoned we could combine a few unrelated information, nevertheless really really worth taking a look, whoa did a single discover about Mid East has got a lot more problerms at the same time […]
logo designers birmingham
[…]Here are a few of the websites we advise for our visitors[…]
Slot Jackpot Online
[…]we prefer to honor quite a few other world wide web web pages on the web, even though they arent linked to us, by linking to them. Below are some webpages really worth checking out[…]
IPX 363
[…]The data mentioned in the write-up are a number of the very best out there […]
invest in bitcoin
[…]one of our guests recently recommended the following website[…]
online mobile number for whatsapp verify
[…]The details mentioned inside the article are a few of the most beneficial obtainable […]
سحاق بنات هايجة
[…]one of our guests not long ago suggested the following website[…]
gay enema bag
[…]usually posts some really exciting stuff like this. If youre new to this site[…]
best male masturbator
[…]Wonderful story, reckoned we could combine a couple of unrelated data, nonetheless seriously worth taking a appear, whoa did one understand about Mid East has got additional problerms as well […]
SEO Vancouver
[…]below youll locate the link to some sites that we feel you need to visit[…]
Places to eat near me
[…]check below, are some entirely unrelated web-sites to ours, on the other hand, they’re most trustworthy sources that we use[…]
PPPD-792
[…]just beneath, are quite a few entirely not related web pages to ours, nevertheless, they may be surely worth going over[…]
https://affiliatedisciples.com/getresponse-review-from-actual-user-2019/
[…]just beneath, are quite a few absolutely not associated websites to ours, on the other hand, they are surely worth going over[…]
Andheri Escorts
[…]Sites of interest we’ve a link to[…]
couples sex toys
[…]although web-sites we backlink to below are considerably not associated to ours, we feel they’re basically really worth a go by means of, so have a look[…]