Question 291263 in Html Question posted in
Some basic documentation can be found here.

Html – Gradient progress bar position

Please, how can I fill the progress block with a gradient by 50% but that the gradient would not shrink but would be static?

It needs to be like this at 50%
enter image description here

body {
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

#progress {
  width: 50%;
  height: 20px;
  border: 5px solid #000;
  background: none;
}

div {
  width: 50%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(-90deg, rgba(60, 226, 91, 1) 0%, rgba(255, 147, 0, 1) 50%, rgba(247, 3, 3, 1) 100%);
}
<div id="progress">
  <div></div>
</div>
Tags:

3

Answers


  1. 0

    You could use the clip-path CSS property paired with the inset() CSS function :

    body {
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

#progress {
  width: 50%;
  height: 20px;
  border: 5px solid #000;
  background: none;
}

#progress div {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(-90deg, rgba(60, 226, 91, 1) 0%, rgba(255, 147, 0, 1) 50%, rgba(247, 3, 3, 1) 100%);
  clip-path: inset(0% 50% 0% 0%);
}
    <div id="progress">
  <div></div>
</div>

    Note that I changed the selector of your div rule to #progress div

    Login or Signup to reply.
  2. 0

    You can implement a solution as follows using JS by altering the percentage variable or using the clip-path CSS property

        const percentage = 60
    const bgContainer = document.getElementById("bg-container")
    const bg = document.getElementById("bg")
    bg.style.width = (100 * 100 / percentage) + "%";
    bgContainer.style.width = (100 * percentage / 100) + "%";
     body {
        background-color: #4158D0;
        background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    }

    #progress {
        width: 50%;
        height: 20px;
        border: 5px solid #000;
        background: none;
    }

    #bg-container {
        height: 100%;
        overflow: clip;
    }

    #bg {
        height: 100%;
        background: linear-gradient(-90deg, rgba(60, 226, 91, 1) 0%, rgba(255, 147, 0, 1) 50%, rgba(247, 3, 3, 1) 100%);
    }
    <div id="progress">
        <div id="bg-container">
            <div id="bg"></div>
        </div>
    </div>
    Login or Signup to reply.
  3. 0 
        background-image: linear-gradient(43deg, #4158D0 20%, #C850C0 30%, #FFCC70 60%);



 background: linear-gradient(-90deg, rgba(60, 226, 91, 1) 20%,  rgba(255, 147, 0, 1) 30%,  rgba(247, 3, 3, 1) 60%);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search