Best 4 CSS Progress Bars Can Use on Your Website

The HTML progress bar is simple to implement, but it is difficult to customize. But next, you see the CSS Progress bar, which is a little prettier compared to the HTML progress bar. This post explains the 4 CSS Progress Bars example. and these Progress Bars are really beneficial to your website. CSS is very significant in website customization. CSS allows you to effortlessly create reusable elements like background patterns, cards, buttons, navbars, and many more. It helps in the creation of a dynamic website in a timely and efficient manner.

This post has 4 CSS progress bars examples which are mostly used in websites. You can display the progress bar to show the matrix, show how long the download a file, or the real-time feedback on background progress. you can also use this progress bar for showing directly your project and tweak them to your liking.

Best 4 CSS Progress Bars Examples

1. Discrete Prosgress Bar

Best 4 CSS Progress Bars Can Use on Your Website

Discrete Progress bar, in modern times, uses the CSS @keyframe animation to add the progress bar effect to the webpage. For example, if you want to use this animation for infinite time, then you simply use the animation-iteration-count and then it repeats at infinite time. Using this property, you can show your discrete progress bar like this in the background and it ultimately helps to improve your UX design in a website.

HTML Code:

<!-- 4 CSS Progress Bars -->
<div class="progress">

   <div class="track">
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
   </div>
</div>

CSS Code:

<!-- 4 CSS Progress Bars -->
body {

    background-color: #2e2e2e;
}
div.track, div.bar {
    box-sizing: border-box;
    position: relative;
}
div.progress {
    width: 100px;
    padding-left: 2px;
    padding-right: 2px;
    height: 21px;
    border-radius: 5px;
    border: solid 3px #4e4e4e;
    background-color: #1e1e1e;
    position: absolute;
    top: calc(50% - 13px);
    left: calc(50% - 53px);
}
div.track {
    position: relative;
    width: 100%;
    height: 21px;
    overflow: hidden;
    -webkit-animation: prgBar 5s linear 0s infinite alternate;
    animation: prgBar 5s linear 0s infinite alternate;
}
div.bar {
    height: 15px;
    width: 6px;
    background-color: #00ffff;
    position: relative;
    border-radius:2px;
    box-shadow: 0px 0px 5px #00ffff;
    margin-left: 2px;
    margin-right: 2px;
    margin-bottom: 100px;
    top: 3px;
    float: left;
    clear: top;
}
@-webkit-keyframes prgBar {
    0% { width: 0% }
    9.99% { width: 0% }
    10% { width: 10% }
    95% { width: 100% }
}
@keyframes prgBar {
    0% { width: 0% }
    9.99% { width: 0% }
    10% { width: 10% }
    95% { width: 100% }
}

2. HTML and CSS Step Progress Bar

Best 4 CSS Progress Bars Can Use on Your Website

This example helps to understand the use of step-based percentages to fill the progress bar. The CSS selector is specify the color of the progress bar of each percentage value. You can modify your background-color property for each step (#five: checked, #twentyfive: checked, and so on). You can also modify this according to your requirement, but make sure the change the width property of the steps accordingly.

HTML Code:

<!-- 4 CSS Progress Bars -->
<div class="container">

    <input type="radio" class="radio" name="progress" value="five" id="five">
    <label for="five" class="label">5%</label>
 
    <input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive">
    <label for="twentyfive" class="label">25%</label>
 
    <input type="radio" class="radio" name="progress" value="fifty" id="fifty">
    <label for="fifty" class="label">50%</label>
 
    <input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
    <label for="seventyfive" class="label">75%</label>
 
    <input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
    <label for="onehundred" class="label">100%</label>
 
    <div class="progress">
        <div class="progress-bar"></div>
    </div>
</div>

 

CSS Code:

<!-- 4 CSS Progress Bars -->
body {

    font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
    color: #404040;
    background: #2a2a2a;
} 
.container {
    margin: 60px auto;
    width: 400px;
    text-align: center;
}
.container .progress {
    margin: 0 auto;
    width: 400px;
}
.progress {
    padding: 4px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar {
    height: 16px;
    border-radius: 4px;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    -webkit-transition: 0.4s linear;
    -moz-transition: 0.4s linear;
    -o-transition: 0.4s linear;
    transition: 0.4s linear;
    -webkit-transition-property: width, background-color;
    -moz-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
#five:checked ~ .progress > .progress-bar {
    width: 5%;
    background-color: #f63a0f;
} 
#twentyfive:checked ~ .progress > .progress-bar {
    width: 25%;
    background-color: #f27011;
}
#fifty:checked ~ .progress > .progress-bar {
    width: 50%;
    background-color: #f2b01e;
}
#seventyfive:checked ~ .progress > .progress-bar {
    width: 75%;
    background-color: #f2d31b;
} 
#onehundred:checked ~ .progress > .progress-bar {
    width: 100%;
    background-color: #86e01e;
}
.radio {
    display: none;
}
.label {
    display: inline-block;
    margin: 0 5px 20px;
    padding: 3px 8px;
    color: #aaa;
    text-shadow: 0 1px black;
    border-radius: 3px;
    cursor: pointer;
}
.radio:checked + .label {
    color: white;
    background: rgba(0, 0, 0, 0.25);
}

 3. Circular Minimalist Progressive Bars

