I need help with customizing the progress bar in HTML and CSS

Question

I need help with customizing the progress bar in HTML and CSS

How can I create a progress bar like the one shown below:

.detail-load {
    height: 42px;
    border: 1px solid #A2B2C5;
    padding: 1px;
    border-radius: 10px;
}

.detail-load > .detail-loading {
    background: #904BFF;
    height: 100%;
    border-radius: 10px;
}

.detail-load-text {
    position: absolute;
    right: 0;
    left: 0;
    top: 10px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 17px;
}

<div class="detail-pop-item">
     <div class="detail-load">
         <div class="detail-loading" style="width: 80%;"></div>
     </div>
     <div class="detail-load-text">80%</div>
</div>

I need assistance in creating a progress bar similar to the example image above. Can someone please help?

javascript html css

Answer 1

Answer №1

If you want to achieve the desired outcome, consider using the clip-path property. To simulate loading, I added some placeholder JavaScript code in the snippet.

To customize the colors, adjust --loading-color-primary and --loading-color-secondary with your preferred colors.

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>

Answer 2

If you want to achieve the desired outcome, consider using the clip-path property. To simulate loading, I added some placeholder JavaScript code in the snippet.

To customize the colors, adjust --loading-color-primary and --loading-color-secondary with your preferred colors.

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>

Answer 3

Answer №2

Here is a great example of what you're trying to achieve:

Check out this CodePen link

<div class="wrapper">
  <div class="bg">
    <div class="el"></div>
  </div>
</div>

$loadingTime: 10s;
$color: rgb(255,0,0);

body {
  background-color: white;
}

@keyframes loading {
  0% {
    width: 0;
  } 100% {
    width: 100%;
  }
}

@keyframes percentage { 
  @for $i from 1 through 100 {
    $percentage: $i + "%";
    #{$percentage} {
      content: $percentage;
    }
  }
}

.bg {
  background-color: $color;
  animation: loading $loadingTime linear infinite;
}

.el{
  color: $color;
  width: 200px;
  border: 1px solid $color;
  
  &:after {
    padding-left: 20px;
    content: "0%";
    display: block;
    text-align: center;
    font-size: 50px;
    padding: 10px 20px;
    color: rgb(0,255,255);
    mix-blend-mode: difference;
    animation: percentage $loadingTime linear infinite;
  }
}

html {
  height: 100%;
  background-color: white;
  font-family: 'PT Sans', sans-serif;
  font-weight: bold;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

A crucial element to note here is the mix-blend-mode property which determines how an element blends with its background.

To delve deeper into this topic, check out resources like this and that.

Answer 4

Here is a great example of what you're trying to achieve:

Check out this CodePen link

<div class="wrapper">
  <div class="bg">
    <div class="el"></div>
  </div>
</div>

$loadingTime: 10s;
$color: rgb(255,0,0);

body {
  background-color: white;
}

@keyframes loading {
  0% {
    width: 0;
  } 100% {
    width: 100%;
  }
}

@keyframes percentage { 
  @for $i from 1 through 100 {
    $percentage: $i + "%";
    #{$percentage} {
      content: $percentage;
    }
  }
}

.bg {
  background-color: $color;
  animation: loading $loadingTime linear infinite;
}

.el{
  color: $color;
  width: 200px;
  border: 1px solid $color;
  
  &:after {
    padding-left: 20px;
    content: "0%";
    display: block;
    text-align: center;
    font-size: 50px;
    padding: 10px 20px;
    color: rgb(0,255,255);
    mix-blend-mode: difference;
    animation: percentage $loadingTime linear infinite;
  }
}

