Progress Bar with HTML and CSS

Progress Bar with HTML and CSS

#progressbar {  background-color: black;  border-radius: 13px;  /* (height of inner div) / 2 + padding */  padding: 3px;}
#progressbar>div {  background-color: orange;  width: 40%;  /* Adjust with JavaScript */  height: 20px;  border-radius: 10px;}

<div id="progressbar">  <div></div></div>

Sophisticated proportional triple element progress bar design using only CSS

You can do like below. I am using different colorations to better see the result

body {
  margin: 100px;
  background: #CCC
}

.fullbar {
  background-color: blue;
}

.progress {
  background: lightgreen;
  margin: 10px 0 0 0;
  height: 5px;
  position:relative; /* relative here */
  width:var(--p);
}

.number {
  position:absolute; /* absolute here */
  background: rgba(255,0,0,0.5);
  left:100%; /* push to the right side */
  transform:translateX(calc(-1*var(--p))); /* offset to the left based on --p */
  top:-10px;
  bottom:-10px;
  color: #FFF;
  padding: 0 2px 1px 3px;
}

<div class="fullbar">
  <div class="progress" style="--p:0%">
    <div class="number">0%</div>
  </div>
</div>

<div class="fullbar">
  <div class="progress" style="--p:20%">
    <div class="number">20%</div>
  </div>
</div>

<div class="fullbar">
  <div class="progress" style="--p:50%">
    <div class="number">50%</div>
  </div>
</div>

<div class="fullbar">
  <div class="progress" style="--p:80%">
    <div class="number">80%</div>
  </div>
</div>

<div class="fullbar">
  <div class="progress" style="--p:100%">
    <div class="number">100%</div>
  </div>
</div>

How do you implement a simple progress bar in Angular 8?

Simplest code I can think of

1. Set two divs, one for the background, one for the fill, set the width of the fill div with ngStyle, where progress is a number between 0 and 1

<div class="progress-bar">
  <div class="progress-bar-fill" [ngStyle]="{'width.%': progress * 100}"></div>
</div>

2. Set progress bar width and height so you can use % for the width. Also set height for the fill div

.progress-bar {
  width: 200px;
  height: 25px;
  background-color: #222;
}

.progress-bar-fill {
  background-color: #5F5;
  height: 100%; /* This is important */
}

Streching Layout & Even Distribution of Project Steps: Visualisation of a Custom Progress Bar (CSS/HTML)

@Sam, Please check the result and let me know your opinion. I hope it would be helpful for you ~

body {
            background: lightblue;
            width: auto;
            padding: 50px;
        }

        a {
            text-decoration: none
        }

        .progress {
            display: flex;
            background: yellow;
            width: auto;
            padding: 0;
        }

        .progress>li {
            flex: 2;
        }

        .progress>li:first-child,
        .progress>li:last-child {
            flex: 1;
        }

        .progress>li:first-child a {
            text-align: left;
        }

        .progress>li:last-child a {
            text-align: right;
        }

        .progress>li,
        .progress>li a {
            list-style: none;
            text-align: center;
            padding: 0;
            margin: 0;
            position: relative;
            text-overflow: ellipsis;
            color: lightgrey;
            display: block;
        }

        .progress>li .circle {
            border-radius: 50%;
            width: 24px;
            height: 24px;
            background: lightgrey;
            display: block;
            margin: 0 auto .5em;
        }

        .progress>li:first-child .circle {
            margin-left: 7px;
        }

        .progress>li:last-child .circle {
            margin-right: 7px;
        }

        .progress>li .circle:after,
        .progress>li .circle:before {
            display: block;
            position: absolute;
            top: 10px;
            width: 100%;
            height: 4px;
            content: '';
            background: lightgrey;
        }

        .progress>li :before {
            left: 0
        }

        .progress>li :after {
            right: 0
        }

        .progress>li:first-child .circle:after,
        .progress>li:first-child .circle:before {
            width: 50%;
        }

        .progress>li:last-child .circle:after,
        .progress>li:last-child .circle:before {
            width: 50%;
        }

        .progress>li:first-child .circle::before {
            width: calc(50% - 10px);
            left: 10px;
        }
        .progress>li:last-child .circle::after {
            width: calc(50% - 10px);
            right: 10px;
        }

        .progress>li.done .circle,
        .progress>li.done .circle:after,
        .progress>li.done .circle:before {
            background: green
        }

        .progress>li.done,
        .progress>li.done a {
            color: green
        }

        .progress>li.busy .circle,
        .progress>li.busy .circle:after,
        .progress>li.busy .circle:before {
            background: violet
        }

        .progress>li.busy,
        .progress>li.busy a {
            color: violet
        }

