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)`);
         $(".details span").text(loading);
      }
   } else {
      $(".wheel").addClass("done");
   }
}, 20);

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

<!--Inspired by https://dribbble.com/shots/913166-tomato-main-app-view-for-FFOS-->

<div class="loader  --flex-column">
   <div class="main-dial">
      <div class="wheel"></div>
   </div> 
   <div class="details --flex-mid">
      <span>0</span>
   </div> 
</div>

$m:#E84748;
body {
   font-family: 'Overlook';
   background-color:#F5F7FA;
   .loader {
      position: absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      .main-dial {
         position: relative;
         width:300px;
         height:150px;
         overflow:hidden;
         border-top-right-radius:150px;
         border-top-left-radius:150px;
         background-color:#fff;
         .wheel {
            width:0px;
            height:0px;
            position: absolute;
            top:100%;
            left:50%;
            transform:translate(-50%,-50%) rotate(-45deg);
            transition: transform .25s ease, border-left-color .5s ease, border-bottom-color .5s ease;
            border:150px solid transparent;
            border-left-color:$m;
            border-bottom-color:$m;
            border-radius:100%;
            &:before, &:after {
               position: absolute;
               content: '';
               top:50%;
               left:50%;
            }
            &:before {
               border-radius:100%;
               transform:translate(-50%,-50%);
               background-color:#fff;
               animation: pulse 3s linear infinite;
            }
            &:after {
               height:4px;
               width:300px;
               transform:translate(-50%,-50%) rotate(45deg);
               background-color:#323133;
            }
            &.done {
               border-left-color:#2ECC71;
               border-bottom-color:#2ECC71;
            }
         }
      }
      .details {
         position: relative;
         background-color:#3C3B3D;
         color:#fff;
         padding:10px;
         font-size:32px;
         &:before, &:after {
            position: absolute;
            content: '';
            top:0px;
            left:0px;
            height:8px;
            transform:translateY(-50%);
            background-color:#323133;
         }
         &:before {
            right:0px;
         }
         &:after {
            left:50%;
            transform:translate(-50%,-50%);
            height:20px;
            width:20px;
            border-radius:100%;
         }
         span {
            &:after {
               content: '%';
            }
         }
      }
   }
}

@keyframes pulse {
   0% {
      width:0px;
      height:0px;
      opacity:0.1;
   }
   75%, 100% {
      width:350px;
      height:350px;
      opacity:0;
   }
}