sKeleton.vue组件

<style lang="scss" type="text/scss" scoped>
    #Skeleton {
        width: 100%;
        margin-bottom: 30px;
        padding: 20px;
        .skeleton {
            padding: 10px;
        }

        .skeleton .skeleton-head,
        .skeleton .skeleton-title,
        .skeleton .skeleton-content {
            background: rgba(194, 207, 214,.5);
        }


        .skeleton-body {
            width: 100%;
        }

        .skeleton-title {
            width: 100%;
            height: 15px;
            transform-origin: left;
            animation: skeleton-stretch .5s linear infinite alternate;
            border-radius: 5px!important;;
        }

        .skeleton-content {
            width: 100%;
            height: 15px;
            margin-top: 10px;
            transform-origin: left;
            animation: skeleton-stretch .5s -.3s linear infinite alternate;
            border-radius: 5px!important;
        }

        @keyframes skeleton-stretch {
            from {
                transform: scalex(1);
            }
            to {
                transform: scalex(.3);
            }
        }
    }

</style>
<template>
    <div id="Skeleton">
        <div class="skeleton">
            <div class="skeleton-head"></div>
            <div class="skeleton-body">
                <div class="skeleton-title"></div>
                <div class="skeleton-content"></div>
            </div>
        </div>
    </div>

</template>
<script>
    export default {
        data() {
            return {
                msg: ""
            }
        },
        computed: {},
        props: [],
        components: {},
        methods: {},
        mounted() {
        }

    }
</script>