Best 4 CSS Progress Bars Can Use on Your Website

If you want to create progress bars like the above example, then take reference to the above example. At the beginner, it helps to create the circular progress bar. Circular progress bars are usually used on personal and business websites. You can modify b this progress bar according to your requirement.

HTML Code:

<!-- 4 CSS Progress Bars -->
<div class="container">

    <div class="container__progressbars">
        <div class="progressbar">
            <svg class="progressbar__svg">
                <circle cx="80" cy="80" r="70" class="progressbar__svg-circle circle-html shadow-html"> </circle>
            </svg>
            <span class="progressbar__text shadow-html">CSS</span>
       </div>
   </div>
</div>

CSS Code:

<!-- 4 CSS Progress Bars -->
a {

    text-decoration: none;
}
.made {
    display: block;
    color: #f2f2f2;
    font-size: 0.75rem;
    text-align: center;
}
* {
    box-sizing: border-box;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #0d0d0d;
}
.container__progressbars {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    min-width: 270px;
    width: 100%;
    min-height: 100%;
}
.progressbar {
    position: relative;
    width: 170px;
    height: 170px;
    margin: 1em;
    transform: rotate(-90deg);
}
.progressbar__svg {
    position: relative;
    width: 100%;
    height: 100%;
}
.progressbar__svg-circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 10;
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    stroke: white;
    stroke-linecap: round;
    transform: translate(5px, 5px);
}
.shadow-html {
    filter: drop-shadow(0 0 5px #ff6633);
}
.circle-html {
    -webkit-animation: anim_circle-html 1s ease-in-out forwards;
            animation: anim_circle-html 1s ease-in-out forwards;
}
.progressbar__text {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0.25em 0.5em;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 0.25em;
    transform: translate(-50%, -50%) rotate(90deg);
}
@-webkit-keyframes anim_circle-html {
    to {
        stroke-dashoffset: 22;
    }
}
@keyframes anim_circle-html {
    to {
        stroke-dashoffset: 22;
    }
}

You can also check – 11 Useful Attributes in HTML You Must Know

4. CSS Skill Progress Bar

Best 4 CSS Progress Bars Can Use on Your Website

If you want to create a progress bar with percentages with your skills and your logical idea, then it is for you. These 4 CSS Progress Bars this is a very useful progress bar on your website. You can set the height and width according to you with full modification property .skill-bar and .skill: before classes. You can change the length of the width property of the classes (.skill1, .skill2, .skill3).

HTML Code:

<!-- 4 CSS Progress Bars -->
<div class="wrapper">

    <h2 class="how-title">CSS3 Skill <span>Progress bar</span></h2>
    <div class="skill">
      <p>HTML5</p>
      <div class="skill-bar skill1">
        <span class="skill-count1">92%</span>
      </div>
    </div>
    <div class="skill">
      <p>CSS3</p>
      <div class="skill-bar skill2">
        <span class="skill-count2">86%</span>
      </div>
    </div>
    <div class="skill">
      <p>JavaScript</p>
      <div class="skill-bar skill3">
        <span class="skill-count3">74%</span>
      </div>
    </div>
  </div>
CSS Code:
<!-- 4 CSS Progress Bars -->
.wrapper {

  width: 400px;
  font-family: 'Roboto', sans-serif;
  margin: 0 auto;
}
.wrapper .how-title span{
  color: #068bff;
}
.skill {
  margin-bottom: 35px;
  position: relative;
  overflow-x: hidden;
}
.skill > p {
  font-size: 18px;
  font-weight: 700;
  color: #1a1716;
  margin: 0;
}
.skill:before {
  width: 100%;
  height: 10px;
  content: "";
  display: block;
  position: absolute;
  background: #959595;
  bottom: 0;
}
.skill-bar {
  width: 100%;
  height: 10px;
  background: #068bff;
  display: block;
  position: relative;
}
.skill-bar span {
  position: absolute;
  border-top: 5px solid #f4392f;
  top: -30px;
  padding: 0;
  font-size: 18px;
  padding: 3px 0;
  font-weight: 500;
}
.skill-bar{
  position: relative;
}
.skill1 .skill-count1 {
  right: 0;
}
.skill1 {
  width: 92%;
}
.skill2 {
  width: 86%;
}
.skill2 .skill-count2 {
  right: 0;
}
.skill3{
 width: 74%;
}
.skill3 .skill-count3 {
  right: 0;
}

Learn Incredible CSS Tricks

Using CSS techniques you can customize your website in different looks and make it an attractive website. For that, you should have the master skill in CSS. But at the beginner level, you should practice 4 CSS Progress Bars, and out of these 4 CSS Progress Bars practice different progress bars. Also, use the CSS3 tag and attributes. Most developers use CSS3 tags and attributes.

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!