Responsie Fylo data storage component [BEM + SASS + Animation]

Community feedback

• 

  manjubhaskar02•340

  @manjubhaskar02Posted over 1 year ago

  Congratulations on taking up this challenge!

  I think you can simply put this element..

  This was my code.

  HTML

   <div class="progress-bar">
          <div class="progress">
            <div class="round"></div>
          </div>
        </div>
  

  CSS

  .progress-bar {
      background-color: var(--Very-Dark-Blue);
      width: 100%;
      height: 18px;
      border-radius: 50px;
      padding: 0px 2px;
  }
  
  .progress {
      background-image: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
      width: 75%;
      height: 16px;
      border-radius: 50px;
      position:relative;
      }
  
  .round {
      position: absolute;
      background-color: white;
      width: 15px;
      height: 15px;
      right: 0px;
      border-radius: 100%;
  }
  
  

  I think just a class round and adding its styling inside the meter element will help you.

  Hoping this would be helpful for you!

  Happy Coding Journey!

  0

  ---

  

  xyzeez•670

  @xyzeezPosted over 1 year ago

  Thank you @manjubhaskar02.

  Semantically, there is an HTML tag to achieve what you have in the .progress and .progress-bar class called <meter> , that is exactly what I have used.

  Also, if you could see the SASS source code, you would see that I did something similar to what you did with the .round class only that yours is more dependent on the .progress class but like I said, I need to achieve that with the <meter> tag. How do I go about that?

  0

  

  manjubhaskar02•340

  @manjubhaskar02Posted over 1 year ago

  @xyzeez ,Thanks for teaching me this element, I was unaware of that element.

  The round range slider can be achieved by meter::-webkit-meter-thumb

  The ::-webkit-meter-thumb CSS pseudo-element is a WebKit extension that represents the thumb in a <meter> element. It is used for selecting and applying styles to the thumb of a meter gauge.

  The following link will show a round-range slider using javascript.

  Round-range -slider

  But for just a design I tried to use this meter element without meter::-webkit-meter-thumb

  HTML

    <section>
    <div class="progress">
      <meter id="disk" min="0" low="40" high="95" max="100" value="75" col>
        
      </meter>
        <div class="round"></div>
  
    </div> 
  </section>
  

  CSS

  section{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:  hsl(228, 56%, 26%);
  
  }
  #disk {
    height: 60px;
    width: 800px;
  }
  
  meter::-webkit-meter-optimum-value {
    background-image: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
  
  }
  ::-webkit-meter-bar{
    background-color: hsl(229, 57%, 11%);
    height: 30px;
    width: 100%;
  }
  .progress {
    position: relative;
  }
  
  .round {
    position: absolute;
    border-radius: 100%;
    left: 73%;
    width: 26px;
    height: 26px;
    background-color: white;
    bottom: 20px;
  }
  

  This worked for me for just a design!

  0

  

  xyzeez•670

  @xyzeezPosted over 1 year ago

  Thank you @manjubhaskar02 !

  Could you please provide a resource link for the pseudo class you mentioned ::-webkit-meter-thumb ?

  I've tried searching for it to better understand it but only found ::-webkit-slider-thumb (here).

  I've also tried styling my code with what you provided but there seems to be no change at all, you've also not provided for firefor -moz

  0