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:

https://i.sstatic.net/BFv87.png

.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

Streamline retrieval of alphanumeric indexing within json

The v-on:click event handler is not functioning as expected in Vue.js

Unable to reinitialize MUI DatePicker after keydown event

Occasionally, the view fails to update following an $http request

Which HTTP headers pertain to the loading of iframes? nuxt-helmet

What size should I use for creating a responsive website?

Tips for increasing the font size using html and css?

I'm experimenting with incorporating images into a card component using the map function in JavaScript. All aspects of the card are functioning properly except for the image

center menu items will be displayed as a fallback in case flexbox is unavailable

Simple steps to access a feature on an AngularJS application

Transferring Data from Controller to HTML in AngularJS Version 1

The server experiences crashing issues when attempting to retrieve data from Mangodb for the second or third time

Issue with the Z-Index property not functioning as expected on unordered lists within a dropdown menu

Error message: The recursive function is unable to return a value when operating

div that adjusts its max-width to always perfectly match the width of its contents

"Optimizing meta tags and adjusting text size for better

Using both PHP and HTML to create a select tag

Concealing an element by using parentElement.getElementsByClassName to set the display property to none

Are your macOS devices not displaying the Scrollbar CSS buttons correctly?

Angular CDKScrollable not triggering events