API tools faq
paste
metalx1000

HTML CSS Circle Chart Animated

metalx1000
Aug 27th, 2020
948
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.51 KB | None | 0 0
raw download clone embed print report
  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.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!