metalx1000

HTML CSS Circle Chart Animated

Aug 27th, 2020
437
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <title>Circle Chart</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <!--based on code from https://codepen.io/maoberlehner/pen/jwVWQz-->
  8.     <style>
  9.       @media only screen and (min-width: 600px) {
  10.         body {
  11.           margin-right:200px;
  12.           margin-left:200px;
  13.           margin-top: 0;
  14.         }
  15.       }
  16.       .flex{
  17.         display: grid;
  18.         grid-row-gap: 1rem;
  19.         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  20.       }
  21.  
  22.       .button {
  23.         box-shadow:inset 0px 1px 0px 0px #54a3f7;
  24.         background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
  25.         background-color:#007dc1;
  26.         border-radius:3px;
  27.         border:1px solid #124d77;
  28.         display:inline-block;
  29.         cursor:pointer;
  30.         color:#ffffff;
  31.         font-family:Arial;
  32.         font-size:13px;
  33.         padding:6px 24px;
  34.         text-decoration:none;
  35.         text-shadow:0px 1px 0px #154682;
  36.       }
  37.       .button:hover {
  38.         background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
  39.         background-color:#0061a7;
  40.       }
  41.       .button:active {
  42.         position:relative;
  43.         top:1px;
  44.       }
  45.  
  46.       .circle-chart__circle {
  47.         animation: circle-chart-fill 2s reverse; /* 1 */
  48.         transform: rotate(-90deg); /* 2, 3 */
  49.         transform-origin: center; /* 4 */
  50.       }
  51.  
  52.       .circle-chart__info {
  53.         animation: circle-chart-appear 2s forwards;
  54.         opacity: 0;
  55.         transform: translateY(0.3em);
  56.       }
  57.  
  58.       @keyframes circle-chart-fill {
  59.         to { stroke-dasharray: 0 100; }
  60.       }
  61.  
  62.       @keyframes circle-chart-appear {
  63.         to {
  64.           opacity: 1;
  65.           transform: translateY(0);
  66.         }
  67.       }
  68.  
  69.  
  70.     </style>
  71.   </head>
  72.   <body>
  73.     <button class="button" onclick="go()">Lets Go</button>
  74.     <div class="grid">
  75.       <section>
  76.       <h2>Positive chart value</h2>
  77.       <svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  78.       <circle class="circle-chart__background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
  79.       <circle id="mychart" class="circle-chart__circle" stroke="#00acc1" stroke-width="2" stroke-dasharray="30,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
  80.       <g class="circle-chart__info">
  81.       <text id="outputval" class="circle-chart__percent" x="16.91549431" y="15.5" alignment-baseline="central" text-anchor="middle" font-size="8">30%</text>
  82.       <text class="circle-chart__subline" x="16.91549431" y="20.5" id="outputtext" alignment-baseline="central" text-anchor="middle" font-size="2">Yay 30% progress!</text>
  83.       </g>
  84.       </svg>
  85.       </section>
  86.  
  87.     </div>
  88.   </body>
  89.   <script>
  90.     var chart = document.getElementById("mychart");
  91.     var outputval = document.getElementById("outputval");
  92.     var outputtext = document.getElementById("outputtext");
  93.     function go(){
  94.       //chart.classList.remove("circle-chart__circle");
  95.       var d = 1;
  96.       for(var i=30;i <= 50;i++){
  97.         task(i,d);
  98.         d++;
  99.       }
  100.     }
  101.  
  102.     function task(i,d) {
  103.       setTimeout(function() {
  104.         chart.setAttribute("stroke-dasharray",`${i},100`);
  105.         outputval.innerHTML = `${i}%`;
  106.         outputtext.innerHTML = `Yay, ${i}% doing good`;
  107.       }, 20 * d);
  108.     }
  109.   </script>
  110. </html>
  111.  
  112.  
RAW Paste Data