html {
  height: 100%;
  background-color: white;
  font-family: 'PT Sans', sans-serif;
  font-weight: bold;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

A crucial element to note here is the mix-blend-mode property which determines how an element blends with its background.

To delve deeper into this topic, check out resources like this and that.

Answer 5

Answer №3

A unique method I employed involves utilizing a CSS variable to manage the length of the loading progress and display the value at the same time.

To showcase the value using a pseudo-class, I had to implement a number hack by employing counter-reset on the ::after pseudo-element.

For changing the dark text to white, I utilized mix-blend-mode: color-dodge. Although not flawless, it might suffice for the purpose?

.detail-load {
  height: 42px;
  border: 1px solid #A2B2C5;
  padding: 1px;
  border-radius: 10px;
}

.detail-load > .detail-loading {
  background: #904BFF;
  height: 100%;
  border-radius: 10px;
  
  /* ADDED */
  width: calc(var(--progress) * 1%);
  position: relative;
}

.detail-load > .detail-loading::after {
  font-weight: 600;
  font-size: 17px;
  
  /* ADDED */
  counter-reset: number-hack var(--progress);
  content: counter(number-hack)"%";

  position: absolute;
  right: 0px;
  top: 50%;
  transform: translate(50%, -50%);
  
  color: #d2b6ff;
  mix-blend-mode: color-dodge;
}

.detail-load > .detail-loading.grey-text::after {
  color: #b5b5b5;
}

<div class="detail-pop-item">
  <div class="detail-load">
    <div class="detail-loading" style="--progress: 30"></div>
  </div>
</div>

<div class="detail-pop-item">
  <div class="detail-load">
    <div class="grey-text detail-loading" style="--progress: 60"></div>
  </div>
</div>

Answer 6

A unique method I employed involves utilizing a CSS variable to manage the length of the loading progress and display the value at the same time.

To showcase the value using a pseudo-class, I had to implement a number hack by employing counter-reset on the ::after pseudo-element.

For changing the dark text to white, I utilized mix-blend-mode: color-dodge. Although not flawless, it might suffice for the purpose?

.detail-load {
  height: 42px;
  border: 1px solid #A2B2C5;
  padding: 1px;
  border-radius: 10px;
}

.detail-load > .detail-loading {
  background: #904BFF;
  height: 100%;
  border-radius: 10px;
  
  /* ADDED */
  width: calc(var(--progress) * 1%);
  position: relative;
}

.detail-load > .detail-loading::after {
  font-weight: 600;
  font-size: 17px;
  
  /* ADDED */
  counter-reset: number-hack var(--progress);
  content: counter(number-hack)"%";

  position: absolute;
  right: 0px;
  top: 50%;
  transform: translate(50%, -50%);
  
  color: #d2b6ff;
  mix-blend-mode: color-dodge;
}

.detail-load > .detail-loading.grey-text::after {
  color: #b5b5b5;
}

<div class="detail-pop-item">
  <div class="detail-load">
    <div class="detail-loading" style="--progress: 30"></div>
  </div>
</div>

<div class="detail-pop-item">
  <div class="detail-load">
    <div class="grey-text detail-loading" style="--progress: 60"></div>
  </div>
</div>

Answer 7

Answer №4

After taking a cue from Veselin's response, all you need to do is tweak the color attributes in the following manner: $color: rgb(255,0,0); changes to $color: rgb(255,0,255); and

.el{
  ...
  &:after {
    ...
    color: rgb(0,255,255);
  }
}

transforms into

.el{
  ...
  &:after {
    ...
    color: rgb(0,255,0);
  }
}

The end result looks like this:

$loadingTime: 10s;
$color: rgb(255,0,255);

body {
  background-color: white;
}

@keyframes loading {
  0% {
    width: 0;
  } 100% {
    width: 100%;
  }
}

@keyframes percentage { 
  @for $i from 1 through 100 {
    $percentage: $i + "%";
    #{$percentage} {
      content: $percentage;
    }
  }
}

.bg {
  background-color: $color;
  animation: loading $loadingTime linear infinite;
}

.el{
  color: $color;
  width: 200px;
  border: 1px solid $color;
  
  &:after {
    padding-left: 20px;
    content: "0%";
    display: block;
    text-align: center;
    font-size: 50px;
    padding: 10px 20px;
    color: rgb(0,255,0);
    mix-blend-mode: difference;
    animation: percentage $loadingTime linear infinite;
  }
}

html {
  height: 100%;
  background-color: white;
  font-family: 'PT Sans', sans-serif;
  font-weight: bold;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

Answer 8

After taking a cue from Veselin's response, all you need to do is tweak the color attributes in the following manner: $color: rgb(255,0,0); changes to $color: rgb(255,0,255); and

.el{
  ...
  &:after {
    ...
    color: rgb(0,255,255);
  }
}

transforms into

.el{
  ...
  &:after {
    ...
    color: rgb(0,255,0);
  }
}

The end result looks like this:

$loadingTime: 10s;
$color: rgb(255,0,255);

body {
  background-color: white;
}

@keyframes loading {
  0% {
    width: 0;
  } 100% {
    width: 100%;
  }
}

@keyframes percentage { 
  @for $i from 1 through 100 {
    $percentage: $i + "%";
    #{$percentage} {
      content: $percentage;
    }
  }
}

.bg {
  background-color: $color;
  animation: loading $loadingTime linear infinite;
}

.el{
  color: $color;
  width: 200px;
  border: 1px solid $color;
  
  &:after {
    padding-left: 20px;
    content: "0%";
    display: block;
    text-align: center;
    font-size: 50px;
    padding: 10px 20px;
    color: rgb(0,255,0);
    mix-blend-mode: difference;
    animation: percentage $loadingTime linear infinite;
  }
}

html {
  height: 100%;
  background-color: white;
  font-family: 'PT Sans', sans-serif;
  font-weight: bold;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

I need help with customizing the progress bar in HTML and CSS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can I best access the object being exposed on the webpage using <script type="text/json" id="myJSON">?

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

AngularJS Get request unable to fetch image URL due to receiving a "302 found" error

What is the best way to ensure that the input areas stretch all the way to the edge of the screen?

Using different CSS classes interchangeably in AngularJS

Mastering the fundamentals of integrating/augmenting a fresh template in Umbraco

Looking for assistance with troubleshooting CSS issues specifically in Internet Explorer

Tips for implementing an if else statement in ReactJS while utilizing the useEffect hook

What is the best way to manage div visibility and sorting based on selections made in a select box?

Utilizing personalized CSS for specific ioslides

The python-pyinstrument is in need of a javascript dependency that seems to

My content is being obstructed by a single-page navigation system

Using the input type 'number' will result in null values instead of characters

Rails 4 does not properly handle the execution of Ajax responses

Processing two Array Objects can be achieved without resorting to the EVAL function

Having trouble retrieving data sent via ajax in PHP

Analyzing a JSON Structure Containing Numerous Sub-Objects

Store a new JSON item in the localStorage

Activate the 'swipe back' feature within ion-item upon selecting ion-option-button

Developing a HTML button through Javascript that triggers a method with a single parameter when clicked