css 加载微调器覆盖

Posted 2021-05-13

<!-- 
html:

   <div class="container">        
            <i class="fa fa-spinner fa-4x fa-pulse"></i>
            <span class="sr-only">Loading...</span>
    </div>

font-awesome:
<script src="https://use.fontawesome.com/9049c33239.js"></script>


This approach creates a "loading.." overlay with minimal css. Flexbox helps to center the content for all
screens.
-->

.container {
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
        height: 100%;
        position: fixed;
        top:0;
        left:0;
        background: rgba(0, 0, 0, 0.3);
    }