{"id":3569,"date":"2014-12-05T11:02:03","date_gmt":"2014-12-05T10:02:03","guid":{"rendered":"http:\/\/jam.pecsma.hu\/?p=3569"},"modified":"2014-12-05T11:02:03","modified_gmt":"2014-12-05T10:02:03","slug":"varakozas-hosszu-masodpercei-loader","status":"publish","type":"post","link":"https:\/\/jammer.hu\/exjammer\/2014\/12\/05\/varakozas-hosszu-masodpercei-loader\/","title":{"rendered":"A v\u00e1rakoz\u00e1s hossz\u00fa m\u00e1sodpercei"},"content":{"rendered":"

A g\u00e9p forog, az alkot\u00f3… az alkot\u00f3 fesz\u00fclten v\u00e1rja, hogy elt\u0171nj\u00f6n\u00a0az a rohadt homok\u00f3ra…!<\/strong><\/p>\n

<\/p>\n

Ismered az \u00e9rz\u00e9st, ugye? A homok\u00f3r\u00e1z\u00e1st, vagy a k\u00f6r\u00f6z\u00e9st, meg\u00a0a cs\u00edkot, ami m\u00e9g 95%-ig elv\u00e1nszorog, de ott mintha meg\u00e1llna.<\/p>\n

[su_highlight background=”#00dbf7″ color=”#ffffff”]Loading… Please wait![\/su_highlight]<\/p>\n

\u00c9s te\u00a0nem tehetsz semmit. V\u00e1rsz. M\u00e9g mindig v\u00e1rsz. \u00c9s m\u00e9g mindig v\u00e1rsz.<\/p>\n

\"sandclock\"<\/a><\/p>\n

Sok\u00e1ig\u00a0\u00fagy t\u0171nt, mintha a v\u00e1rakoz\u00e1s egyetlen m\u00f3dja a rohad\u00e9k homok\u00f3ra rohad\u00e9k forg\u00e1s\u00e1nak meredt b\u00e1mul\u00e1sa volna.<\/p>\n

 <\/p>\n

Azt\u00e1n j\u00f6ttek a k\u00f6rk\u00f6r\u00f6s megold\u00e1sok. Azok se voltak sokkal jobbak.<\/p>\n

\"1064534191\"<\/a>\"29\"<\/a>\"lightbox-ico-loading1\"<\/a>\"preloader<\/a>\"Loading\"<\/a>\"loading-icon\"<\/a>\"loading-icon<\/a><\/p>\n

Ilyesmiket ma m\u00e1r az ember k\u00f6nnyed\u00e9n leprogramozhat mag\u00e1nak CSS-ben, ha kicsit is \u00e9rt hozz\u00e1, de el\u0151re elk\u00e9sz\u00edtett elemekb\u0151l is \u00f6ssze lehet rakni \u0151ket, m\u00e1sodpercek alatt, p\u00e9ld\u00e1ul a\u00a0cssload.net<\/a>-en.<\/p>\n

De azt\u00e1n sz\u00e9pen lassan elkezdt\u00e9k bel\u00e1tni a szakemberek, hogy lehet ezt m\u00e1shogy is. Hogy mehet bele esetleg fant\u00e1zia. Lehet egy\u00e9ni, a program vagy honlap st\u00edlus\u00e1hoz passzol\u00f3 a megold\u00e1s. Sz\u00f3val hogy lehet sz\u00e9p \u00e9s st\u00edlusos.<\/p>\n

El\u0151sz\u00f6r\u00a0mer\u00fclt fel, hogy tal\u00e1n lehet ez\u00a0sz\u00ednes is.<\/p>\n

\"Preloader_8\"<\/a> \"Preloader_9\"<\/a> \"Preloader_10\"<\/a>\"Preloader_7\"<\/p>\n

\u00c9rdekes m\u00f3don a k\u00f6r\u00f6k, p\u00f6tty\u00f6k, karik\u00e1k megmaradtak. A loader anim\u00e1ci\u00f3k legjellemz\u0151bb form\u00e1i m\u00e1ig ezek. Valahogy benne van az id\u0151 m\u00fal\u00e1s\u00e1nak ill\u00fazi\u00f3ja a mozg\u00e1sban, meg az \u00e1lland\u00f3s\u00e1g („itt fogok megrohadni a g\u00e9p el\u0151tt”<\/em>) \u00e9rz\u00e9se a k\u00f6rform\u00e1ban.<\/p>\n

De az\u00e9rt van persze\u00a0mindenf\u00e9le m\u00e1s geometrikus forma is:<\/p>\n

\"hex-loader2\"<\/a><\/p>\n

 <\/p>\n

\"infinite-gif-preloader\"<\/p>\n

\"preloader\"<\/a><\/p>\n

\"wedfgvb\"<\/a><\/p>\n

\"loadingaaa\"<\/a><\/p>\n

Azt\u00e1n elszabadultak a grafikusok, \u00e9s\u00a0senki nem \u00e1ll\u00edthatta meg \u0151ket t\u00f6bb\u00e9:<\/p>\n

\"preloader<\/p>\n

Mennyivel k\u00f6nnyebben telik az id\u0151, ha k\u00f6zben m\u00f3kusker\u00e9kben tapos\u00f3 macsk\u00e1t<\/a> n\u00e9zel, nem?<\/p>\n

\"KURSLR2\"<\/p>\n

Vagy \u00f6\u00f6\u00f6… pulz\u00e1l\u00f3 toj\u00e1st.<\/p>\n

\"egg-gif-preloader\"<\/p>\n

Esetleg egy forg\u00f3 krumplit. (??)<\/p>\n

\"preloader<\/p>\n

A leg\u00fajabb webdesign \u00e9s mobilapplik\u00e1ci\u00f3 trendek \u00e9s technol\u00f3gi\u00e1k is kitermelt\u00e9k a maguk saj\u00e1t loader anim\u00e1ci\u00f3s st\u00edlusukat. A legut\u00f3bbi divatot k\u00f6vetve jobb\u00e1ra letisztult, egyszer\u0171, lapos (flat) cuccok, van k\u00f6zt\u00fck egy csom\u00f3 sz\u00e9p is. Most \u00e9ppen\u00a0nem is alkalmazott grafikus anim\u00e1lja\u00a0\u0151ket, hanem programoz\u00f3, CSS-ben.<\/p>\n

(B\u00e1r, amerre a dolgok mostan\u00e1ban mennek, egyre t\u00f6bb olyan fejleszt\u00e9s\u00a0l\u00e1t napvil\u00e1got, ahol programoz\u00e1si ismeretek n\u00e9lk\u00fcl lehet weblapot vagy ak\u00e1r anim\u00e1ci\u00f3t csin\u00e1lni, \u00edgy a grafikusoknak egyre\u00a0k\u00f6nnyebb a dolga. Megl\u00e1tjuk, mit hoz a j\u00f6v\u0151.)<\/p>\n

\"15788\"<\/a><\/p>\n

Mozg\u00e1s k\u00f6zben ezeket itt tudod megn\u00e9zni:\u00a0http:\/\/tobiasahlin.com\/spinkit\/<\/a>\u00a0– ugyanitt a forr\u00e1sk\u00f3dok is el\u00e9rhet\u0151k.<\/p>\n

\u00c9s ezeknek is megtal\u00e1lod a forr\u00e1sk\u00f3dj\u00e1t:<\/p>\n

See the Pen Loaders (WIP)<\/a> by Tania LD (@TaniaLD<\/a>) on CodePen<\/a>.<\/p>\n

See the Pen Such Spinners, Much Loading<\/a> by Hsu-Cherng (@Zeneraith<\/a>) on CodePen<\/a>.<\/p>\n

See the Pen Multi color loader<\/a> by Emmanuel Franc (@Emmanuel_Franc<\/a>) on CodePen<\/a>.<\/p>\n

See the Pen Loader #1<\/a> by Sam Lillicrap (@samueljweb<\/a>) on CodePen<\/a>.<\/p>\n

Ut\u00f3bbiak\u00a0a\u00a0designify.me<\/a>-r\u0151l vannak.<\/p>\n

A loaderek azonban t\u00f6bbnyire nem sokkal t\u00f6bbek, mint v\u00e9gtelen\u00edtett anim\u00e1ci\u00f3k. Nem mondj\u00e1k meg, mi t\u00f6rt\u00e9nik a h\u00e1tt\u00e9rben, s\u0151t, gyakran akkor is folytatj\u00e1k a p\u00f6rg\u00e9st, ha a g\u00e9ped am\u00fagy m\u00e1r r\u00e9g szabira ment. Ezekn\u00e9l egy fokkal bar\u00e1ts\u00e1gosabbak az \u00fan. progress bar<\/em>-ok, amik azt is mutatj\u00e1k, hogy hol tart \u00e9pp a h\u00e1tt\u00e9rfolyamat, ami miatt v\u00e1rnod kell. Tudod, ez az a cs\u00edk, ami mindig meg\u00e1ll 99%-n\u00e1l.<\/p>\n

Legk\u00f6zelebb azok k\u00f6z\u00fcl n\u00e9z\u00fcnk p\u00e1r p\u00e9ld\u00e1t.<\/p>\n

Addig is: v\u00e1rjuk egy\u00fctt a mikul\u00e1st!:<\/p>\n

\"load\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

A g\u00e9p forog, az alkot\u00f3… az alkot\u00f3 fesz\u00fclten v\u00e1rja, hogy elt\u0171nj\u00f6n az a rohadt homok\u00f3ra…!<\/p>\n","protected":false},"author":1,"featured_media":3610,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[11],"tags":[526,830,1409],"class_list":["post-3569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-gif","tag-loader","tag-webdesign"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/jammer.hu\/exjammer\/wp-json\/wp\/v2\/posts\/3569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jammer.hu\/exjammer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jammer.hu\/exjammer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jammer.hu\/exjammer\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jammer.hu\/exjammer\/wp-json\/wp\/v2\/comments?post=3569"}],"version-history":[{"count":0,"href":"https:\/\/jammer.hu\/exjammer\/wp-json\/wp\/v2\/posts\/3569\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jammer.hu\/exjammer\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/jammer.hu\/exjammer\/wp-json\/wp\/v2\/media?parent=3569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jammer.hu\/exjammer\/wp-json\/wp\/v2\/categories?post=3569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jammer.hu\/exjammer\/wp-json\/wp\/v2\/tags?post=3569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}