Chart effect css transform

In this example below you will see how to do a Chart effect css transform with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by elchiconube, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright elchiconube ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Chart effect css transform</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="examples">
        <div class="example example-hole">
            <div class="ui-spinner">
                <span class="side side-left">
                    <span class="fill"></span>
                </span>
                <span class="side side-right">
                    <span class="fill"></span>
                </span>
            </div>
        </div>
        <div class="example example-default">
            <div class="ui-spinner">
                <span class="side side-left">
                    <span class="fill"></span>
                </span>
                <span class="side side-right">
                    <span class="fill"></span>
                </span>
            </div>
        </div>
        <div class="example example-large">
            <div class="ui-spinner">
                <span class="side side-left">
                    <span class="fill"></span>
                </span>
                <span class="side side-right">
                    <span class="fill"></span>
                </span>
            </div>
        </div>
        <div class="example example-mini">
            <div class="ui-spinner">
                <span class="side side-left">
                    <span class="fill"></span>
                </span>
                <span class="side side-right">
                    <span class="fill"></span>
                </span>
            </div>
        </div>
    </div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/elchiconube/chart-effect-css-transform-AxkhC */
@-webkit-keyframes ui-spinner-rotate-right{0%{-webkit-transform:rotate(0deg)}25%{-webkit-transform:rotate(180deg)}50%{-webkit-transform:rotate(180deg)}75%{-webkit-transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg)}}@-webkit-keyframes ui-spinner-rotate-left{0%{-webkit-transform:rotate(0deg)}25%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg)}75%{-webkit-transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes ui-spinner-rotate-right{0%{-moz-transform:rotate(0deg)}25%{-moz-transform:rotate(180deg)}50%{-moz-transform:rotate(180deg)}75%{-moz-transform:rotate(360deg)}100%{-moz-transform:rotate(360deg)}}@-moz-keyframes ui-spinner-rotate-left{0%{-moz-transform:rotate(0deg)}25%{-moz-transform:rotate(0deg)}50%{-moz-transform:rotate(180deg)}75%{-moz-transform:rotate(180deg)}100%{-moz-transform:rotate(360deg)}}@keyframes ui-spinner-rotate-right{0%{transform:rotate(0deg)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}@keyframes ui-spinner-rotate-left{0%{transform:rotate(0deg)}25%{transform:rotate(0deg)}50%{transform:rotate(180deg)}75%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}.ui-spinner{position:relative;border-radius:100%}.ui-spinner .side{width:50%;height:100%;overflow:hidden;position:absolute}.ui-spinner .side .fill{border-radius:999px;position:absolute;width:100%;height:100%;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-timing-function:linear;-ms-animation-timing-function:linear;-o-animation-timing-function:linear;animation-timing-function:linear}.ui-spinner .side-left{left:0}.ui-spinner .side-left .fill{left:100%;border-top-left-radius:0;border-bottom-left-radius:0;-webkit-animation-name:ui-spinner-rotate-left;-moz-animation-name:ui-spinner-rotate-left;-ms-animation-name:ui-spinner-rotate-left;-o-animation-name:ui-spinner-rotate-left;animation-name:ui-spinner-rotate-left;-webkit-transform-origin:0 50%;-moz-transform-origin:0 50%;-ms-transform-origin:0 50%;-o-transform-origin:0 50%;transform-origin:0 50%}.ui-spinner .side-right{left:50%}.ui-spinner .side-right .fill{left:-100%;border-top-right-radius:0;border-bottom-right-radius:0;-webkit-animation-name:ui-spinner-rotate-right;-moz-animation-name:ui-spinner-rotate-right;-ms-animation-name:ui-spinner-rotate-right;-o-animation-name:ui-spinner-rotate-right;animation-name:ui-spinner-rotate-right;-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;-ms-transform-origin:100% 50%;-o-transform-origin:100% 50%;transform-origin:100% 50%}.ui-spinner{width:46px;height:46px;background:#ddd}.ui-spinner .side .fill{background:#3c76ca;-webkit-animation-duration:3s;-moz-animation-duration:3s;-ms-animation-duration:3s;-o-animation-duration:3s;animation-duration:3s;opacity:0.8}.ui-spinner:after{content:"";background:transparent;position:absolute;width:28px;height:28px;border-radius:50%;top:9px;left:9px;display:block}.examples{overflow:hidden}.example{float:left;margin-right:20px}.example-hole .ui-spinner{width:46px;height:46px;background:#ddd}.example-hole .ui-spinner .side .fill{background:#3c76ca;-webkit-animation-duration:3s;-moz-animation-duration:3s;-ms-animation-duration:3s;-o-animation-duration:3s;animation-duration:3s;opacity:0.8}.example-hole .ui-spinner:after{content:"";background:#fff;position:absolute;width:28px;height:28px;border-radius:50%;top:9px;left:9px;display:block}.example-large .ui-spinner{width:60px;height:60px;background:#eee}.example-large .ui-spinner .side .fill{background:purple;-webkit-animation-duration:5s;-moz-animation-duration:5s;-ms-animation-duration:5s;-o-animation-duration:5s;animation-duration:5s;opacity:1}.example-large .ui-spinner:after{content:"";background:transparent;position:absolute;width:36px;height:36px;border-radius:50%;top:12px;left:12px;display:block}.example-mini .ui-spinner{width:30px;height:30px;background:#eee}.example-mini .ui-spinner .side .fill{background:#666;-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;opacity:1}.example-mini .ui-spinner:after{content:"";background:#fff;position:absolute;width:18px;height:18px;border-radius:50%;top:6px;left:6px;display:block}#ui-spinner-dissection .ui-spinner{width:100px;height:100px;background:#ddd}#ui-spinner-dissection .ui-spinner .side .fill{background:#3c76ca;-webkit-animation-duration:3s;-moz-animation-duration:3s;-ms-animation-duration:3s;-o-animation-duration:3s;animation-duration:3s;opacity:0.8}#ui-spinner-dissection .ui-spinner:after{content:"";background:transparent;position:absolute;width:60px;height:60px;border-radius:50%;top:20px;left:20px;display:block}#ui-spinner-dissection .ui-spinner{border-radius:0 !important}#ui-spinner-dissection .ui-spinner .side-left{background:#f99 !important}#ui-spinner-dissection .ui-spinner .side-left .fill{background:red;border-radius:0 !important}#ui-spinner-dissection .ui-spinner .side-right{background:#80ff80 !important}#ui-spinner-dissection .ui-spinner .side-right .fill{background:green;border-radius:0 !important}#ui-spinner-dissection .ui-spinner .side .fill{-webkit-animation-duration:6s;-moz-animation-duration:6s;-ms-animation-duration:6s;-o-animation-duration:6s;animation-duration:6s}

Comments