몽키 ♡ 연구
페이스북 뉴스피드 로딩 애니메이션 만들기 HTML / CSS 소스, GIF이미지 다운받기
Stene pyle
2015. 6. 6. 13:10
GIF 이미지 다운받기
페이스북을 PC로 접속 할 경우 콘텐츠가 나오기 전에 뉴스 썸네일과 타이틀, 기사 내용이
보이는 듯한 느낌의 애니메이션 로딩이 잠시 나온다.
CSS3로 만드는 방법은 아래와 같다.
역시, 큰회사일수록 디테일을 챙기고, 작은 회사일 수록 큰 그림을 그리고
[소스 출처]
CREATE THE NEW FACEBOOK LOADING USING CSS3 ANIMATION
HTML
| <div class="loading-container"> <div class="loading"> <div class="shape1"></div> <div class="shape2"></div> <div class="shape3"></div> <div class="shape4"></div> <div class="shape5"></div> <div class="shape6"></div> <div class="shape7"></div> <div class="shape8"></div> <div class="shape9"></div> <div class="shape10"></div> <div class="shape11"></div> <div class="shape12"></div> </div> </div> |
CSS
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | .loading-container { height: 300px; padding: 12px; } .loading { -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; -webkit-animation-name: wave; -webkit-animation-timing-function: linear; background: #f6f7f8; background-image: -webkit-gradient(linear, left center, right center, from(#f6f7f8), color-stop(.2, #edeef1), color-stop(.4, #f6f7f8), to(#f6f7f8)); background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%); background-repeat: no-repeat; background-size: 800px 104px; height: 104px; position: relative; } .reverse-direction .loading { -webkit-animation-direction: reverse; } .loading div { background: #fff; height: 6px; left: 0; position: absolute; right: 0; } div.shape1 { height: 40px; left: 40px; right: auto; top: 0; width: 8px; } div.shape2 { height: 8px; left: 48px; top: 0; } div.shape3 { left: 136px; top: 8px; } div.shape4 { height: 12px; left: 48px; top: 14px; } div.shape5 { left: 100px; top: 26px; } div.shape6 { height: 10px; left: 48px; top: 32px; } div.shape7 { height: 20px; top: 40px; } div.shape8 { left: 410px; top: 60px; } div.shape9 { height: 13px; top: 66px; } div.shape10 { left: 440px; top: 79px; } div.shape11 { height: 13px; top: 85px; } div.shape12 { left: 178px; top: 98px; } @-webkit-keyframes wave { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }
|