zoukankan      html  css  js  c++  java
  • xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

    Pure CSS Progress Chart

    CSS Progress Circle

    SCSS

    .example {
      text-align: center;
      padding: 4em;
    }
    
    .pie {
       60px;
      height: 60px;
      border-radius: 50%;
      background: #eee;
      background-image: linear-gradient(to right, transparent 50%, #4CC9D8 0);
      position: relative;
      display: inline-block;
      margin: 10px;
    }
    
    .pie::before {
      content: '';
      display: block;
      margin-left: 50%;
      height: 100%;
      border-radius: 0 100% 100% 0 / 50%;
      background-color: inherit;
      transform-origin: left;
    }
    
    .pie::after {
      content: attr(data-value);
      position: absolute;
       70%;
      height: 70%;
      margin: auto;
      border-radius: 50%;
      background-color: #fff;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      text-align: center;
      font: 900 20px/41px Tahoma;
    }
    
    @for $i from 0 through 50 {
      .pie[data-value="#{$i}"]:before {
        transform: rotate(#{$i/100}turn);
      }
    }
    
    @for $i from 51 through 100 {
      .pie[data-value="#{$i}"]:before {
        background-color: #4CC9D8;
        transform: rotate(#{$i/100 - .5}turn);
      }
    }
    
    
    
    
    
    

    refs

    https://codepen.io/xgqfrms/pen/bGwGVOR?editors=1010



    ©xgqfrms 2012-2020

    www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


  • 相关阅读:
    字典的key都可以是什么
    groupby 的妙用(注意size和count)

    希尔排序
    TCP和UDP
    闭包(python)
    快速排序
    mysql t4模板_Model
    vue前端性能优化
    系统稳定性问题总结
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/14043691.html
Copyright © 2011-2022 走看看