Question

这里我附上了一个视频链接我需要这个功能我不知道它是如何在离子中工作的。在这个视频中，他登录到应用程序，然后应用程序被加载，卡使负载效果（如FB）如何完成？请分享关于他在视频中所做的事情的知识？如何实施facebook

http://ytcropper.com/cropped/Ba59eb092699f43

源视频链接是 https://www.youtube.com/watch?v=Ba4EjF-p7cs

Answer 1

最后，我得到了解决方案！当没有收到服务器数据时，它被称为骨架加载这个骨架加载将出现，然后在收到服务器数据时消失这是演示的链接

Answer 2

这是简单的html和css代码，可以隐含您所需的内容。

    <!DOCTYPE html>
<html>
<head>
<style>
/* 
Animated skeleton screen using CSS.

Create shapes using gradients that simulate solids.

Use `:empty` pseduo-class to show skeleton screen background only while container has no content (ex: for the "loading" state). When content is added to the container element, the pseudo-class selector won't match anymore and the skeleton screen will be removed automatically; no need to toggle a separate class on the container.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Animating one layer of the background which is a tilted linear gradient with white in the middle to achieve shine effect.
*/
    .demo:empty {
    margin: auto;
        width: 500px;
        height: 600px; /* change height to see repeat-y behavior */

        background-image:
            radial-gradient( circle 50px at 50px 50px, lightgray 99%, transparent 0 ),
            linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ),
            linear-gradient( lightgray 20px, transparent 0 ),
            linear-gradient( lightgray 20px, transparent 0 ),
            linear-gradient( lightgray 20px, transparent 0 ),
            linear-gradient( lightgray 20px, transparent 0 );

        background-repeat: repeat-y;

        background-size:
            100px 200px, /* circle */
            50px 200px, /* highlight */
            150px 200px,
            350px 200px,
            300px 200px,
            250px 200px;

        background-position:
            0 0, /* circle */
            0 0, /* highlight */
            120px 0,
            120px 40px,
            120px 80px,
            120px 120px;

        animation: shine 1s infinite;
    }

    @keyframes shine {
        to {
            background-position:
                0 0,
                100% 0, /* move highlight to right */
                120px 0,
                120px 40px,
                120px 80px,
                120px 120px;
        }
    }
</style>
</head>
<body>

<div>

<div class="demo"></div>
</div>
</body>
</html>

如何在Ionic 3中实现facebook post loader？

2 个答案: