Round shield progress indicator

https://i.sstatic.net/D3GCr.png

I have been trying to create a progress bar by overlaying one SVG on top of another (one translucent and the other colored). Despite many attempts, I have not been successful in solving this problem. Any help or solutions would be greatly appreciated.

Translucent SVG:

<svg class="rpm-svg center" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M75.8122 156.886C75.7221 158.54 74.3071 159.814 72.6572 159.662C69.9318 159.411 67.2211 159.02 64.5358 158.491C62.9102 158.171 61.9128 156.549 62.2938 154.937L64.0713 147.414C64.4523 145.801 66.0673 144.81 67.6954 145.118C69.5857 145.475 71.4907 145.75 73.4049 145.941C75.0535 146.106 76.3227 147.513 76.2326 149.168L75.8122 156.886Z"
            fill="white"
            fill-opacity="0.15"
        />
        <path
            d="M59.8939 154.329C59.4612 155.928 57.812 156.879 56.23 156.387C53.6166 155.574 51.0467 154...
        ...
        },{
            d: "M130.398 21.7847C131.483 20.5321 133.381 20.3916 134.593 21.5222C136.593 23.3899 138.497 25.3591 140.295 27.4219C141.384 28.6706 141.18 30.5636 139.891 31.6049L133.879 36.4632C132.59 37.5045 130.706 37.299 129.607 36.0587C128.332 34.6187 126.994 33.2348 125.598 31.9111C124.396 30.7711 124.254 28.8814 125.339 27.6288L130.398 21.7847",
            fill: "#EB2F2F"
        }]
    </script>

Colored SVG:

<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M75.8122 156.886C75.7221 158.54 74.3071 159.814 72.6572 159.662C69.9318 159.411 67.2211 159.02 64.5358 158.491C62.9102 158.171 61.9128 156.549 62.2938 154.937L64.0713 147.414C64.4523 145.801 66.0673 144.81 67.6954 145.118C69.5857 145.475 71.4907 145.75 73.4049 145.941C75.0535 146.106 76.3227 147.513 76.2326 149.168L75.8122 156.886Z" fill="white"/>
<path d="M59.8939 154.329C59.4612 155.928 57.812 156.879 56.23 156.387C53.6166 155.574 51.0467 154...Followed by more path elements...
htmlcsssvg

Answer №1

This demonstration showcases the creation of a mask using various "dots", which is then applied to a group <g> containing circles in different color schemes. Each circle within the group is assigned pathLength and dasharray attributes for length control. The circles alternate between gray and red (with 25% opacity) as well as white and red.

Additionally, there is another mask featuring a circle whose length can be controlled dynamically through JavaScript. This mask is utilized on both the white and red circles of the design.

The decision was made to construct this visual representation as a bar due to its ease of editing and entertaining design process.

document.forms.form01.range.addEventListener('change', e => {
  const c1 = document.getElementById('c1');
  let length = parseInt(e.target.value) * 2.2;
  c1.setAttribute('stroke-dasharray', `${length} 360`);
});
body {
  background: gray;
}
<form name="form01">
  <input name="range" type="range" value="50" min="0" max="100" />
