@keyframes rotate {
  0% { transform: translate(-50%,-50%) rotate(0deg); }
  100% { transform: translate(-50%,-50%) rotate(360deg); }
}

.loadSpinner {
    display: inline-block !important;
}

.loadSpinner span {
    color: var(--cor-normal);
    line-height: 1em;
    display: inline-block;
    vertical-align: top;
    padding: 8px 0 0 5px;
    font-size: 11px;
}
	
.loadSpinner .spinner {
  width: 22px;
  height: 22px;
  display: inline-block;
  overflow: hidden;
  background: none;
}
.loadSpinner .spinner .rotate {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(0.28);
  backface-visibility: hidden;
  transform-origin: 0 0;
}

.loadSpinner .spinner .rotate div {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 4px solid var(--cor-normal);
  border-top-color: transparent;
  border-radius: 50%;
  animation: rotate 1s linear infinite;
  top: 50px;
  left: 50px;
  box-sizing: content-box;
}

/*
	usar:
	<div class="loadSpinner"><div class="spinner"><div class="rotate"><div></div></div></div><span>aguarde...</span></div>
*/