<ul class="progress">

  <li class="done">
    <a href="#" title="More about the First Step">
      <span class="circle"></span>
    Step1</a>
  </li>

  <li class="done">
    <a href="#" title="Afterwards the Second Step">
      <span class="circle"></span>
    Step2</a>
  </li>

  <li class="busy">
    <a href="#" title="This about the current active Step">
      <span class="circle"></span>
    Step3</a>
  </li>

  <li>
    <a href="#" title="Future Next Step">
      <span class="circle"></span>
    Step4</a>
  </li>

  <li>
    <a href="#" title="And the Final Step">
      <span class="circle"></span>
    Step5</a>
  </li>

</ul>

How can I make this progress bar mobile and desktop responsive

.progress_bar>div {
    display: inline-block;
}

.progress-container {
    width: 71.3%;
    /*margin-top: 9.39%;*/
    margin-bottom: 1%;
    font-weight: 300;
    margin-right: 2em;
    position: fixed;
    bottom: 0;
}

.progress-steps {
    counter-reset: step;
}

.progress-steps li {
    list-style-type: none;
    width: 33.333333%;
    float: left;
    font-size: 1.2em;
    position: relative;
    text-align: center;
    color: black;
}

.progress-steps li:before {
    width: 2.5em;
    height: 2.5em;
    content: counter(step);
    counter-increment: step;
    line-height: 2.5em;
    border: 2px solid black;
    display: block;
    text-align: center;
    margin: 0 auto .7em auto;
    border-radius: 50%;
    background-color: black;
}

.progress-steps li:after {
    width: calc(100% - 2.5em);
    height: 0.2em;
    content: "";
    position: absolute;
    background-color: black;
    top: 1.25em;
    right: calc(50% + 1.25em);
    z-index: -1;
}

.progress-steps li:first-child:after {
    content: none;
}

.progress-steps li.active {
    color: black;
}

.progress-steps li.active:before {
    border-color: black;
}

.progress-steps li.active+li:before {
    background-color: transparent;
    border: 2px solid black;
    color: transparent;
}

@media (max-width: 1024px) {
    .progress-container {
        width: 90%;
        /*margin-top: 7.15em;
        padding-bottom: 0.4em;*/
        margin-bottom: 2%;
    }

    .progress-steps li {
        font-size: 0.9em;
    }
}

How do I do this to the progress bar?(html-css)

You could use the clip-path property to achieve your desired result. I included some dummy javascript in the snippet to simulate loading.

You can set --loading-color-primary and --loading-color-secondary to any two colors you'd like.

const front = document.getElementById('progress-front');
const back = document.getElementById('progress-back');

let progress = 0;

setInterval(() => {
  front.style.webkitClipPath = `inset(0 0 0 ${progress}%)`;

  if(++progress >= 100) {
    progress = 0;
  }

  front.innerHTML = back.innerHTML = progress + "%";
}, 50);

:root {
  --loading-color-primary: purple;
  --loading-color-secondary: white;
}

.progress {
  position: relative;
  display: flex;
  font-size: 50px;
  border: 2px solid var(--loading-color-primary);
  overflow: hidden;
  width: 100%;
}

.back {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: var(--loading-color-primary);
  color: var(--loading-color-secondary);
}

.front {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  width: 100%;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--loading-color-secondary);
  color: var(--loading-color-primary);
}

<div class="progress">
  <div class="back" id="progress-back">0%</div>
  <div class="front" id="progress-front">0%</div>
</div>

How do you put text inside of a progress bar?

you can use before in css

#myturn{
  height:30px;
  width:300px;
  background-color:orange;
  position:relative;
}

#myturn::before{
  position:absolute;
  height:30px;
  background:green;
  content:'Custom text or 70%';//add your text
  top:0;
  left:0;
  width:70%;
  display:flex;
  color:white;
  align-items:center;
  justify-content:flex-end;
  padding-right:10px;
}

<progress align="left" class="turnbox2 turnbar" id="myturn"></progress>

HTML/CSS Make a Progress Bar

Well, IMO you should use less vh and vw. Your font simply defines the height and the width of the text part. By removing them, you get something as you want as I understood (I also removed useless properties) :

.myskills {
  width: 45vw;
  background: red;
  margin: 1em;
}

.skillbarContainer {
  display: flex;
}

.skillName {
  background-color: blue;
  font-size: 2em;
}

.meter {
  float: left;
  width: 100%;
  /* Can be anything */
  position: relative;
  background: #555;
  padding: 3px;
}

.meter>span {
  display: block;
  height: 100%;
  background-color: hotpink;
  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
}

<div class="myskills">
  <div class="skillbarContainer">
    <div class="skillName">HTML</div>
    <div class="meter">
      <span style="width: 80%"></span>
    </div>
  </div>
</div>

---

Related Topics