Add spinner text along with spinner in lightning component

There is a spinner component already in lightning. You can use this then with a little css add your text in the style.

Component

<aura:if isTrue="{!v.spinner}">
    <lightning:spinner class="spins" size="large" variant="brand" alternativeText="Loading" />
</aura:if>

CSS

.THIS .spins::after {
    position: absolute;
    content: 'Please wait while loading';
    width: 100%;
    text-align: center;
    top: calc(50% + 3em);
    font-weight: bold;
}

The top value is based on the fact i'm using the large size spinner, this can be tweaked if using another size. And it will give you something like: