最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - UIContent loader for cards (like fb) - Stack Overflow

programmeradmin3浏览0评论

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
Add a ment  | 

1 Answer 1

Reset to default 7

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

发布评论

评论列表(0)

  1. 暂无评论