SOURCE

new Vue({
  el: '#root',
  data: {
    text: 1111
  }
})

<div id="root" class="loading-mask" >
        <div class="order-loading">
            <div class="loading-ring"></div>
        </div>
        <span class="text text-center">{{text}}</span>
    </div>

    .loading-mask {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: white;
        opacity: .8;
        z-index: 1001;
        .loading-ring,
        .loading-ring:before,
        .loading-ring:after {
            border-radius: 50%;
        }
        .text, .loading-ring {
            position: absolute;
            top: calc(50% - 30px);
        }
        .text {
            width: 100%;
            padding: 0 20%;
            margin-top: 33px;
            box-sizing: border-box;
            font-size: 14px;
            color: white;
        }
        .loading-ring {
            left: 50%;
            margin-top: -23px;
            margin-left: -23px;
            width: 46px;
            height: 46px;
            box-shadow: inset 0 0 0 4px #43dea0;
            transition: color 1.3s ease;
            animation: gradientColor 1.3s infinite ease;
        }

        .loading-ring:before,
        .loading-ring:after {
            position: absolute;
            content: '';
            top: 0;
            width: 24px;
            height: 47px;
            background: white;
            display: inline-block;
        }

        .loading-ring:before {
            border-radius: 46px 0 0 46px;
            left: -1px;
            -webkit-transform-origin: 24px 23px;
            transform-origin: 24px 23px;
            -webkit-animation: loading-ring 1.3s infinite ease 1s;
            animation: loading-ring 1.3s infinite ease 1s;
        }

        .loading-ring:after {
            border-radius: 0 46px 46px 0;
            left: 23px;
            -webkit-transform-origin: 0px 23px;
            transform-origin: 0px 23px;
            -webkit-animation: loading-ring 1.3s infinite ease;
            animation: loading-ring 1.3s infinite ease;
        }

    }

    @keyframes loading-ring {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @keyframes gradientColor {
        0% {
            box-shadow: inset 0 0 0 4px gray;
        }
        100% {
            box-shadow: inset 0 0 0 4px gray;
        }
    }