Realization of alignment of CSS mask in full screen

Time:2019-8-11

The specific code is as follows:

<style>
#toastLoaderFullScreen {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    background-color: rgba(224, 38, 38, 0.5);
}
#toastLoader {
   position: absolute;
   left: 50%;
   top: 45%;
   width: 350px;
   margin-left: -19px;
   /* background-color: blue; */
}
#toastLoaderText {
    position: fixed;
    top: 53%;
    left: 50%;
    width: 250px;
    margin-top: -10px;
    margin-left: -125px;
    Word-wrap: break-word; /* automatic line-changing*/
    text-align: center;
    /* background-color: red; */
}
</style>
<template>
    <div id="toastLoaderFullScreen">
        <div>
             <mu-circular-progress id="toastLoader" :size="40" color="rgb(24, 143, 254)" v-show="isToastLoader"></mu-circular-progress>
             <div id="toastLoaderText">
                 <p> Logging in</p>
             </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isToastLoader: true
        }
    },
    created() {
        // setTimeout(() => {
        //     this.isToastLoader = false
        // }, 2000)
    },
    methods: {
    }
}
</script>

summary

Above is the realization method of full screen alignment of CSS mask introduced by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message for me, Xiaobian will reply to you in time. Thank you very much for your support to developpaer.

Recommended Today

Protocol basis: use telnet to learn IMAP protocol

IMAP introduction IMAPThe full name is Internet Mail Access Protocol, or Interactive Mail Access ProtocolPOP3Similar to one of the mail access standard protocols. The difference is, it’s onIMAPAfter that, the e-mail you received from the e-mail client remains on the server, and the operations on the client will be fed back to the server, such […]