Used range input as status bar. Used pseud element for the text bubble

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi sos97! My name is Vanza!

  My suggestion on creating bar would be something like this:

  1. HTML

  <div class="bar__container">
    <span class="bar__progress"><span class="bar__white-circle"></span></span>
  </div>
  

  2 . CSS

  
  /* Make it as a flex container */
  .bar__container {
    display: flex;
    margin-bottom: 0.625rem;
    border: 3px solid rgba(12, 18, 44, 0);
    border-radius: 1em;
    background-color: rgba(12, 18, 44, 0.5);
    height: 1.25rem;
    width: 100%;
    overflow: hidden;
  }
  
  /* The progress bar inside the .bar__container */
  .bar__progress {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* To make the white circle align to the right of the progress bar */
    flex-basis: 81.5%; /* Same as width  */
    border-radius: 1em;
    background-image: linear-gradient(to right, #ffa399, #ff4d97);
  }
  
  /* The white circle */
  .bar__white-circle {
    margin: 0.125rem;
    border-radius: 50%;
    background-color: white;
    height: 0.625rem;
    width: 0.625rem;
  }
  

  That's it! That's how I did it! If you want to see the full code and my solution, to see how I exactly did the progress bar.

  ** Happy Coding and Keep Learning!**

  1

  ---

  

  sos97•140

  @sos97Posted over 3 years ago

  @vanzasetia Thanks for the idea. I never thought about using div. Thanks!

  0