CODEWITHSUNDEEP
javascripthtmlcss
woopsie
woopsie

Reputation: 95

calculating border radius for a small width with css

I want to create a slider for progress

if say it's at 1% how can I calculate the right px/% for the border-radius?

when it's a big % it looks good

<div style="background: grey; height: 25px; border-radius: 12.5px; width: 100%">
  <div style="background: green; height: 25px; border-radius: 12.5px; width: 15%" />
</div>

when it's small like 1% it looks like this

<div style="background: grey; height: 25px; border-radius: 12.5px; width: 100%">
  <div style="background: green; height: 25px; border-radius: 12.5px; width: 1%" />
</div>

Upvotes: 1

Views: 1405

Answers (4)

manneJan89
manneJan89

Reputation: 1024

A 1% is supposed to look small in my opinion. just add overflow: hidden to your parent div, then that should look better.

<div style="overflow:hidden; background: grey; height: 25px; border-radius: 12.5px; width: 100%">
  <div style="background: green; height: 25px; border-radius: 12.5px; width: 1%" />
</div>

Upvotes: 1

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

You are losing the border-radius because you are altering the width of your green progress element.

Instead, if you set the green div to the same 100% width, you can represent the progress by using CSS transform to move the green div to the left.

transform: translateX(-90%);

This is the value you want to change to update the progress, use inverse value, so -90% is really 10% of progress (100 - 10 = 90) and so on.

Use overflow: hidden; on the outer div to hide the extra green.

.progress-bar {
  overflow: hidden; /* hide the green that overflows */
  background: grey;
  height: 25px;
  width: 100%;
  border-radius: 12.5px;
}

.progress {
  display: block;
  background: green;
  height: 100%;
  width: 100%; /* same width as outer div */
  border-radius: 12.5px;
  transform: translateX(-90%); /* this is the value you want to change to update the progress, use inverse value, so -90% is really 10% of progress (100 - 10 = 90) */
}
<div class="progress-bar">
  <div class="progress"></div>
</div>

Upvotes: 0

Chaska
Chaska

Reputation: 3205

If you would like to completely keep the radius of the progress bar, you may try cloning a same element as the progress bar container and set its left.

This example is working with Javascript or you may use pure css only by editing its left.

Please see if this is your another good choice as well.

set_progress(2); // percentage of progress

function set_progress(p) {
  $('.progress-container span').css('left', (p-100)+'%');
}
.progress-container {
  position: relative;
  display: block;
  width: 100%;
  height: 24px;
  background-color: #555;
  border-radius: 12px;
  overflow: hidden;
}
.progress-container > span {
  position: absolute;
  display: block;
  top: 0;
  left: -100%;
  width: 100%;
  height: 24px;
  background-color: #0c0;
  border-radius: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-container">
  <span></span>
</div>

Upvotes: 0

Mosia Thabo
Mosia Thabo

Reputation: 4267

try adding:

overflow: hidden;

for your green filler. It will hide inside the container. What you're trying to do is close to impossible. Can you imagine adding a border-radius on an element that is < 2px in width?

<div style="background: grey; 
            height: 25px; 
            border-radius: 12.5px; 
            width: 100%; 
            overflow: hidden;">
  <div style="background: green; 
              height: 25px; 
              border-radius: 12.5px; 
              width: 1%" />
</div>

Upvotes: 2

Related Questions