</form>
<svg width="300" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="dots">
      <g transform="translate(80 80)">
        <g id="dot">
          <circle cx="0" cy="0" r="70" stroke="white" stroke-width="10"
          fill="none" pathLength="360" stroke-dasharray="6 360" transform="rotate(90)" />
          <rect transform="rotate(0) translate(-2 65)" width="4" height="10"
          rx="2" fill="white" />
          <rect transform="rotate(6) translate(-2 65)" width="4" height="10"
          rx="2" fill="white" />
        </g>
        <use href="#dot" transform="rotate(11)" />
        <use href="#dot" transform="rotate(22)" />
        <use href="#dot" transform="rotate(33)" />
        <use href="#dot" transform="rotate(44)" />
        <use href="#dot" transform="rotate(55)" />
        <use href="#dot" transform="rotate(66)" />
        <use href="#dot" transform="rotate(77)" />
        <use href="#dot" transform="rotate(88)" />
        <use href="#dot" transform="rotate(99)" />
        <use href="#dot" transform="rotate(110)" />
        <use href="#dot" transform="rotate(121)" />
        <use href="#dot" transform="rotate(132)" />
        <use href="#dot" transform="rotate(143)" />
        <use href="#dot" transform="rotate(154)" />
        <use href="#dot" transform="rotate(165)" />
        <use href="#dot" transform="rotate(176)" />
        <use href="#dot" transform="rotate(187)" />
        <use href="#dot" transform="rotate(198)" />
        <use href="#dot" transform="rotate(209)" />
      </g>
    </mask>
    <mask id="bar">
      <circle id="c1" cx="80" cy="80" r="70" stroke="white" stroke-width="22" fill="none"
      pathLength="360" stroke-dasharray="110 360" />
    </mask>
  </defs>
  <g mask="url(#dots)" >
    <g transform="rotate(88 80 80)">
      <circle cx="80" cy="80" r="70" stroke="#444" stroke-width="20"
      fill="none" pathLength="360" stroke-dasharray="132 360"  opacity=".25" />
      <circle cx="80" cy="80" r="70" stroke="red" stroke-width="20"
      fill="none" pathLength="360" stroke-dasharray="220 360"
      transform="rotate(132 80 80)" opacity=".25" />
      <g mask="url(#bar)">
        <circle cx="80" cy="80" r="70" stroke="white" stroke-width="20" fill="none"
      pathLength="360" stroke-dasharray="132 360" />
        <circle cx="80" cy="80" r="70" stroke="red" stroke-width="20" fill="none"
      pathLength="360" stroke-dasharray="110 360" transform="rotate(132 80 80)" />
      </g>
    </g>
  </g>
</svg>

Answer №2

Simply adjust the opacity of the required number of blobs (paths in the SVG) to 1.

With a total of 20 blobs, each one represents 5%.

To display 40%, set the fill-opacity of the first 8 blobs as 1. This can also be achieved using CSS.

Below is an example using JS to showcase 40% by setting the fill-opacities. Alternatively, these values could be manually set in the SVG:

<body style="background: gray;">
  <svg class="rpm-svg center" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M75.8122 156.886C75.7221 158.54 74.3071 159.814 72.6572 159.662C69.9318 159.411 67.2211 159.02 64.5358 158.491C62.9102 158.171 61.9128 156.549 62.2938 154.937L64.0713 147.414C64.4523 145.801 66.0673 144.81 67.6954 145.118C69.5857 145.475 71.4907 145.75 73.4049 145.941C75.0535 146.106 76.3227 147.513 76.2326 149.168L75.8122 156.886Z"
            fill=""white
            fill-opacity="0.15"
        />
        <path
            d="M59.8939 154.329C59.4612 155.928 57.812 156.879 56.23 156.387C53.6166 155.574 51.0467 154.627 48.5304 153.55C47.0072 152.899 46.3694 151.105 47.0778 149.607L50.3827 142.619C51.0911 141.122 52.8772 140.488 54.4055 141.128C56.18 141.871 57.986...

</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to shift to the side while in full flexibility mode

I ran into an issue with my code, shown in the image below. I am trying to position 1 on the left and 2 on the right, but something seems off. Can you spot the problem? <div className="mt-5 mx-5 py-3 shadow bg-white"> &l ...

htmlcssreactjsbootstrap-5

Instead of having the animation loop in three.js, let's set it to

After successfully exporting blender JSON animation into THREE.js, I have encountered a situation where everything is functioning correctly. However, my current goal is to only play the animation once and then stop instead of having it loop continuously. ...

htmlanimationthree.jsblender

javascript jquery chosen not functioning properly

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <h1 id="hey">List King</h1> <div class="Select-DB"> <select id="DB" class="chosen ...

javascriptjqueryhtmljquery-chosen

Integrate database values into your CSS by dynamically changing styles using PHP

I'm attempting to dynamically change my CSS. The CSS value I need is stored in a database table called goals in the order database, which contains id and goal_1. Here's the code snippet I'm working with: <?php $conn = mysqli_connect ...

phphtmlcssmysqldatabase

Textfield removal from the input range is requested

I recently encountered an issue with my input range HTML code. Here is the initial code snippet: <input class="sliderNoTextbox" id="ti_monatlich" type="range" name="ti_monatlich" data-theme="d"> After some adjustments based on this helpful answer, ...

javascriptandroidjqueryhtmljquery-mobile

React Native: Image not aligning vertically center in text within nested elements

Issue Description I am facing a challenge in nesting multiple images within a paragraph. If it were just a single line of text, I could have easily used a <View> with flexDirection: 'row'. Since that approach doesn't fit the requireme ...

