如何在Ionic 3中实现Facebook帖子加载器？

6yjfywim 于 2023-05-05 发布在 Ionic

关注(0)|答案(2)|浏览(196)

在这里，我有一个视频链接，我需要这个功能，我不知道它是如何在离子工作。在这个视频中，他登录到应用程序，然后应用程序被加载，卡使加载效果（如FB）是如何完成的？请分享他在视频中所做的事情的知识？如何使用Facebook
http://ytcropper.com/cropped/Ba59eb092699f43
源视频链接为https://www.youtube.com/watch?v=Ba4EjF-p7cs

ionic-framework

来源：https://stackoverflow.com/questions/46861627/how-to-implement-facebook-post-loader-in-ionic-3

2条答案

按热度按时间

hrirmatl1#

终于，我找到了解决办法！！当未收到服务器数据时，称为 backbone 加载。当收到服务器数据时，此 backbone 加载将出现，然后消失。此处是演示的链接
https://codepen.io/oslego/pen/XdvWmd t

赞(0）回复(0）举报 2023-05-05

8wtpewkr2#

下面是简单的html和css代码来实现你所需要的。

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

Create shapes using gradients that simulate solids.

Use `:empty` pseudo-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>

赞(0）回复(0）举报 2023-05-05

我来回答

如何在Ionic 3中实现Facebook帖子加载器？

2条答案

相关问题

热门标签

最新问答