.spinner-box
{
    z-index: 9;
    background: #00000045;
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
}

#html-spinner
{
    width:70px;
    height:70px;
    border:8px solid rgb(235, 235, 235);
    border-top:8px solid #490e6f;
    border-radius:50%;
}

#html-spinner
{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1.2s;
    -webkit-animation-name: rotate;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-transition-property: -moz-transform;
    -moz-animation-name: rotate; 
    -moz-animation-duration: 1.2s; 
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    transition-property: transform;
    animation-name: rotate; 
    animation-duration: 1.2s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-webkit-keyframes rotate 
{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate 
{
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

@keyframes rotate 
{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

/* spinner positioning */

#html-spinner
{
    margin: auto;
}


#html-para
{
    position:absolute;
    top:100px;
    width:40%;
    padding:5%;
    text-align:center;
}