Pure-Css-Progress-Circle

In this example below you will see how to do a Pure-Css-Progress-Circle with some HTML / CSS and Javascript

Progress circle with Scss

Thumbnail
This awesome code was written by CityRay, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright CityRay ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pure-Css-Progress-Circle</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,300italic,300,500,500italic'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="header">
  <h1 class="title">Pure Css Circular Progress</h1>
</div>

<div class="content">
  <div class="group">
    <div class="circular-progress60"></div>
    <div class="circular-text">HTML</div>
  </div>
  
  <div class="group">
    <div class="circular-progress85"></div>
    <div class="circular-text">HTML</div>
  </div>
  
  <div class="group">
    <div class="circular-progress100"></div>
    <div class="circular-text">HTML</div>
  </div>
  
  <div class="group">
    <div class="circular-progress75"></div>
    <div class="circular-text">HTML</div>
  </div>
  
  <div class="group">
    <div class="circular-progress90"></div>
    <div class="circular-text">HTML</div>
  </div>  
  
</div>


<div id="footer">
  <a href="https://twitter.com/ray102467" target="_blank" class="twitter">@RayLin</a>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/CityRay/pure-css-progress-circle-GjAZzb */
/** ============================
 ** variable
 ** ============================ */
/** ============================
 ** function circular-progress
 ** ============================ */
/** ============================
 ** Mixins Circular Progress
 ** ============================ */
body {
  background-color: #EEE;
  font-family: Roboto;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.header {
  display: flex;
  justify-content: center;
}
.header .title {
  color: #5d5d5d;
  text-align: center;
  font-weight: normal;
}

.content {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
@media screen and (min-width: 1100px) {
  .content {
    justify-content: space-around;
  }
}

.group {
  margin: 10px;
}
.group .circular-progress60 {
  background: linear-gradient(90deg, #E0E0E0 50%, transparent 50%, transparent), linear-gradient(126deg, #FF70A6 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all .3s linear;
}
.group .circular-progress60::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "10%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  -webkit-transform: scale(0.87);
          transform: scale(0.87);
  width: 100%;
}
.group .circular-progress60:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.group .circular-progress73 {
  background: linear-gradient(-7.2deg, #FF9770 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9770 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all .3s linear;
}
.group .circular-progress73::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "73%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  -webkit-transform: scale(0.87);
          transform: scale(0.87);
  width: 100%;
}
.group .circular-progress73:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.group .circular-progress75 {
  background: linear-gradient(0deg, #FF9770 50%, transparent 50%, transparent), linear-gradient(270deg, #FF9770 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all .3s linear;
}
.group .circular-progress75::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "75%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  -webkit-transform: scale(0.87);
          transform: scale(0.87);
  width: 100%;
}
.group .circular-progress75:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.group .circular-progress85 {
  background: linear-gradient(36deg, #70D6FF 50%, transparent 50%, transparent), linear-gradient(270deg, #70D6FF 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all .3s linear;
}
.group .circular-progress85::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "85%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  -webkit-transform: scale(0.87);
          transform: scale(0.87);
  width: 100%;
}
.group .circular-progress85:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.group .circular-progress90 {
  background: linear-gradient(54deg, #70D6FF 50%, transparent 50%, transparent), linear-gradient(270deg, #70D6FF 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all .3s linear;
}
.group .circular-progress90::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "90%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  -webkit-transform: scale(0.87);
          transform: scale(0.87);
  width: 100%;
}
.group .circular-progress90:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.group .circular-progress100 {
  background: linear-gradient(90deg, #C8E9A0 50%, transparent 50%, transparent), linear-gradient(270deg, #C8E9A0 50%, #E0E0E0 50%, #E0E0E0);
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  height: 200px;
  margin: 2em auto;
  position: relative;
  min-width: 200px;
  margin: 10px;
  transition: all .3s linear;
}
.group .circular-progress100::before {
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.54);
  content: "100%";
  font-size: 72px;
  font-weight: bold;
  height: 100%;
  left: 0;
  line-height: 200px;
  position: absolute;
  text-align: center;
  top: 0;
  -webkit-transform: scale(0.87);
          transform: scale(0.87);
  width: 100%;
}
.group .circular-progress100:hover {
  box-shadow: 0 0 100px 1px rgba(255, 214, 112, 0.35);
}
.group .circular-text {
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
}

.twitter {
  background-color: #FAFAFA;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.6);
  display: block;
  height: 36px;
  line-height: 36px;
  text-align: center;
  text-decoration: none;
  width: 140px;
  border-radius: 2px;
  margin: 1em auto;
  transition: box-shadow .3s linear;
}
.twitter:hover {
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

#footer {
  margin-top: 30px;
}

@-webkit-keyframes turning_cw {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes turning_cw {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

Comments