澶у濂斤紝鎴戞槸鍗婂馃懘锛屼竴涓垰鍒氬紑濮嬪啓浣滅殑娌欓洉绋嬪簭鍛樸€傚枩娆㈡垜鐨勬枃绔犲彲浠ュ叧娉ㄢ灂鐐硅禐馃憤鍔犳垜寰俊锛歠rontendpicker锛屾垜浠竴璧峰涔犱氦娴侊紝鎴愪负鏇村ソ鐨勫伐绋嬪笀~鍏虫敞鍏紬鍙凤細鎼炲墠绔崐澶忥紝瀛︽洿澶氬墠绔?缁堢粨鐭ヨ瘑锛佺偣鎴戞帰绱㈡柊涓栫晫锛佸師鏂囬摼鎺?=>http://sylblog.xin/archives/72鍓嶈█鍠滄灏辩偣涓厤璐硅禐鍚с€備负浠€涔堣鍐欒繖鏍风殑鏂囩珷锛熸垜浠钩鏃跺紑鍙戠殑鏃跺€欙紝閬囧埌loading鐨勬椂鍊欙紝瑕佷箞鏄湪UI妗嗘灦涓惌寤猴紝瑕佷箞灏辨槸鐧惧害锛岀劧鍚庡湪椤圭洰涓坊鍔燙V锛熶絾鏄紝褰撲綘鑷繁鍘讳綋浼氱殑鏃跺€欙紝浣犲氨浼氭病鏈夋兂娉曘€傞殢鐫€鏃堕棿鐨勬帹绉伙紝鎴戞垚涓轰簡涓€鍚岰V宸ョ▼甯堛€傝繖绡囨枃绔犺В閲婁簡涓嶅悓鍔犺浇鏂瑰紡鐨勬€濊矾銆傚笇鏈涗綘涓嶄粎浼氱敤锛岃繕浼氬啓銆傜湡姝ｇ殑鐭ヨ瘑鏉ヨ嚜瀹炶返銆傛湰鏂囧彧浠嬬粛鍔犺浇鏂囨湰鍔犺浇銆傚叾浠栫殑浼氬湪鍏朵粬鏂囩珷涓粙缁嶃€侺oader-1瀹炵幇浜嗚繖涓€昏緫锛屼粩缁嗚瀵燂細鏂囧瓧鐨勯鑹叉槸浠庝笅寰€涓婂彉鍖栫殑銆傛湁鐐瑰儚姘存尝绾瑰姞杞界殑鏁堟灉銆備絾瀹為檯涓婂疄鐜拌捣鏉ュ緢绠€鍗曘€傝鎴戝厛缁欎綘鐪嬩竴涓緥瀛愩€俤iv{瀛椾綋澶у皬锛?0px;楂樺害锛?0px锛沷verflow:hidden;
content
鏈€缁堟晥鏋滐細鍙嚭鐜颁簡涓€鍗婄殑鏂囧瓧銆傜劧鍚庡ぇ瀹剁殑鎯虫硶灏卞嚭鏉ヤ簡銆傛槸涓嶆槸鍙鏈変袱涓噸鍙犵殑div锛屼竴涓孩瀛椾竴涓櫧鈥嬧€嬪瓧銆傛槸鍚﹀彲浠ラ€氳繃浣跨敤鍔ㄧ敾閫愭笎闄嶄綆鐧借壊鏂囨湰div鐨勯珮搴︽潵瀹炵幇杩欑鏁堟灉锛熷鐨勶紝杩欐槸鍙兘鐨勩€傜劧鑰岋紝鎴戜滑鍙渶瑕佷竴涓猟iv灏卞彲浠ュ仛鍒拌繖涓€鐐广€?after鎴?before涔熷彲浠ヨ繖鏍峰仛銆傚浣曡璁″姩鐢伙紱鍏跺疄璁剧疆楂樺害浠?00%鍒?寰堢畝鍗曘€侤keyframesloaderHeight{0%{height:100%;}100%{楂樺害锛?%锛涘畬鏁寸殑浠ｇ爜棣栧厛瀹氫箟浜嗕竴涓枃鏈鑹蹭负绾㈣壊鐨勫簳閮ㄣ€?loader-1{瀛椾綋澶у皬锛?8px锛涘瓧浣撶郴鍒楋細Arial銆丠elvetica銆乻ans-serif锛涘瓧浣撶矖缁嗭細绮椾綋锛涢鑹诧細#FF3D00锛涘瓧姣嶉棿璺濓細2px锛沺osition:relative;
Loading鐒跺悗鐢?after娣诲姞涓婂眰銆?loader-1::after{鍐呭锛氣€滄鍦ㄥ姞杞解€濓紱浣嶇疆锛氱粷瀵癸紱宸︼細0锛涢《閮細0锛涢鑹诧細#FFF锛涘搴︼細100%锛涢珮搴︼細50%锛涙孩鍑猴細闅愯棌锛沘nimation:loaderHeight6slinearinfinite;}杩欐槸楂樺害涓?0%鐨勬晥鏋溿€傚姞涓婂姩鐢荤殑鏁堟灉锛屼竴寮€濮嬪氨宸茬粡灞曠ず杩囦簡銆侺oader-2鐨勫疄鐜伴€昏緫鏈€绠€鍗曪細laoder-1鏄粠涓嬪線涓婏紝杩欎釜鏄粠宸﹀埌鍙筹紝璺焪idth娌℃湁鍏崇郴鍚э紵浣嗚繖閲岃繕鏈変竴鐐广€傝繖灏辨槸鏂囧瓧鐨勬晥鏋溿€傚簳灞傛枃鏈甫鏈夐槾褰便€傜湅璧锋潵涓棿鏄┖蹇冪殑锛屽叾瀹炰笉鐒讹紝鍙槸鍥犱负鑳屾櫙棰滆壊鍜屾枃瀛楁湰韬殑棰滆壊涓€鏍枫€傛垜鏀瑰彉棰滆壊锛屽畠鍙樺緱娓呮櫚銆侰SS涓枃鏈殑闃村奖鏄痶ext-shadow銆傛枃鏈槾褰憋細002px#fff锛?01px#fff锛?01px#fff锛涜繖閲岀殑鍔ㄧ敾寰堢畝鍗曪紝loader-1鎺у埗楂樺害锛岃繖閲屾帶鍒跺搴﹀氨澶熶簡銆侤keyframesloderWidth{0%{瀹藉害锛?%锛泒100%{瀹藉害锛?00%锛泒}瀹屾暣浠ｇ爜.loader-2{font-size:48px;瀛椾綋绯诲垪锛欰rial銆丠elvetica銆乻ans-serif锛涘瓧浣撶矖缁嗭細绮椾綋锛涢鑹诧細#263238锛涙枃鏈槾褰憋細002px#fff锛?01px#fff锛?01px#fff锛涘瓧姣嶉棿璺濓細2px锛沺osition:relative;Loading.loader-2::after{content:"Loading";浣嶇疆锛氱粷瀵癸紱宸︼細0锛涢《閮細0锛涢鑹诧細#FFF锛涘搴︼細100%锛涢珮搴︼細100%锛涙孩鍑猴細闅愯棌锛沘nimation:loderWidth6slinearinfinite;}loader-3杩欐槸鎴戣涓烘渶鏈夊垱鎰忕殑鏂囧瓧鍔犺浇锛侊紒锛佷粩缁嗚瀵熷疄鐜伴€昏緫锛屾湁鍑犵偣闇€瑕佺壒鍒敞鎰忋€傚瓧姣峀锛岀Щ鍔ㄥぇ鍐欑殑L锛屾槸涓嶆槸瑙夊緱杞涓嶈嚜鐒讹紝鍏跺疄涓婇潰鐨処涓嶆槸L锛岃€屾槸鍒嗗紑鐨勶紝灏卞湪涓婂眰銆傚瓧姣岻锛屼粩缁嗙湅鍚庨潰鐨勫瓧姣岻锛屽畠鏄姩鎬佸彉鍖栫殑锛屼絾瀹冪殑杩愬姩骞朵笉鏄叏閮ㄨ繍鍔紝鍙湁鏈€涓婇潰鐨勪竴鐐圭偣鍦ㄨ繍鍔ㄣ€傚皬鐞冿細灏忕悆鍦ㄧЩ鍔ㄣ€傚綋灏忕悆鍒拌揪瀛楁瘝鐨勪綅缃椂锛屽瓧姣嶅氨浼氱Щ鍔ㄣ€傛渶鍚庢垜鎶婂畠鍒嗗紑浜嗐€傚垎瑙ｅ畬浜嗭紝鎴戜滑鍐嶇爺绌朵竴涓嬫€庝箞鍋氥€傛垜浠笉鑰冭檻鍏朵粬鐨勶紝姣斿鍔燿iv锛岀洿鎺ョ敤:after鍜?before鏉ュ疄鐜般€傝繖閲屾湁浜哄彲鑳戒細璇达紝浣犺繖閲屽浜嗗洓涓紝鎬庝箞鍙湁涓や釜鏍囩灏卞疄鐜颁簡鍛紵寰堢畝鍗曪紝鍏冪礌鏈韩纭疄鍙湁涓€涓紝浣嗘槸鍏冪礌鍙互娣诲姞寰堝鍐呭銆傛瘮濡傝竟妗嗭紝闃村奖涔嬬被鐨勩€傝鍒拌繖閲岋紝浣犳湁浠€涔堟兂娉曞悧锛熺湅锛?鍜?鍙互鐢ㄩ槾褰卞疄鐜板悧锛?鍜?鍙互鐢╝fter鍜宐efore瀹炵幇鍚楋紵瀹屾暣浠ｇ爜杩欓噷鐢ㄤ竴涓┖鏍兼潵鍗犵┖闂淬€?spanclass="loader-3">鍔犺浇ng.loader-3{color:#FFF;浣嶇疆锛氱浉瀵癸紱瀛椾綋绯诲垪锛欰rial銆丠elvetica銆乻ans-serif锛涘瓧浣撳ぇ灏忥細48px锛沴etter-spacing:4px;}涓嬮潰鏄?loader-3::before{content:"";浣嶇疆锛氱粷瀵癸紱鍙筹細70px锛涘簳閮細10px锛涢珮搴︼細28px锛涘搴︼細5.15px锛涜儗鏅細褰撳墠棰滆壊锛涘姩鐢伙細loaderL1s绾挎€ф棤闄愪氦鏇匡紱}鏁堟灉濡備笅锛屽彲浠ョ湅鍒?鍑烘潵浜嗭紝浣嗘槸1鍜?杩樻病鏈夊嚭鐜帮紝杩欐槸鍥犱负鎴戜滑娌℃湁鍔犻槾褰便€傛湁浜嗚繖涓姩鐢伙紝鎴戜滑灏卞彲浠ョ湅鍒版晥鏋滀簡銆侤keyframesloaderL{0%{box-shadow:0-6px,-122.9px-8px;}25%,75%{box-shadow:00px,-122.9px-8px;}100%{box-shadow:00px,-122.9px-16px;}}鍔犱笂ball.loader-3::after{content:"";瀹藉害锛?0px锛涢珮搴︼細10px锛涗綅缃細缁濆锛涘乏锛?25px锛涢《閮細2px锛涜竟鐣屽崐寰勶細50%锛涜儗鏅細绾㈣壊锛涘姩鐢伙細animloader1131s绾挎€ф棤闄愪氦鏇匡紱}鏈€鍚庢坊鍔犵悆鐨勫姩鐢汇€侤keyframesanimloader113{0%{transform:translate(0px,0px)scaleX(1);}14%{transform:translate(-12px,-16px)scaleX(1.05);}28%{transform:translate(-27px,-28px)scaleX(1.07);}42%{transform:translate(-46px,-35px)scaleX(1.1);}57%{transform:translate(-70px,-37px)scaleX(1.1);}71%{transform:translate(-94px,-32px)scaleX(1.07);}85%{transform:translate(-111px,-22px)scaleX(1.05);}100%{transform:translate(-125px,-9px)scaleX(1);}}loader-4瀹炵幇閫昏緫浠旂粏瑙傚療锛屼袱鐐癸紱鏂囨湰鍦ㄩ槾褰辩姸鎬佷笅鍊炬枩銆侰SS涓枃瀛楁ā绯婂€炬枩锛歵ransform:skew()CSSblur:Gaussianblurfilter:blur(0px)瀹屾暣浠ｇ爜Loading.loader-119{font-size:48px;瀛楁瘝闂磋窛锛?px锛涢鑹诧細#FFF锛涘姩鐢伙細loader41sease-in鏃犻檺浜ゆ浛锛泒animation@-webkit-keyframesloader4{0%{filter:blur(0px);鍙樻崲锛氬€炬枩锛?搴︼級锛泒100%{婊ら暅锛氭ā绯婏紙3px锛夛紱鍙樻崲锛氬€炬枩锛?4deg锛夛紱}}