javascriptcssreactjsimagereact-native

CSS files imported from the node modules are mysteriously disappearing

Encountered a unique issue while attempting to import a CSS file from a node module. In the App.tsx file, the following imports were made: import './App.css'; // successful import '@foo/my-dependency/dist/foo.css' ...

csswebpackwebpack-dev-servercss-loader

Controlling the Class Attribute in a <td> Element with JavaScript Upon Click Event

I am currently grappling with a situation involving a table with 5 <td> elements. By default, these <td> are red in color. If the user clicks on one of them for the first time, it changes to blue. Subsequent clicks turn it orange and then back ...

javascriptjqueryhtmlcss

When a specific JavaScript function is triggered, the value of an HTML control will reset to its original default value

I have a form with a specific requirement. I need to allow users to input data in a text field and press enter, which should dynamically create new controls like another text field, a dropdown menu, and another text field using jQuery. While the functional ...

javascriptjqueryhtml

Is horizontal spacing automatically added to <img> elements in Bootstrap? And if it is, how can this default setting be changed or overridden?

I'm currently working on the design for a homepage where I want to showcase the same image repeated 4 times in a row, creating a decorative banner effect. Each image is set to occupy 25% of the screen width, which should theoretically fit perfectly si ...

csstwitter-bootstrap

Bootstrap 4 has an enlarged input field when compared to the select input

I am facing an issue with the size of my select field, which appears larger than my two input fields in Bootstrap 4.3. Can anyone provide guidance on how to make the select field match the size of the input fields? Your assistance would be greatly apprecia ...

htmlcssbootstrap-4

What is the best method for organizing data in rows and columns?

I attempted to use my map function to iterate over the data and display it, but I struggled to format it into rows and columns. The requirement is for 5 fixed columns with dynamically changing rows, making array indexing impractical. Here is the code snip ...

javascripthtmlcssreactjstailwind-css

Error: The number of format specifications in 'msgid' and 'msgstr' does not match. One fatal error was found by msgfmt

I encountered an error with Django-Admin that reads: "Execution of msgfmt failed: /home/djuka/project_app/locale/eng/LC_MESSAGES/django.po:49: number of format specifications in 'msgid' and 'msgstr' does not match. Msgfmt found 1 fatal ...

pythonhtmlcssdjangoweb

Tips for clearing the browser cache when working with AngularJS in HTML code

Does anyone know how to clear the browser cache in HTML when using AngularJS? I've tried adding the following code to my index.html file and also used $templateCache in my app.js without success. <meta http-equiv="Cache-Control" content="no-cache, ...

htmlangularjsbrowser-cache

CSS Show a Cropped and Resized Image - The Saga Continues

Continuing from a previous discussion on CSS Display an Image Resized and Cropped, I am in need of further assistance to enhance the existing solution provided by a fellow user... Question: How can we dynamically resize (scale) the image based on its orig ...

htmlcssimage

Unable to perform 'put' operation on 'idbObjectStore' due to empty result when evaluating the object store's key path

An error has occurred in a chrome-based APP that I am currently supporting. Despite my attempts to investigate further, I have been unable to determine the cause of the error. Can someone please explain to me the potential reasons behind this issue? The e ...

angularjshtmlindexeddb

Dynamic video autoplay with a hover effect using Bootstrap 3

I am looking to create a hovering effect on an autoloop video similar to what is seen on this website - This specific section of the website demonstrates the effect I am trying to achieve. Prior to hovering, the autoloop video has an overlay displayed on ...

htmlcsstwitter-bootstrap

Step-by-step guide on displaying a checkbox list based on the selected option in a drop-down menu

Apologies for the lackluster title. My goal is to create a dynamic checklist based on selections made from a drop-down menu: The drop-down menu offers several options, and when a choice is made, I want a corresponding checklist to appear below it with dep ...

javascripthtmldrop-down-menu

The Limits of JavaScript Tables

Currently facing an issue with a webpage under development. To provide some context, here is the basic layout of the problematic section: The page features a form where users can select from four checkboxes and a dropdown menu. Once at least one checkbox ...

javascriptjqueryhtmlcss

Animating content using CSS keyframes for dynamic changes

I'm trying to change the text of a div using keyframes with the code content:'text';, but unfortunately, the div remains empty and nothing happens. The content inside the #neon-sign div is not updating and stays blank: #neon-sign { p ...

csscss-animations