.toastbar {
    background: rgba(0,0,0,.7);
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 15px;
    position: fixed;
    left: 50%;
    top: 65px;
    max-width: 60%;
    transform: translateX(-50%);
    z-index: 200000;
    animation: toast-fadein 1s;
}

@-moz-keyframes spin-around {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin-around {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin-around {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
.toastbar-loading {
    padding-left: 3em;
}
.toastbar-loading:before {
    position: absolute;
    top: calc(50% - 0.5em);
    left: 15px;
    z-index: 20000; 

    animation: spin-around .5s infinite linear;
    border: 2px solid #dbdbdb;
    border-radius: 290486px;
    border-right-color: transparent;
    border-top-color: transparent;
    content: "";
    display: inline-block;
    height: 1em;
    width: 1em;
  }

@-webkit-keyframes toast-fadein {
    from {top: 65px; opacity: 0;}
    to {top: 65px; opacity: 1;}
}

@-moz-keyframes toast-fadein {
    from {top: 65px; opacity: 0;}
    to {top: 65px; opacity: 1;}
}

@-o-keyframes toast-fadein {
    from {top: 65px; opacity: 0;}
    to {top: 65px; opacity: 1;}
}

@keyframes toast-fadein {
    from {top: 65px; opacity: 0;}
    to {top: 65px; opacity: 1;}
}

@-webkit-keyframes toast-fadeout {
    from {top: 65px; opacity: 1;}
    to {top: 65px; opacity: 0;}
}

@-o-keyframes toast-fadeout {
    from {top: 65px; opacity: 1;}
    to {top: 65px; opacity: 0;}
}

@-moz-keyframes toast-fadeout {
    from {top: 65px; opacity: 1;}
    to {top: 65px; opacity: 0;}
}

@keyframes toast-fadeout {
    from {top: 65px; opacity: 1;}
    to {top: 65px; opacity: 0;}
}