SOURCE

var loading = 0;

setInterval(function(){
   if(loading < 100) {
      if(randomNumberFromRange(0,4) == 1) {
         loading++;
         var angle = -45 + loading * 1.8;
        //  $(".wheel").css("transform", `translate(-50%,-50%) rotate(${angle}deg)`);
        $(".wheel").css("width", `(${loading}%)`);
        //  $(".details span").text(loading);
      }
   } else {
      $(".wheel").addClass("width");
   }
}, 20);

function randomNumberFromRange(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

<h1 data-content="Contad" class="wheel">Contad</h1>

<div data-content="Contad" class="wheel">Contad</div>

body {
	background: #ccc51c;
	min-height: 100%;
}

h1 {
	position: absolute;
	left: 50%;
	margin-left: -1.9em;
	color: hsla(0,0%,100%,.3);
    border: 4px double rgba(255,255,255,.25);
    border-width: 4px 0;
	font: 900 800% Baskerville, 'Palatino Linotype', Palatino, serif;	
}

@keyframes loading {
	from { max-width: 0; }
}

h1:before {
	content: attr(data-content);
	position: absolute;
	overflow: hidden;
	max-width: 4em;
	color: white;
    width: 50%;
	/* animation: loading 10s linear; */
}
div {
	position: absolute;
	left: 50%;
	margin-left: -1.9em;
	color: hsla(0,0%,100%,.3);
    border: 4px double rgba(255,255,255,.25);
    border-width: 4px 0;
	font: 900 800% Baskerville, 'Palatino Linotype', Palatino, serif;	
}

@keyframes loading {
	from { max-width: 0; }
}

div:before {
	content: attr(data-content);
	position: absolute;
	overflow: hidden;
	max-width: 4em;
	color: white;
    width: 50%;
	/* animation: loading 10s linear; */
}