CODEWITHSUNDEEP
css
Alex Denial
Alex Denial

Reputation: 67

How to create a slanted Progress Bar using CSS?

I'm making progress bar with CSS. I want to make the end of the section inside the bar oblique. How can I do as pictured?

enter image description here 

.progress-bar{
    height: 34px;
    background: #0C0C0C;
    display: flex;
    flex: 1 auto;
    width: 100%;
    position: relative;
}
.progress-bar div{
    width: 69%;
    background: #1EA614;
    height: 100%;
}
.progress-bar div span{
    position: absolute;
    font-size: 24px;
    width: 100%;
    left: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100%;
}
<div class="progress-bar">
  <div>
     <span>Level 5</span>
  </div>
 </div>

Upvotes: 2

Views: 1249

Answers (3)

Temani Afif
Temani Afif

Reputation: 273481

Here is a simplified version with less of code where you can easily control the curve, the color and the percentage of the progress

.progress-bar {
  --s:20px; /* define the curve (make bigger to increase the curve, smaller to reduce)*/
  --p:50;   /* percentage of the progress without unit */
  --c:#1EA614; /* color */
  
  height: 34px;
  line-height:34px;
  background: 
     linear-gradient(to bottom right,var(--c) 49%,transparent 50%) 
        calc(1%*var(--p) + var(--p,0)/100*var(--s)) 0 / var(--s) 100%,
     linear-gradient(var(--c) 0 0) 
        0 / calc(1%*var(--p)) 100%,
     #0C0C0C;
  background-repeat:no-repeat;
  text-align: center;
  font-size: 24px;
  color:#fff;
  margin:5px;
}
<div class="progress-bar">
  Level 5
</div>

<div class="progress-bar" style="--p:30;--c:red;--s:10px">
  Level 5
</div>

<div class="progress-bar" style="--p:70;--c:lightblue;--s:40px">
  Level 5
</div>

<div class="progress-bar" style="--p:100;--s:40px">
  Level 5
</div>

Upvotes: 1

toastrackengima
toastrackengima

Reputation: 8742

You could use a gradient to accomplish this, as I do below.

The only line that I've changed is

background-image: linear-gradient(105deg, #1EA614 0%, #1EA614 85%, transparent 85%);

Essentially, we declare a gradient background that's on an angle which roughly lines up with the photo you gave. Then, we set the stops like so:

  • At 0% (all the way to the left) it's fully green;
  • 85% of the way through we ensure that it's still fully green. This means that there is no graduation between the original green and the black, and thus that we get a sharp transition.
  • 85% of the way through (so directly after) we make it black. Because this is so close to the previous stop, the transition between them is instant, and we get the effect you're looking for.

Note that this number, 85%, does need some tweaking to make sure that the cutoff is the same all of the way through.

Here's your demo again, but with this code added in. I've also added an animation, so that you can see it works at all width stages of the bar.

.progress-bar{
    height: 34px;
    background: #0C0C0C;
    display: flex;
    flex: 1 auto;
    width: 250px;
    position: relative;
}
.progress-bar div{
    width: 100%;
    background-size: cover;
    background-position: -250px 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(105deg, #1EA614 0%, #1EA614 96%, transparent 96%);
    height: 100%;
    animation: bar 2s linear infinite;
}
.progress-bar div span{
    position: absolute;
    font-size: 24px;
    width: 100%;
    left: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100%;
}
@keyframes bar {
  0% {
    background-position: -250px 0;
  }
  100% {
    background-position: 0 0;
  }
}
<div class="progress-bar">
  <div>
     <span>Level 5</span>
  </div>
 </div>

If you're having issues with it not filling the entire bar, you could try just moving the gradient across the bar, rather than changing the bar's width. I've updated my example to do this.

References:

Upvotes: 1

Alex Denial
Alex Denial

Reputation: 67

.progress{
    height: 34px;
    background: #0C0C0C;
    display: flex;
    flex: 1 auto;
    width: 100%;
    position: relative;
}
.progress .progress-bar{
    width: 60%;
    background: #1EA614;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.progress span{
    position: absolute;
    font-size: 24px;
    width: 100%;
    left: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100%;
}
.progress .progress-bar:after{
    content: "";
    position: absolute;
    top: -1px;
    right: -6.5px;
    height: 115%;
    width: 13px;
    background: #0C0C0C;
    transform: rotate(20deg);
}
      <div class="progress">
                                <div class="progress-bar"></div>
                                <span>Level 5</span>
                            </div>

Upvotes: 0

Related Questions