Circular Progress Bar Tutorial

Circular Progress Bar Tutorial

HTML

<div class="container">
    <div class="circularProgress" 
         data-progress="185%" 
         style="--outerCircleColor:#13070C;
                --innerCircleColor:#6B4D57;
                --progressBarColor:#EFF9F0;
                --textColor:#DDC8C4"
    ></div>
    <div class="circularProgress" data-progress="50%"></div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Work+Sans');
$fontFamily: 'Work Sans', sans-serif;
@function rem($value) {
  @return unquote(($value/1px)/16+"rem");
}
*{
  box-sizing:border-box;
}
$circleColor:#303da1;

:root{
  --outerCircleColor:#303da1;
  --innerCircleColor:#3e4ec6;
  --progressBarColor:#ffffff;
  --textColor:#ffffff;
}
body{
  background-color: #CFFCFF;
}
.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
*{
  font-family:$fontFamily;
}
.wrapper{
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  font-size:rem(20px);
  font-family:$fontFamily;
  flex-wrap:wrap;
}


.circularProgress{
  height:rem(150px);
  width:rem(150px);
  border:rem(2px) solid var(--outerCircleColor);
  display: flex;
  position:relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
  background-color: var(--outerCircleColor);
  border-radius:rem(500px);
  justify-content: center;
  align-items: center;
  font-size:rem(26px);
  font-family:$fontFamily;
  flex-shrink:0;
  margin:10px 4px;
  &::after{
    content:attr(data-progress);
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    height:85%;  
    width:85%;
    display:flex;
    justify-content: center;
    align-items: center;
    color:var(--textColor);
    background-color: var(--innerCircleColor);
    border-radius:inherit;
    z-index:2;
    border:rem(2px) solid var(--outerCircleColor);
  }
  &.small{
    height:rem(100px);
    width:rem(100px);
    font-size:rem(16px);
  }
  &.big{
    height:rem(200px);
    width:rem(200px);
    font-size:rem(32px);
  }
}

CSS

@import url("https://fonts.googleapis.com/css?family=Work+Sans");
* {
  box-sizing: border-box;
}

:root {
  --outerCircleColor:#303da1;
  --innerCircleColor:#3e4ec6;
  --progressBarColor:#ffffff;
  --textColor:#ffffff;
}

body {
  background-color: #CFFCFF;
}

.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

* {
  font-family: "Work Sans", sans-serif;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  font-family: "Work Sans", sans-serif;
  flex-wrap: wrap;
}

.circularProgress {
  height: 9.375rem;
  width: 9.375rem;
  border: 0.125rem solid var(--outerCircleColor);
  display: flex;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: var(--outerCircleColor);
  border-radius: 31.25rem;
  justify-content: center;
  align-items: center;
  font-size: 1.625rem;
  font-family: "Work Sans", sans-serif;
  flex-shrink: 0;
  margin: 10px 4px;
}
.circularProgress::after {
  content: attr(data-progress);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 85%;
  width: 85%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--textColor);
  background-color: var(--innerCircleColor);
  border-radius: inherit;
  z-index: 2;
  border: 0.125rem solid var(--outerCircleColor);
}
.circularProgress.small {
  height: 6.25rem;
  width: 6.25rem;
  font-size: 1rem;
}
.circularProgress.big {
  height: 12.5rem;
  width: 12.5rem;
  font-size: 2rem;
}

JAVASCRIPT

$(document).ready(function(){
  $(".circularProgress").each(function(index,progress){
    var percentage = parseInt($(progress).attr("data-progress"));
    $(progress).css({
      "background-image":"conic-gradient(var(--progressBarColor)"+ percentage +"deg,rgba(0,0,0,0.1) "+percentage+"deg)",
    })
  });
});

 

Add a Comment

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