├── content-placeholder.min.css ├── LICENSE ├── README.md ├── content-placeholder.css └── index.html /content-placeholder.min.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes placeHolderShimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}@keyframes placeHolderShimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}.content-placeholder{display:inline-block;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:placeHolderShimmer;animation-name:placeHolderShimmer;-webkit-animation-timing-function:linear;animation-timing-function:linear;background:#f6f7f8;background:-webkit-gradient(linear,left top,right top,color-stop(8%,#eee),color-stop(18%,#ddd),color-stop(33%,#eee));background:-webkit-linear-gradient(left,#eee 8%,#ddd 18%,#eee 33%);background:linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%);-webkit-background-size:800px 104px;background-size:800px 104px;height:inherit;position:relative} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Rohith Bhaskaran 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Simple CSS content placeholder 2 | ## Introduction 3 | This is a dead simple content placeholder loader inspired by [this article](https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html). 4 | ## Demo 5 | [https://linways.github.io/simple-content-placeholder/](https://linways.github.io/simple-content-placeholder/) 6 | 7 | ## Usage 8 | Just download and include `content-placeholder.min.css` inside `` tag of your HTML page. You can even copy and paste the content inside a `` tag for faster loading. (Its really light weight, ~30 lines of css unminified). 9 | 10 | To add the placeholder, just insert this span tag wherever you require. 11 | 12 | ```html 13 | 14 | ``` 15 | Don't forget to change the width as required. 16 | You can also use the class `content-placeholder` on any element to add the cool loading animation. 17 | ```html 18 |

19 | ``` 20 | ## Credits 21 | Author of [this article](https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html). 22 | -------------------------------------------------------------------------------- /content-placeholder.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes placeHolderShimmer { 2 | 0% { 3 | background-position: -468px 0; 4 | } 5 | 100% { 6 | background-position: 468px 0; 7 | } 8 | } 9 | 10 | @keyframes placeHolderShimmer { 11 | 0% { 12 | background-position: -468px 0; 13 | } 14 | 100% { 15 | background-position: 468px 0; 16 | } 17 | } 18 | 19 | .content-placeholder { 20 | display: inline-block; 21 | -webkit-animation-duration: 1s; 22 | animation-duration: 1s; 23 | -webkit-animation-fill-mode: forwards; 24 | animation-fill-mode: forwards; 25 | -webkit-animation-iteration-count: infinite; 26 | animation-iteration-count: infinite; 27 | -webkit-animation-name: placeHolderShimmer; 28 | animation-name: placeHolderShimmer; 29 | -webkit-animation-timing-function: linear; 30 | animation-timing-function: linear; 31 | background: #f6f7f8; 32 | background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee)); 33 | background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); 34 | background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); 35 | -webkit-background-size: 800px 104px; 36 | background-size: 800px 104px; 37 | height: inherit; 38 | position: relative; 39 | } 40 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 24 | 25 | 26 |

31 | 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 |

Card title

64 |

Card subtitle

65 |

Some quick example text to build on the card title and make up the bulk of the card's content.

66 | Card link 67 | Another link 68 |

69 |

70 |

71 |

72 | 73 |

74 |

75 |

76 |

77 |

78 |

79 | 80 |

81 |

82 |

83 | 84 | 85 |

86 |

87 |

88 |

89 |

90 |

91 |

92 |

93 |

94 |

Card with Round image

95 |

96 | 97 | With supporting text below as a natural lead-in to additional content.

98 |

99 |

100 |

101 |

102 |

103 | 104 |

105 |

106 |

107 |

108 |

109 | 110 | 111 | 112 |

113 |

114 |

115 |

116 |

117 |

118 |

119 |

Some quick example text to build on the card title and make up the bulk of the card's content.

120 |

121 |

122 |

123 |

124 |

125 | 126 | 127 | --------------------------------------------------------------------------------