Transcription progress bar

In this example below you will see how to do a Transcription progress bar with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ribeiralves, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ribeiralves ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Transcription progress bar</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
   <div class="progress-bar" status="transcription">
     <div class="piece small "></div>
     <div class="piece small "></div>
     <div class="piece small "></div>
     
     <div class="status-ball  status-ball-1"></div>
     
     <div class="piece small"></div>
     <div class="piece small"></div>
     <div class="piece small"></div>
     
     <div class="status-ball status-ball-2"></div>
     
     <div class="piece small"></div>
     <div class="piece small"></div>
     <div class="piece small"></div>
     
     <div class="status-ball status-ball-3"></div>
     
     <div class="piece small"></div>
     <div class="piece small"></div>
     <div class="aux-div">
       <div class="status-box status-transcription">

         <p class="status-transcription-p">Transcription</p>
         <p class="status-transcription-description">Audio to caption</p>
         <p class="status-transcription-time">In progress</p>

         <div class="status-transcription-triangle"></div>

       </div>
     </div>
     <div class="aux-div">
       <div class="status-box status-automatic">

         <p class="status-automatic-p">Automatic Translation</p>
         <p class="status-automatic-description">Pre-translation</p>
         <p class="status-automatic-time">In progress</p>

         <div class="status-automatic-triangle"></div>

       </div>
     </div>
     <div class="aux-div">
       <div class="status-box status-translation">

         <p class="status-translation-p">Human Translation</p>
         <p class="status-translation-description">Final tweaks</p>
         <p class="status-translation-time">In progress</p>

         <div class="status-translation-triangle"></div>

       </div>
     </div>
  </div>
</div>
<div class="container">
   <div class="progress-bar" status="automatic-translation">
     <div class="piece small"></div>
     <div class="piece small"></div>
     <div class="piece small"></div>
     
     <div class="status-ball status-ball-1"></div>
     
     <div class="piece small "></div>
     <div class="piece small "></div>
     <div class="piece small "></div>
     
     <div class="status-ball status-ball-2"></div>
     
     <div class="piece small"></div>
     <div class="piece small"></div>
     <div class="piece small"></div>
     
     <div class="status-ball status-ball-3"></div>
     
     <div class="piece small"></div>
     <div class="piece small"></div>
     <div class="aux-div">
       <div class="status-box status-transcription">

         <p class="status-transcription-p">Transcription</p>
         <p class="status-transcription-description">Audio to caption</p>
         <p class="status-transcription-time">In progress</p>

         <div class="status-transcription-triangle"></div>

       </div>
     </div>
     <div class="aux-div">
       <div class="status-box status-automatic">

         <p class="status-automatic-p">Automatic Translation</p>
         <p class="status-automatic-description">Pre-translation</p>
         <p class="status-automatic-time">In progress</p>

         <div class="status-automatic-triangle"></div>

       </div>
     </div>
     <div class="aux-div">
       <div class="status-box status-translation">

         <p class="status-translation-p">Human Translation</p>
         <p class="status-translation-description">Final tweaks</p>
         <p class="status-translation-time">In progress</p>

         <div class="status-translation-triangle"></div>

       </div>
     </div>
  </div>
</div>

<div class="container">
   <div class="progress-bar" status="human-translation">
     <div class="piece small "></div>
     <div class="piece small "></div>
     <div class="piece small "></div>
     
     <div class="status-ball  status-ball-1"></div>
     
     <div class="piece small "></div>
     <div class="piece small "></div>
     <div class="piece small "></div>
     
     <div class="status-ball status-ball-2 "></div>
     
     <div class="piece small "></div>
     <div class="piece small"></div>
     <div class="piece small"></div>
     
     <div class="status-ball status-ball-3"></div>
     
     <div class="piece small"></div>
     <div class="piece small"></div>
     <div class="aux-div">
       <div class="status-box status-transcription">

         <p class="status-transcription-p">Transcription</p>
         <p class="status-transcription-description">Audio to caption</p>
         <p class="status-transcription-time">In progress</p>

         <div class="status-transcription-triangle"></div>

       </div>
     </div>
     <div class="aux-div">
       <div class="status-box status-automatic">

         <p class="status-automatic-p">Automatic Translation</p>
         <p class="status-automatic-description">Pre-translation</p>
         <p class="status-automatic-time">In progress</p>

         <div class="status-automatic-triangle"></div>

       </div>
     </div>
     <div class="aux-div">
       <div class="status-box status-translation">

         <p class="status-translation-p">Human Translation</p>
         <p class="status-translation-description">Final tweaks</p>
         <p class="status-translation-time">In progress</p>

         <div class="status-translation-triangle"></div>

       </div>
     </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ribeiralves/transcription-progress-bar-awjayJ */
