zoukankan      html  css  js  c++  java
  • [CSS3]环形进度条

    来源:https://codepen.io/eZ0/pen/eZXNzd

    点击上面链接有源码有示例。

    .ko-progress-circle {
        width: 120px;
        height: 120px;
        background-color: #d9d9d9;
        border-radius: 50%
    }
    
    .ko-progress-circle .ko-progress-circle__slice,
    .ko-progress-circle .ko-progress-circle__fill {
        width: 120px;
        height: 120px;
        position: absolute;
        -webkit-backface-visibility: hidden;
        transition: transform 1s;
        border-radius: 50%
    }
    
    .ko-progress-circle .ko-progress-circle__slice {
        clip: rect(0px,120px,120px,60px)
    }
    
    .ko-progress-circle .ko-progress-circle__slice .ko-progress-circle__fill {
        clip: rect(0px,60px,120px,0px);
        background-color: #1291d4
    }
    
    .ko-progress-circle .ko-progress-circle__overlay {
        width: 105px;
        height: 105px;
        position: absolute;
        margin: 7.5px;
        background-color: #fbfbfb;
        border-radius: 50%
    }
    <div class="ko-progress-circle" data-progress="30">
        <div class="ko-circle">
            <div class="full ko-progress-circle__slice">
                <div class="ko-progress-circle__fill"></div>
            </div>
            <div class="ko-progress-circle__slice">
                <div class="ko-progress-circle__fill"></div>
                <div class="ko-progress-circle__fill ko-progress-circle__bar"></div>
            </div>
        </div>
        <div class="ko-progress-circle__overlay"></div>
    </div>
    $('.ko-progress-circle').each(function(index, element) {
        var progress = $(this).data('progress');
        var degree = parseInt(progress) * 1.8;
    
        $(this).find('.ko-progress-circle__slice.full,.ko-progress-circle__fill').css('transform', 'rotate(' + degree + 'deg)');
        $(this).find('.ko-progress-circle__fill.ko-progress-circle__bar').css('transform', 'rotate(' + (degree * 2) + 'deg)');
    });
  • 相关阅读:
    计算机中最重要的两个硬件是什么它们如何相互作用。
    音乐光盘
    下列各项包含多少位?
    下列包含多少字节?
    自测题‘
    自测题.
    python 并发编程多线程之进程池/线程池
    python 并发编程之多线程
    基于解决高并发生的产者消费者模型
    守护进程、互斥锁、进程间通信(IPC机制)
  • 原文地址:https://www.cnblogs.com/hcbin/p/9821013.html
Copyright © 2011-2022 走看看