CSS implementation of circular progress bar and conic gradient learning

1, Conic gradient

Conic gradient: conical gradient. Its two brothers, line gradient and radial gradient, are the earliest known gradient attributes.

1. Features: the starting point of taper gradient is the center of the figure. The gradient direction rotates clockwise around the center to achieve the gradient effect.

2. Compatibility:

According to can i use Currently only supported on chrome 69 and above.

You can use the polyfill gasket library to solve compatibility problems. According to the css syntax, the gasket library will generate the corresponding taper gradient pattern and convert it into base64 code.

// To be added js library
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="//leaverou.github.io/conic-gradient/conic-gradient.js"></script>

It can't solve the compatibility problem

3. Cases

<section class="color1"></section>
<section class="color2"></section>
    /* The connection between the beginning and the end is not natural */
    .color1 {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: conic-gradient(red, orange, yellow, green, teal, blue, purple)
    }
     /* The connection between the beginning and the end is not natural. Solution: add the beginning color to the end */
    .color2 {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: conic-gradient(red, orange, yellow, green, teal, blue, purple, red);
    }

    <section class="pie"></section>

    .pie {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      /* Percentage one */
       background: conic-gradient(pink 0, pink 30%, yellow 30%, yellow 70%, lime 70%, lime 100%); 
      /* Write method 2 does not support chrome 69 */
      /* background: conic-gradient(pink 0 30%, yellow 0 70%, lime 0 100%); */
    }

2, Round progress bar

 

Specific implementation steps:

1. First draw a big circle with the background color of "ffffff";

<div class="third"> </div>
.third{
    background-color: #FFFFFF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    position: relative;
}

2. Draw two more semicircles: a light green semicircle and a white semicircle

<div class="third">
    <div class="second"></div>
    <div class="first"></div>
</div>
.second{
    background-color: #6ED4BF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    clip:rect(0,91px,auto,0);
    position: absolute;
}
.first{
    background-color: #FFFFFF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    clip:rect(0,auto,auto,91px);
}

3. Rotate the second circle by percentage

.second{
    background-color: #6ED4BF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    clip:rect(0,91px,auto,0);
    position: absolute;
    transform: rotate(30deg);  //Rotate 30 degrees
}

4. Finally, draw a small circle and write the percentage

<div class="third">
          <div class="second"></div>
          <div class="first"></div>
          <div class="mask">
               <span>68%</span>
          </div>
</div>

.third *{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.mask>span{
    display: block;
    font-size: 44px;
    color: white;
    line-height: 150px;
}

Tags: github

Posted on Sat, 16 May 2020 07:35:23 -0700 by hypertech