admin管理员组文章数量:1331083
I'm working on finding a solution for a UI/CONTENT loader for my app to load cards with content.
We're using Angular and while the cards load, they are blank and boring. Trying to build some content expectation for the people who will be using it, in the way that facebook does it. They do a nice job.
Here is a link to a screenshot:
I know there are some pretty simple solutions, and I've spent the last few hours searching for "preloaders" of all sorts, but I keep getting ways to load the entire page. I am looking to acplish only the individual cards themselves, as the app never really "refreshes" the whole page.
Hope I've done a good job of explaining (I am the designer).
UPDATE: this happens very briefly in facebook
I'm working on finding a solution for a UI/CONTENT loader for my app to load cards with content.
We're using Angular and while the cards load, they are blank and boring. Trying to build some content expectation for the people who will be using it, in the way that facebook does it. They do a nice job.
Here is a link to a screenshot:
I know there are some pretty simple solutions, and I've spent the last few hours searching for "preloaders" of all sorts, but I keep getting ways to load the entire page. I am looking to acplish only the individual cards themselves, as the app never really "refreshes" the whole page.
Hope I've done a good job of explaining (I am the designer).
UPDATE: this happens very briefly in facebook
Share Improve this question edited Jun 18, 2016 at 7:40 Divyesh Kanzariya 3,7893 gold badges47 silver badges46 bronze badges asked Sep 26, 2014 at 16:40 Lau ArdeleanLau Ardelean 511 silver badge2 bronze badges 2- I'd have to say this question it's too broad, you should show some "code" you have been working on,but one option could be load a simple div with css (maybe a box as you showed) while you are loading the data, you can do a lot just with a cobination of ng-cloak and resource promises – pedrommuller Commented Sep 26, 2014 at 16:51
- Thanks for answering @jack.the.ripper ... its not quite the answer I was hoping for. currently we dont have a preloader implemented... – Lau Ardelean Commented Sep 28, 2014 at 19:08
1 Answer
Reset to default 7i think you are asking for this solution
i have create there on link jsfiddler
@-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
}
}
.timeline-wrapper {
background-color: #e9eaed;
color: #141823;
padding: 20px;
border: 1px solid #ccc;
margin: 0 auto 1em;
}
.timeline-item {
background: #fff;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-radius: 3px;
padding: 12px;
margin: 0 auto;
max-width: 472px;
min-height: 200px;
}
.animated-background {
-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: #eeeeee;
background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background: linear-gradient(to right, #eeeeee 8%,#dddddd 18%,#eeeeee 33%);
-webkit-background-size: 800px 104px;
background-size: 800px 104px;
height: 96px;
position: relative;
}
.background-masker {
background: #fff;
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.outlined .background-masker {
border: 1px solid #ddd;
}
.outlined:hover .background-masker {
border: none;
}
.outlined:hover .background-masker:hover {
border: 1px solid #ccc;
z-index: 1;
}
.background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
top: 0;
left: 40px;
right: 0;
height: 10px;
}
.background-masker.header-left,
.background-masker.subheader-left,
.background-masker.header-right,
.background-masker.subheader-right {
top: 10px;
left: 40px;
height: 8px;
width: 10px;
}
.background-masker.header-bottom {
top: 18px;
height: 6px;
}
.background-masker.subheader-left,
.background-masker.subheader-right {
top: 24px;
height: 6px;
}
.background-masker.header-right,
.background-masker.subheader-right {
width: auto;
left: 300px;
right: 0;
}
.background-masker.subheader-right {
left: 230px;
}
.background-masker.subheader-bottom {
top: 30px;
height: 10px;
}
.background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
top: 40px;
left: 0;
right: 0;
height: 6px;
}
.background-masker.content-top {
height:20px;
}
.background-masker.content-first-end,
.background-masker.content-second-end,
.background-masker.content-third-end{
width: auto;
left: 380px;
right: 0;
top: 60px;
height: 8px;
}
.background-masker.content-second-line {
top: 68px;
}
.background-masker.content-second-end {
left: 420px;
top: 74px;
}
.background-masker.content-third-line {
top: 82px;
}
.background-masker.content-third-end {
left: 300px;
top: 88px;
}
<body class="no-touch">
<section>
<div class="container post-container text-container">
<div class="timeline-wrapper">
<div class="timeline-item">
<div class="animated-background facebook">
<div class="background-masker header-top"></div>
<div class="background-masker header-left"></div>
<div class="background-masker header-right"></div>
<div class="background-masker header-bottom"></div>
<div class="background-masker subheader-left"></div>
<div class="background-masker subheader-right"></div>
<div class="background-masker subheader-bottom"></div>
<div class="background-masker content-top"></div>
<div class="background-masker content-first-end"></div>
<div class="background-masker content-second-line"></div>
<div class="background-masker content-second-end"></div>
<div class="background-masker content-third-line"></div>
<div class="background-masker content-third-end"></div>
</div>
</div>
<div class="timeline-item">
<div class="animated-background facebook">
<div class="background-masker header-top"></div>
<div class="background-masker header-left"></div>
<div class="background-masker header-right"></div>
<div class="background-masker header-bottom"></div>
<div class="background-masker subheader-left"></div>
<div class="background-masker subheader-right"></div>
<div class="background-masker subheader-bottom"></div>
<div class="background-masker content-top"></div>
<div class="background-masker content-first-end"></div>
<div class="background-masker content-second-line"></div>
<div class="background-masker content-second-end"></div>
<div class="background-masker content-third-line"></div>
<div class="background-masker content-third-end"></div>
</div>
</div>
</div>
本文标签: javascriptUIContent loader for cards (like fb)Stack Overflow
版权声明:本文标题:javascript - UIContent loader for cards (like fb) - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742272265a2444529.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论