vue项目未加载完成前显示loading样式

最新推荐文章于 2024-10-09 18:14:54 发布

iiiilooaixuud

最新推荐文章于 2024-10-09 18:14:54 发布

阅读量2.1k

点赞数

分类专栏：页面遇到的基础问题 JavaScript基础 vue 文章标签： vue.js css css3

本文链接：https://blog.csdn.net/qq_46617584/article/details/128919331

版权

1、在index.html中添加元素和绑定样式

<body>
    <div id="appLoading">
        <div class='loading'></div>
    </div>
    <div id="app" style="display: none"></div>
</body>

<style media="screen" type="text/css">
        .loading{

            position: absolute;
            height: 100%;
            width: 100%;
            background-color: #000;
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;
            z-index: 9999;;
            opacity: 0.8;
        }

        .loading.fixed {
           position: fixed;
        }

        .loading:before {
             content: '';
             background-color: rgba(0,0,0,0);
             border: 5px solid rgba(0,183,229,0.9);
             opacity: .9;
             border-right: 5px solid rgba(0,0,0,0);
             border-left: 5px solid r