* {
  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.container {
  display: flex;
  justify-content: center;
  background-color: #fff;
  height: 250px;
}
.progress-bar {
  display: flex;
  margin-top: 170px;
  position: relative;
}
.piece {
  height: 6px;
  background-color: #eee;
}
.progress-bar .piece:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.container .progress-bar .piece:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.small {
  width: 20px;
}
.status-ball {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background-color: #eee;
  margin-top: -3px;
  margin-right: -2px;
  margin-left: -2px;
}
.completed {
  background-color: #00D555;
}
.completed-last {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.status-box {
  position: absolute;
  width: 250px;
  padding: 10px;
  bottom: 100%;
  border-radius: 7px;
  background-color: #fff;
  margin-bottom: 25px;
  box-shadow: #888888 1px 5px 12px;
}
.status-box p {
  text-align: center;
  margin-bottom: 5px;
  margin-top: 7px;
}
.status-translation,
.status-automatic,
.status-transcription {
  opacity: 0 ;
  transform: rotateX(25deg);
  transform-origin: bottom;
  -webkit-transform-origin: bottom;
  right: 47px;
  will-change: transform,opacity;
  transition-property: transform,opacity;
  transition-duration: .25s;
}
.status-translation-p,
.status-automatic-p,
.status-transcription-p {
  font-size: 18px;
  font-weight: bold;
  color: #575DD7;
}
.status-translation-description,
.status-automatic-description,
.status-transcription-description {
  color: #888;
}
.status-translation-time,
.status-automatic-time,
.status-transcription-time {
  color: #575DD7;
  font-size: 12px;
  margin-bottom: 10px !important;
}
.status-translation-triangle,
.status-automatic-triangle,
.status-transcription-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 9px 0 9px;
  border-color: #fff transparent transparent transparent;
  left: 47.5%;
  margin-top: 10px;
}
.status-automatic {
  right: -21px;
}
.status-translation {
  right: -88px;
}
.aux-div {
  perspective: 2000px;
}
.status-ball-1:hover ~ .aux-div .status-transcription {
  opacity: 1;
  transform: rotateX(0deg);
}
.status-ball-2:hover ~ .aux-div .status-automatic {
  opacity: 1;
  transform: rotateX(0deg);
}
.status-ball-3:hover ~ .aux-div .status-translation {
  opacity: 1;
  transform: rotateX(0deg);
}
.hidden {
  display: none;
}


/*Downloaded from https://www.codeseek.co/ribeiralves/transcription-progress-bar-awjayJ */
function fillprogressbar(bar,status) {
  // Transcription first phase
  if (status == 'transcription') {
    $(bar).children('.piece').first().addClass('completed');
    $(bar).find('.status-automatic-time').addClass('hidden');
    $(bar).find('.status-translation-time').addClass('hidden');
  }
  
  if (status == 'automatic-translation') {
    $(bar).children('.piece:nth-child(6)').prevAll().addClass('completed');
    $(bar).find('.status-translation-time').addClass('hidden');
    $(bar).find('.status-translation-time').addClass('hidden');
    $(bar).find('.status-transcription-time').text('Done');
  }
  
  if (status == 'human-translation') {
    $(bar).children('.piece:nth-child(10)').prevAll().addClass('completed');
    $(bar).find('.status-transcription-time').text('Done');
    $(bar).find('.status-automatic-time').text('Done');
  }
}

$('.progress-bar').each(function() {
  fillprogressbar(this,$(this).attr('status'));
  $(this).children('.completed:last').addClass('completed-last');
})

Comments