├── .ruby-version ├── .ruby-gemset ├── .gitignore ├── sample.gif ├── README.md ├── index.html ├── config.rb ├── sass ├── shimmer.scss └── _functions.scss └── stylesheets └── shimmer.css /.ruby-version: -------------------------------------------------------------------------------- 1 | 2.1.2 2 | -------------------------------------------------------------------------------- /.ruby-gemset: -------------------------------------------------------------------------------- 1 | placeholder_shimmer 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache/ 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /sample.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tulios/placeholder_shimmer/HEAD/sample.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Placeholder Shimmer 2 | 3 | Similar to facebook's placeholder animation 4 | 5 | ## Install 6 | 7 | ```sh 8 | gem install compass 9 | compass watch 10 | ``` 11 | ## Sample 12 | 13 | ![sample](https://raw.github.com/tulios/placeholder_shimmer/master/sample.gif) 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Placeholder Shimmer 7 | 8 | 9 | 10 | 11 |

Placeholder Shimmer

12 | 13 |

14 |

15 |

16 |

17 | 18 | 19 | 20 |

21 |

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | 3 | # Set this to the root of your project when deployed: 4 | http_path = "/" 5 | css_dir = "stylesheets" 6 | sass_dir = "sass" 7 | images_dir = "images" 8 | javascripts_dir = "javascripts" 9 | 10 | # You can select your preferred output style here (can be overridden via the command line): 11 | # output_style = :expanded or :nested or :compact or :compressed 12 | 13 | # To enable relative paths to assets via compass helper functions. Uncomment: 14 | # relative_assets = true 15 | 16 | # To disable debugging comments that display the original location of your selectors. Uncomment: 17 | # line_comments = false 18 | 19 | 20 | # If you prefer the indented syntax, you might want to regenerate this 21 | # project again passing --syntax sass, or you can uncomment this: 22 | # preferred_syntax = :sass 23 | # and then run: 24 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 25 | -------------------------------------------------------------------------------- /sass/shimmer.scss: -------------------------------------------------------------------------------- 1 | @import "compass"; 2 | @import "_functions"; 3 | 4 | @include placeholder-shimmer-keyframes; 5 | 6 | .placeholder-item { 7 | @include placeholder-shimmer-animation; 8 | 9 | background: #f6f7f8; 10 | @include background-image(linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%)); 11 | 12 | background-repeat: no-repeat; 13 | background-size: 800px 200px; 14 | height: 104px; 15 | position: relative; 16 | 17 | overflow: hidden; 18 | } 19 | 20 | body { 21 | background-color: #e9eaed; 22 | text-align: center; 23 | } 24 | 25 | .placeholder { 26 | display: inline-block; 27 | box-sizing: border-box; 28 | 29 | background-color: #fff; 30 | border: 1px solid; 31 | border-color: #e5e6e9 #dfe0e4 #d0d1d5; 32 | 33 | width: 500px; 34 | height: 380px; 35 | text-align: left; 36 | } 37 | 38 | .placeholder .picture { 39 | width: 300px; 40 | height: 200px; 41 | margin: 20px 0 0 20px; 42 | } 43 | 44 | .element.placeholder .line1, 45 | .element.placeholder .line2 { 46 | display: inline-block; 47 | width: 460px; 48 | height: 20px; 49 | margin: 10px 0 0 20px; 50 | } 51 | 52 | .element.placeholder .line2 { 53 | width: 230px; 54 | } 55 | -------------------------------------------------------------------------------- /sass/_functions.scss: -------------------------------------------------------------------------------- 1 | @mixin keyframes($name) { 2 | @-webkit-keyframes $name { 3 | @content; 4 | } 5 | @-moz-keyframes $name { 6 | @content; 7 | } 8 | @-ms-keyframes $name { 9 | @content; 10 | } 11 | @-o-keyframes $name { 12 | @content; 13 | } 14 | @keyframes $name { 15 | @content; 16 | } 17 | } 18 | 19 | @mixin prefixer($prop, $val) { 20 | -webkit-#{$prop}: $val; 21 | -moz-#{$prop}: $val; 22 | -ms-#{$prop}: $val; 23 | -o-#{$prop}: $val; 24 | #{$prop}: $val; 25 | } 26 | 27 | @mixin animation-name($name) { 28 | @include prefixer(animation-name, $name); 29 | } 30 | 31 | @mixin animation-duration($duration) { 32 | @include prefixer(animation-duration, $duration); 33 | } 34 | 35 | @mixin animation-fill-mode($fillMode) { 36 | @include prefixer(animation-fill-mode, $fillMode); 37 | } 38 | 39 | @mixin animation-iteration-count($iterationCount) { 40 | @include prefixer(animation-iteration-count, $iterationCount); 41 | } 42 | 43 | @mixin animation-timing-function($timingFunction) { 44 | @include prefixer(animation-timing-function, $timingFunction); 45 | } 46 | 47 | @mixin animation-direction($direction) { 48 | @include prefixer(animation-direction, $direction); 49 | } 50 | 51 | @mixin placeholder-shimmer-keyframes { 52 | @include keyframes(placeholder-shimmer) { 53 | 0% { 54 | background-position: -468px 0; 55 | } 56 | 100% { 57 | background-position : 468px 0; 58 | } 59 | } 60 | } 61 | 62 | @mixin placeholder-shimmer-animation { 63 | @include animation-name(placeholder-shimmer); 64 | @include animation-duration(1s); 65 | @include animation-fill-mode(forwards); 66 | @include animation-iteration-count(infinite); 67 | @include animation-timing-function(linear); 68 | } 69 | -------------------------------------------------------------------------------- /stylesheets/shimmer.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes placeholder-shimmer { 2 | /* line 53, ../sass/_functions.scss */ 3 | 0% { 4 | background-position: -468px 0; 5 | } 6 | 7 | /* line 56, ../sass/_functions.scss */ 8 | 100% { 9 | background-position: 468px 0; 10 | } 11 | } 12 | 13 | @-moz-keyframes placeholder-shimmer { 14 | /* line 53, ../sass/_functions.scss */ 15 | 0% { 16 | background-position: -468px 0; 17 | } 18 | 19 | /* line 56, ../sass/_functions.scss */ 20 | 100% { 21 | background-position: 468px 0; 22 | } 23 | } 24 | 25 | @-ms-keyframes placeholder-shimmer { 26 | /* line 53, ../sass/_functions.scss */ 27 | 0% { 28 | background-position: -468px 0; 29 | } 30 | 31 | /* line 56, ../sass/_functions.scss */ 32 | 100% { 33 | background-position: 468px 0; 34 | } 35 | } 36 | 37 | @-o-keyframes placeholder-shimmer { 38 | /* line 53, ../sass/_functions.scss */ 39 | 0% { 40 | background-position: -468px 0; 41 | } 42 | 43 | /* line 56, ../sass/_functions.scss */ 44 | 100% { 45 | background-position: 468px 0; 46 | } 47 | } 48 | 49 | @keyframes placeholder-shimmer { 50 | /* line 53, ../sass/_functions.scss */ 51 | 0% { 52 | background-position: -468px 0; 53 | } 54 | 55 | /* line 56, ../sass/_functions.scss */ 56 | 100% { 57 | background-position: 468px 0; 58 | } 59 | } 60 | 61 | /* line 6, ../sass/shimmer.scss */ 62 | .placeholder-item { 63 | -webkit-animation-name: placeholder-shimmer; 64 | -moz-animation-name: placeholder-shimmer; 65 | -ms-animation-name: placeholder-shimmer; 66 | -o-animation-name: placeholder-shimmer; 67 | animation-name: placeholder-shimmer; 68 | -webkit-animation-duration: 1s; 69 | -moz-animation-duration: 1s; 70 | -ms-animation-duration: 1s; 71 | -o-animation-duration: 1s; 72 | animation-duration: 1s; 73 | -webkit-animation-fill-mode: forwards; 74 | -moz-animation-fill-mode: forwards; 75 | -ms-animation-fill-mode: forwards; 76 | -o-animation-fill-mode: forwards; 77 | animation-fill-mode: forwards; 78 | -webkit-animation-iteration-count: infinite; 79 | -moz-animation-iteration-count: infinite; 80 | -ms-animation-iteration-count: infinite; 81 | -o-animation-iteration-count: infinite; 82 | animation-iteration-count: infinite; 83 | -webkit-animation-timing-function: linear; 84 | -moz-animation-timing-function: linear; 85 | -ms-animation-timing-function: linear; 86 | -o-animation-timing-function: linear; 87 | animation-timing-function: linear; 88 | background: #f6f7f8; 89 | background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #f6f7f8), color-stop(20%, #edeef1), color-stop(40%, #f6f7f8), color-stop(100%, #f6f7f8)); 90 | background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%); 91 | background-image: -moz-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%); 92 | background-image: -o-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%); 93 | background-image: linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%); 94 | background-repeat: no-repeat; 95 | background-size: 800px 200px; 96 | height: 104px; 97 | position: relative; 98 | overflow: hidden; 99 | } 100 | 101 | /* line 20, ../sass/shimmer.scss */ 102 | body { 103 | background-color: #e9eaed; 104 | text-align: center; 105 | } 106 | 107 | /* line 25, ../sass/shimmer.scss */ 108 | .placeholder { 109 | display: inline-block; 110 | box-sizing: border-box; 111 | background-color: #fff; 112 | border: 1px solid; 113 | border-color: #e5e6e9 #dfe0e4 #d0d1d5; 114 | width: 500px; 115 | height: 380px; 116 | text-align: left; 117 | } 118 | 119 | /* line 38, ../sass/shimmer.scss */ 120 | .placeholder .picture { 121 | width: 300px; 122 | height: 200px; 123 | margin: 20px 0 0 20px; 124 | } 125 | 126 | /* line 45, ../sass/shimmer.scss */ 127 | .element.placeholder .line1, 128 | .element.placeholder .line2 { 129 | display: inline-block; 130 | width: 460px; 131 | height: 20px; 132 | margin: 10px 0 0 20px; 133 | } 134 | 135 | /* line 52, ../sass/shimmer.scss */ 136 | .element.placeholder .line2 { 137 | width: 230px; 138 | } 139 | --------------------------------------------------------------------------------