CodePen Embed - Circular Progress Meter

Live

This Pen is owned by Paul Hebert on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"PoBEJVp\",\"auto_save\":true},\"hashid\":\"PoBEJVp\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":65853821,\"user_id\":592829,\"html\":\"<figure></figure>\\n\\n<button>Refresh</button>\",\"css\":\"* {\\n  font-family: sans-serif;\\n}\\n\\nhtml, body {\\n  display: grid;\\n  height: 100%;\\n  place-items: center;\\n  gap: 1em;\\n}\\n\\nbutton {\\n  padding: 1em 2em;\\n}\\n\\n.u-visually-hidden {\\n  border: 0;\\n  clip: rect(0 0 0 0);\\n  clip-path: polygon(0 0, 0 0, 0 0);\\n  height: 1px;\\n  margin: -1px;\\n  overflow: hidden;\\n  padding: 0;\\n  position: absolute;\\n  white-space: nowrap;\\n  width: 1px;\\n}\\n\\n///\\n/// Our component container\\n///\\n/// 1. Position our children in a single area\\n///\\n.circle-meter {\\n  --meter-stroke-width: 3px;\\n  color: #f2f5f7;\\n  display: inline-grid;\\n  grid-template-areas: 'content'; // 1\\n  place-items: center; // 1\\n  padding: var(--meter-stroke-width);\\n  background-color: #0e1c43;\\n  border-radius: 50%;\\n  aspect-ratio: 1;\\n  // This is a magic number, but ensures the meter is large enough to display\\n  // a percentage with a single decimal point.\\n  width: 11rem;\\n}\\n\\n.circle-meter > * {\\n  grid-area: content; // 1\\n}\\n\\n///\\n/// Our actual percent is big and bold.\\n///\\n/// 1. We undo the tracking change. Since we're just showing a number, the\\n///    uppercase styling doesn't have any effect.\\n///\\n.circle-meter__percent {\\n  font-weight: bold;\\n  font-size: 2rem;\\n  letter-spacing: initial; // 1\\n  line-height: 1.1;\\n}\\n\\n// Make sure our \\\"gauge\\\" graphic fills the container\\n.circle-meter__gauge {\\n  width: 100%;\\n  height: 100%;\\n}\\n\\n///\\n/// The animated circle stroke\\n///\\n/// 1. We do some math to determine our circle's circumference. This gives us\\n///    the length of the stroke on our circle\\n/// 2. With more math we can determine how much of our circle's stroke should\\n///    be left undrawn (e.g. if our value is 75%, 25% of the stroke should be\\n///    undrawn. We need this in pixels.)\\n/// 3. Use SVG stroke drawing to only draw the relevant part of our stroke\\n///    @see https://css-tricks.com/svg-line-animation-works/\\n/// 4. By default, a circle's stroke starts on its right edge. We want it to\\n///    start from the top. We rotate the circle to achieve this\\n/// 5. Animate the stroke animation\\n///\\n.circle-meter__circle {\\n  --radius: 47px; // 1\\n  --pi: 3.14; // 1 - Close enough for our use case!\\n  --circumference: calc(var(--radius) * 2 * var(--pi)); // 1\\n  --stroke-length: var(--circumference); // 1\\n  --stroke-offset: calc(\\n    var(--circumference) - (var(--circumference) * var(--percent) / 100)\\n  ); // 2\\n\\n  fill: none;\\n  r: var(--radius); // 1\\n  rotate: -90deg; // 4\\n  stroke: #3d84f5;\\n  stroke-dasharray: var(--stroke-length); // 3\\n  stroke-dashoffset: var(--stroke-offset); // 3\\n  stroke-width: var(--meter-stroke-width);\\n  transform-origin: center; // 4\\n\\n  @media (prefers-reduced-motion: no-preference) {\\n    animation: stroke 750ms both; // 5\\n  }\\n}\\n\\n@keyframes stroke {\\n  from {\\n    stroke-dashoffset: var(--stroke-length);\\n  }\\n  to {\\n    stroke-dashoffset: var(--stroke-offset);\\n  }\\n}\",\"js\":\"const duration = 750;\\n\\nlet animationFrameId = 0;\\n\\nfunction draw() {\\n  cancelAnimationFrame(animationFrameId);\\n  \\n  const endValue = (15 + Math.random() * 75).toFixed(1);\\n  document.querySelector('figure').innerHTML = `\\n    <div class=\\\"circle-meter\\\">\\n      <p class=\\\"circle-meter__text\\\">\\n        <span class=\\\"circle-meter__percent\\\" id=\\\"meter-label\\\">\\n          \\n          <span class=\\\"u-visually-hidden\\\">${endValue}%</span>\\n          <span aria-hidden=\\\"true\\\"><span class=\\\"animated-count\\\">0</span>%</span>\\n        </span>\\n      </p>\\n      \\n      <svg\\n           width=\\\"100\\\"\\n           height=\\\"100\\\"\\n           viewBox=\\\"0 0 100 100\\\"\\n           class=\\\"circle-meter__gauge\\\"\\n           role=\\\"meter\\\"\\n           aria-labelledby=\\\"meter-label\\\"\\n           aria-valuemin=\\\"0\\\"\\n           aria-valuemax=\\\"100\\\"\\n           aria-valuenow=\\\"${endValue}\\\"\\n      >\\n        <circle\\n                cx=\\\"50\\\"\\n                cy=\\\"50\\\"\\n                class=\\\"circle-meter__circle\\\"\\n                style=\\\"--percent: ${endValue}\\\"\\n        />\\n      </svg>\\n    </div>\\n  `;\\n  \\n  if(window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\\n    document.querySelector('.animated-count').textContent = endValue;\\n    return;\\n  }\\n  \\n  // Our start time (to determine where we are in the animation)\\n  const startTime = performance.now();\\n  // An array of the values that we'll be iterating through and displaying\\n  // e.g. [1, 2, 3, ... 73, 74, 74.1, 74.2, 74.3]\\n  const animationStates = determineAnimationStates(endValue);\\n  \\n  function animate() {\\n    // Compare our current time with our start time\\n    let elapsedTime = performance.now() - startTime;\\n\\n    // If we've exceeded our duration, pretend we're right at the end of the\\n    // animation.\\n    if (elapsedTime > duration) {\\n      elapsedTime = duration;\\n    }\\n\\n    // See how far we are compared to the total duration\\n    const percentComplete = elapsedTime / duration;\\n    // Use that value to select a frame to display\\n   \\n    document.querySelector('.animated-count').textContent = animationStates[\\n        Math.round(percentComplete * (animationStates.length - 1))\\n      ]\\n\\n    // If we haven't hit the end of our animation, queue up another frame\\n    if (elapsedTime < duration) {\\n      animationFrameId = requestAnimationFrame(animate);\\n    }\\n  }\\n  \\n  animationFrameId = requestAnimationFrame(animate);\\n}\\n\\ndraw();\\n\\ndocument.querySelector('button').addEventListener('click', draw)\\n\\n\\n/**\\n * Determines all of the animation frames necessary to animate from 0 to another\\n * number.\\n *\\n * This function allows for up to one level of decimal point precision.\\n * However, decimals are only displayed for the final integer in the animation.\\n *\\n * For example, if we're animating to 74.3, our returned array would look like this:\\n * [1, 2, 3, ... 73, 74, 74.1, 74.2, 74.3]\\n *\\n * This is because if we displayed every decimal along the way we'd end up with\\n * an order of magnitude more animation states. If we tried to animate that in\\n * a short time frame it would be more animation frames than a human could observe.\\n * (e.g. trying to display 743 frames in 750 milliseconds)\\n */\\nexport function determineAnimationStates(endValue) {\\n  const animationStates = [];\\n\\n  // Get our number rounded down\\n  const roundedValue = Math.floor(endValue);\\n  // Get every integer between 1 and our rounded down number\\n  // [1, 2, 3, ... 73, 74]\\n  for (let i = 1; i <= roundedValue; i++) {\\n    animationStates.push(i);\\n  }\\n\\n  // Determine whether there's anything in the first decimal place for us to\\n  // worry about\\n  const remainder = parseFloat((endValue - roundedValue).toFixed(2));\\n\\n  // Iterate over our first decimal place, adding the final decimal states\\n  // [..., 74.1, 74.2, 74.3]]\\n  if (remainder) {\\n    // Originally my loop looked like this:\\n    // `for (let i = 0.1; i <= 0.3; i += 0.1) {}`\\n    // This was buggy due to floating point precision in JS (0.2 + 0.1 = 0.30000000000000004)\\n    // Using integers instead of decimals makes the code a bit more complex\\n    // but fixes this.\\n    for (let i = 1; i <= remainder * 10; i += 1) {\\n      animationStates.push(roundedValue + i / 10);\\n    }\\n  }\\n\\n  return animationStates;\\n}\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2023-01-20T19:51:01.748Z\",\"updated_at\":\"2023-01-20T22:09:00.280Z\",\"title\":\"Circular Progress Meter\",\"description\":\"\",\"slug_hash\":\"PoBEJVp\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"0185d0bc-0774-7b8b-9f63-8e19067857e9\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}