CSS3 implements circular progress bar

principle

In the outermost square container, the left and right rectangular divs occupies half of each, and the setting exceeds hidden.

There is a square div in the left and right rectangles, with rounded corners of the border, half of the border is green (indicating progress), forming a semicircular ring.

The progress display is realized by rotating the left and right rings through the timer + css3.

effect

Source code

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>圆形进度条</title>
       <style>
           .circleProgress_wrapper {
               width: 200px;
               height: 200px;
               margin: 50px auto;
               position: relative;
           }

           p{
               width: 200px;
               height: 200px;
               line-height: 200px;
               text-align: center;
               font-size:24px;
               color: green;
           }

           .wrapper {
               width: 100px;
               height: 200px;
               position: absolute;
               top: 0;
               overflow: hidden;
           }

           .right {
               right: 0;
           }

           .left {
               left: 0;
           }

           .circleProgress {
               width: 160px;
               height: 160px;
               border: 20px solid #ccc;
               border-radius: 50%;
               position: absolute;
               top: 0;
           }

           .rightcircle {
               border-bottom: 20px solid green;
               border-left: 20px solid green;
               right: 0;
               transform: rotate(45deg);
           }

           .leftcircle {
               border-top: 20px solid green;
               border-right: 20px solid green;
               left: 0;
               transform: rotate(45deg);
           }

       </style>
   </head>
   <body>
       <div class="circleProgress_wrapper">
           <p><span class="process">0</span>%</p>
           <div class="wrapper right">
               <div class="circleProgress rightcircle"></div>
           </div>
           <div class="wrapper left">
               <div class="circleProgress leftcircle"></div>
           </div>
       </div>