Circular Progress Bar With bootstrap HTML / CSS

Today, We want to share with you bootstrap progress bar circle.In this post we will show you bootstrap progress bar steps, hear for Pure CSS (SCSS) Bootstrap compatible circular progress bars we will give you demo and example for implement.In this post, we will learn about Angularjs Progress Bar Demo with an example.

Bootstrap 4 Circle progress bar Example

HTML Code

<div class="container p-5">
	<div class="progress" data-percentage="74">
		<span class="progress-left">
			<span class="progress-bar"></span>
		</span>
		<span class="progress-right">
			<span class="progress-bar"></span>
		</span>
		<div class="progress-value">
			<div>
				74%<br>
				<span>completed</span>
			</div>
		</div>
	</div>
</div>

Added Libs

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css

CSS Code

$borderWidth: 5px;
$animationTime: .5s;
$border-color-default: #efefef;
$border-color-fill: #ffb43e;
$size: 160px;
$howManySteps: 100; //this needs to be even. 

.progress {
  width: $size;
  height: $size;
  line-height: $size;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: $borderWidth solid $border-color-default;
    position: absolute;
    top: 0;
    left: 0;
  }
  > span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
  }
  .progress-left {
    left: 0;
  }
  .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: $borderWidth;
    border-style: solid;
    position: absolute;
    top: 0;
    border-color: $border-color-fill;
  }
  .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: ($size/2);;
    border-bottom-right-radius: ($size/2);;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
    //animation: loading-2 1.5s linear forwards 1.8s;
  }
  .progress-right {
    right: 0;
    .progress-bar {
      left: -100%;
      border-top-left-radius: ($size/2);;
      border-bottom-left-radius: ($size/2);;
      border-right: 0;
      -webkit-transform-origin: center right;
      transform-origin: center right;
      //animation: loading-1 1.8s linear forwards;
    }
  }
  .progress-value {
    display: flex;
    border-radius: 50%;
    font-size: 1rem;
    text-align: center;
    line-height: 20px;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-weight: 300;
    div {
      //margin-top: 10px;
    }
    span {
      font-size: 12px;
      text-transform: uppercase;
    }
  }
}

@for $i from 1 through $howManySteps {
	$stepName: ($i*(100 / $howManySteps));

	//animation only the left side if below 50%
	@if $i <= ($howManySteps/2) { 
		.progress[data-percentage="#{$stepName}"] {
			.progress-right .progress-bar {
				 animation: loading-#{$i} $animationTime linear forwards;
			}
			.progress-left .progress-bar {animation: 0;}
		}
	}
	//animation only the right side if above 50%
	@if $i > ($howManySteps/2)  {  
		.progress[data-percentage="#{$stepName}"] {
			.progress-right .progress-bar {
				animation: loading-#{($howManySteps/2)} $animationTime linear forwards; //set the animation to longest animation
			}
			.progress-left .progress-bar {
      animation: loading-#{$i - ($howManySteps/2)} $animationTime linear forwards $animationTime;
    }
		}
	}
}

//animation
@for $i from 1 through ($howManySteps/2) { 
	$degrees: (180/($howManySteps/2));
	$degrees: ($degrees*$i);
	@keyframes loading-#{$i}{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate($degrees);
			transform: rotate(#{$degrees}deg);
    }
	}
}

I hope you get an idea about circle progressbar jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  How To Work With Laravel 6 Flash Messages?

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  check if all values in array are true javascript
  2. Read Also:  Jquery Remove Duplicates from an array Examples
  3. Read Also:  Converting CSV file into an Associative Array in PHP
  4. Read Also:  Golang compare Strings function alphabetically
  5. Read Also:  AngularJS Remove Last Comma from String
  6. Read Also:  Laravel update multiple rows with different values
  7. Read Also:  jQuery Regular Expression Real Time Form Validation Example
  8. Read Also:  Get Content and Attributes using JavaScript jQuery
  9. Read Also:  how to create database in mongodb?
  10. Read Also:  How To Work With Laravel 6 Flash Messages?
CLOSEX