2

I've found some circular progress bars but I cannot figure it out how are they filled. Here is a link to some codepen: https://codepen.io/anon/pen/aeEEmx

As far as I know when you use gradient and add the position(deg in this case) it should start where you specify the value. For example the one with progress-20 class in css there is one linear-gradient with 18 deg and then another one with 90deg but I can t understand how those values work together 18deg and 90deg or -18deg and 90deg in that one with 30%.

Here is the code: 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #fff;
  font-family: "Lato", "Arial", "san-serif";
  color: #555;
  font-size: 20px;
  font-weight: 300px;
  text-rendering: optimizeLegibility;
}

.radialProgressBar {
  border-radius: 50%;
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
  width: 100px;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #ddd;
  margin: 20px;
}

.radialProgressBar .overlay {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin: auto;
  background: #fff;
  text-align: center;
  padding-top: 30%;
}

.progress-20 {
  background-image: linear-gradient(18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
}

.progress-30 {
  background-image: linear-gradient(-18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
}

.progress-40 {
  background-image: linear-gradient(-54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
}

.progress-70 {
  background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(18deg, #028cd5 50%, #ddd 50%);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="radialProgressBar progress-20">
    <div class="overlay">20</div>
  </div>
  <div class="radialProgressBar progress-30">
    <div class="overlay">30</div>
  </div>
  <div class="radialProgressBar progress-40">
    <div class="overlay">40</div>
  </div>
  <div class="radialProgressBar progress-70">
    <div class="overlay">70</div>
  </div>
</body>

</html>
Osiris
  • 107
  • 4
  • 14

2 Answers2

1

This is made using several overlapping gradients. If you use different colors for the various gradients you can see the approach more easily. The 90 degree gradient cuts the chart in half, while the one other one (18deg in this case) overlays the rest of the blue leaving only the relevant blue parts visible.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #fff;
  font-family: "Lato", "Arial", "san-serif";
  color: #555;
  font-size: 20px;
  font-weight: 300px;
  text-rendering: optimizeLegibility;
}

.radialProgressBar {
  border-radius: 50%;
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
  width: 100px;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #ddd;
  margin: 20px;
}

.radialProgressBar .overlay {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin: auto;
  text-align: center;
  padding-top: 30%;
}

.oneGradient {
  background-image: linear-gradient(90deg, #028cd5 50%, #ddd 50%);
}

.differentColor {
  background-image: linear-gradient(18deg, #aaa 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
}

.sameColor {
  background-image: linear-gradient(18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="radialProgressBar oneGradient">
    <div class="overlay"></div>
  </div>
  <div class="radialProgressBar differentColor">
    <div class="overlay"></div>
  </div>
  <div class="radialProgressBar sameColor">
    <div class="overlay"></div>
  </div>
</body>

</html>
Maharkus
  • 2,841
  • 21
  • 35
  • It's way easier using a SVG. Just play with its stroke, stroke-width and stroke-dasharray properties – M4FI4S Aug 06 '19 at 07:22
  • While that is true, OP was asking for an explanation on the approach in this specific example :) – Maharkus Aug 06 '19 at 07:24
  • Ye, I was trying to figure it out. For some reason I thought that 0deg would start from top and I was missing something. Thank you for your replies and I will also look into SVG as well – Osiris Aug 06 '19 at 07:28
1

This one is made with a SVG element. Pretty simple though. Just play around the stroke-dasharray property if you want it running; where "73" is the current percentage and "100" the total one.

.percentage-container {
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
}

.progress {
    background-color: rgba(209,218,225,.3);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    stroke: #FF4C1D;
    stroke-width: 10px;
    stroke-dasharray: 73, 100;
    transition: stroke-dasharray 280ms cubic-bezier(0.4,0,0.2,1);
    -webkit-transition: stroke-dasharray 280ms cubic-bezier(0.4,0,0.2,1);
}

.percentage-inner-container {
    width: 90%;
    height: 90%;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF;
    z-index: 1;
}

.percentage-amount {
    font-family: 'Arial', sans-serif;
    font-size: 70px;
    color: #34495E;
}

.percentage-amount::after {
    content: '%';
    font-size: 26px;
    position: relative;
    bottom: 30px;
}
<div class="percentage-container">
     <svg class="progress" viewBox="0 0 36 36"><path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path></svg>
     <div class="percentage-inner-container">
          <span class="percentage-amount">73</span>
     </div>
</div>
M4FI4S
  • 166
  • 7