Modify CSS progress circle to update the percentage of completion

I stumbled upon this code snippet, and although it works flawlessly, I encountered a limitation - I can only set the percentage to 25, 50, or 75. If I try to increase it to 85%, the circle fills up completely. Does anyone have any suggestions on how to resolve this issue? Perhaps some JavaScript or JQuery code needs to be added? Thank you in advance!

Below is the HTML code:

/* Importing Google Font 'Lato' */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

/* Styles for the container */
body {
  background-color: #fff;
  color: #333;
  font-family: 'Lato';
}

.container {
  padding: 50px 0;
  text-align: center;
}

.chart {
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 20px;
  text-align: center;
}

.chart figcaption {
  padding: 50px 25px;
  width: 100px;
  height: 50px;
  border: 20px solid #f0f0f0;
  border-radius: 100px;
  line-height: 50px;
}

.chart img {
  position: absolute;
  max-width: 100px;
  max-height: 100px;
  background: white;
}
/* End of container styles */

/* Circle colors and graphic positions */
.html {
  top: 50px;
  left: 45px;
}

.html + svg .outer {
  stroke: #e34f26;
}

.css {
  top: 55px;
  left: 48px;
}

.css + svg .outer {
  stroke: #0d84ce;
}

.javascript {
  max-width: 90px;
  max-height: 90px;
  top: 45px;
  left: 45px;
}

.javascript + svg .outer {
  stroke: #f0e040;
}

.node {
  width: 200px;
  height: 200px;
  top: 45px;
  left: 45px;
}

.node + svg .outer {
  stroke: #83cd29;
}

.chart svg {
  position: absolute;
  top: 0;
  left: 0;
}

.outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 20;
  stroke-dasharray: 534;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;

  /* Firefox bug fix - won't rotate at 90deg angles */
  -moz-transform: rotate(-89deg) translateX(-190px);
}

.chart:hover .outer {
  stroke-dashoffset: 534 !important;
  -webkit-animation-play-state: paused;
}
/* End of circle colors and graphic positions */


/* Setting initial animation values */
.chart[data-percent='100'] .outer {
  stroke-dashoffset: 0;
  -webkit-animation: show100 2s;
  animation: show100 2s;
}

.chart[data-percent='75'] .outer {
  stroke-dashoffset: 133;
  -webkit-animation: show75 2s;
  animation: show75 2s;
}

.chart[data-percent='50'] .outer {
  stroke-dashoffset: 267;
  -webkit-animation: show50 2s;
  animation: show50 2s;
}

.chart[data-percent='25'] .outer {
  stroke-dashoffset: 401;
  -webkit-animation: show25 2s;
  animation: show25 2s;
}
/* End of setting initial animation values */

/* Keyframes for the initial animation */
@-webkit-keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 134;
  }
}

@keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 124;
  }
}

@-webkit-keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 267;
  }
}

@keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 267;
  }
}

@-webkit-keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 401;
  }
}

@keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 401;
  }
}
/* End of keyframes for the initial animation */
<section class="container">

  <h3>Web Developer Skills Chart</h3>

  <!-- HTML Chart -->
  <div class="chart" data-percent="85">
    <figcaption>HTML</figcaption>
    <img class="html" src="https://dl.dropboxusercontent.com/s/68gv23q4y5qyq52/html5.svg">
    <svg width="200" height="200">
      <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
    </svg>
  </div>

  <!-- CSS Chart -->
  <figure class="chart" data-percent="75">
    <figcaption>CSS</figcaption>
    <img class="css" src="https://dl.dropboxusercontent.com/s/gftbpqje9h2jvlv/css3.svg">
    <svg width="200" height="200">
      <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
    </svg>
  </figure>


  <!-- Javascript Chart -->
  <figure class="chart" data-percent="50">
    <figcaption>Javascript</figcaption>
    <img class="javascript" src="https://dl.dropboxusercontent.com/s/jsp3rsberc4q650/javascript.svg">
    <svg width="200" height="200">
      <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
    </svg>
  </figure>

  <!-- Node.js Chart -->
  <figure class="chart" data-percent="25">
    <figcaption>Node</figcaption>
    <img class="node" src="https://dl.dropboxusercontent.com/s/v28zws1p38tjph2/node.png">
    <svg width="200" height="200">
      <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
    </svg>
  </figure>
  <p>Pure CSS and SVG animation</p>
</section>

htmlcss

Answer №1

The content is not formatted as a script, so it does not automatically adjust to any given percentage. In the provided example, only 4 specific percentages are defined by the author. To demonstrate an additional 85%, scripting would be necessary for dynamic adjustments.

Check out this code snippet:

/* Import the Google Font 'Lato' */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

/* Styles for the container */
body {
  background-color: #fff;
  color: #333;
  font-family: 'Lato';
}

.container {
  padding: 50px 0;
  text-align: center;
}

.chart {
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 20px;
  text-align: center;
}

.chart figcaption {
  padding: 50px 25px;
  width: 100px;
  height: 50px;
  border: 20px solid #f0f0f0;
  border-radius: 100px;
  line-height: 50px;
}

.chart img {
  position: absolute;
  max-width: 100px;
  max-height: 100px;
  background: white;
}
/* END Container styles */

/* Circle colors and graphic positions */
.html {
  top: 50px;
  left: 45px;
}

.html + svg .outer {
  stroke: #e34f26;
}

.css {
  top: 55px;
  left: 48px;
}

.css + svg .outer {
  stroke: #0d84ce;
}

.javascript {
  max-width: 90px;
  max-height: 90px;
  top: 45px;
  left: 45px;
}

.javascript + svg .outer {
  stroke: #f0e040;
}

.node {
  width: 200px;
  height: 200px;
  top: 45px;
  left: 45px;
}

.node + svg .outer {
  stroke: #83cd29;
}

.chart svg {
  position: absolute;
  top: 0;
  left: 0;
}

.outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 20;
  stroke-dasharray: 534;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;

  /* Firefox bug fix for rotating at 90-degree angles */
  -moz-transform: rotate(-89deg) translateX(-190px);
}

.chart:hover .outer {
  stroke-dashoffset: 534 !important;
  -webkit-animation-play-state: paused;
}
/* END Circle colors and graphic positions */


<!-- Set initial animation values -->
.chart[data-percent='100'] .outer {
  stroke-dashoffset: 0;
  -webkit-animation: show100 2s;
  animation: show100 2s;
}

.chart[data-percent='85'] .outer {
  stroke-dashoffset: 83;
  -webkit-animation: show85 2s;
  animation: show85 2s;
}

.chart[data-percent='75'] .outer {
  stroke-dashoffset: 133;
  -webkit-animation: show75 2s;
  animation: show75 2s;
}

.chart[data-percent='50'] .outer {
  stroke-dashoffset: 267;
  -webkit-animation: show50 2s;
  animation: show50 2s;
}

.chart[data-percent='25'] .outer {
  stroke-dashoffset: 401;
  -webkit-animation: show25 2s;
  animation: show25 2s;
}
<!-- END set initial animation values -->

<!-- Keyframes for the initial animation -->
@-webkit-keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes show85 {
  from {
   stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 83;
  }
}

@keyframes show85 {
  from {
   stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 83;
  }
}


@-webkit-keyframes show75 {
  from {
   stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 134;
  }
}

@keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 124;
  }
}

@-webkit-keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 267;
  }
}

@keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 267;
  }
}

@-webkit-keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 401;
  }
}

@keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }

  to {
    stroke-dashoffset: 401;
  }
}
<!-- END Keyframes for the initial animation --> 
<section class="container">

  <h3>I'm a web developer showcasing my skills</h3>

  <!-- HTML Chart -->
  <div class="chart" data-percent="85">
    <figcaption>HTML</figcaption>
    <img class="html" src="https://dl.dropboxusercontent.com/s/68gv23q4y5qyq52/html5.svg">
    <svg width="200" height="200">
      <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
    </svg>
  </div>

  <!-- CSS Chart -->
  <figure class="chart" data-percent="75">
    <figcaption>CSS</figcaption>
    <img class="css" src="https://dl.dropboxusercontent.com/s/gftbpqje9h2jvlv/css3.svg">
    <svg width="200" height="200">
      <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
    </svg>
  </figure>


  <!-- Javascript Chart -->
  <figure class="chart" data-percent="50">
    <figcaption>Javascript</figcaption>
    <img class="javascript" src="https://dl.dropboxusercontent.com/s/jsp3rsberc4q650/javascript.svg">
    <svg width="200" height="200">
      <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
    </svg>
  </figure>

  <!-- Node.js Chart -->
  <figure class="chart" data-percent="25">
    <figcaption>Node</figcaption>
    <img class="node" src="https://dl.dropboxusercontent.com/s/v28zws1p38tjph2/node.png">
    <svg width="200" height="200">
      <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
    </svg>
  </figure>
  <p>The animations are achieved using purely CSS and SVG</p>
</section>

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

How can the horizontal scroll bar width be adjusted? Is it possible to create a custom

Within my div, I have implemented multiple cards that scroll horizontally using the CSS property: overflow-x: scroll; This setup results in a horizontal scrollbar appearing under the div, which serves its purpose. However, I would prefer a customized scr ...

javascriptcssreactjs

Variety of part ingredients

In my component, I have a button and include another component which also contains a button. How can I align these two buttons next to each other without using absolute positioning? When I try positioning them using absolute right and top values, the lay ...

javascripthtmlcssangularangular2-template

Javascript on-page scroll positioning

My current dilemma involves finding a solution to optimize in-page scrolling for mobile users. I have a sticky header on the page, which causes #section1 to place the scroll position behind the sticky header. Is there a way to adjust the scroll position b ...

javascripthtmlcssscrollanchor

What steps should be taken to avoid an event from occurring when an error message is encountered?

I have a dropdown list of cars where an error message is displayed if any of them becomes inactive. When the error message is shown, clicking on the Route Car button should prevent any event from occurring, i.e., no modal popup should be displayed. How ca ...

javascriptjqueryhtmlvalidationbootstrap-modal

Restricting the number of characters allowed for text messages and keeping track of the count

I am attempting to implement a character limiter for an html textarea using JavaScript. Additionally, I want to include a total character counter. Unfortunately, the code I have written isn't functioning as expected. Can anyone identify where my mist ...

javascriptjqueryhtmlsms

What is the method to adjust the margin-left in an input checkbox?

Imagine you have: <div class="home"> <input type="checkbox"/>.... </div> I am trying to add margin-left:3px to the checkbox. This is my CSS code: .home+input[type=checkbox]{ margin-left:3px; } Can anyone assist me with this? ...

htmlcss

Issue with PHP/HTML header() function not directing to URL page

Situation: In my member database overview, users can click on an 'update member' link in a table that redirects them to a page displaying the data of the selected member. The URL receives the parameter lid.php?lidnummer=4 (or any other ID). On t ...

phphtmlurlhttp-redirect

What is the proper way to ensure a pull right display appears correctly?

This is the code I am currently using .tag-container.bottom-border.col-middle h1.text-center {{ tag.name }} button.btn.btn-follow.pull-right(ng-hide="hasFollowed" ng-click="tagArticles.followTag()") Follow I am trying to align the tag name in th ...

cssangularjstwitter-bootstrappug

Quiz12 - The Influence of Inheritance on CSS

How will the text size of "Universe" be affected by the following declaration? <div style=”font-size:12px;”>World is<div style=”font-size:0.5em;”>VERY small in <div style=”font-size:100%;”>Universe</div></div>< ...

css

What is the best way to loop through <div> elements that have various class names using Python 3.7 and the Selenium webdriver?

I am currently in the process of creating a Reddit bot that provides me with a detailed report about my profile. One task I need to accomplish is identifying which of my comments has received the most likes. Each comment on Reddit is wrapped in elements w ...

htmlseleniumpython-3.7

Using the Match() function with an array of objects

I am working with an object array containing multiple variables. let Novels = []; class Novel { constructor(isbn, title, author, edition, publication, year) { this.isbn = isbn; this.title = title; this.author = author; this.publicat ...

javascripthtmlarraysstring

When an item in the accordion is clicked, the modal's left side scroll bar automatically scrolls to the top. Is there a solution to prevent this behavior and

When I first load the page and click on the Sales accordion, then proceed to click on Total reported and forecasted sales, the scrollbar jumps back up to the top The marked ng-container is specifically for the UI of Total reported and forecasted sales He ...

javascripthtmlcssangularangular-material

What's the process for browsers to render the 'span' element?

<p> <span>cancel</span><span>confirm</span> </p> <hr> <p> <span>cancel</span> <span>confirm</span> </p> Both should display the same result. However, in the ...

htmlcss

Opera and Internet Explorer have trouble properly applying css text-decoration

It appears that the CSS text-decoration style is not being correctly displayed in Opera 11 and IE 9, but works perfectly fine in Chrome, Firefox, and Safari. Can anyone offer a solution to fix this issue? Incorrect Rendering: Correct Rendering: Below is ...

htmlcssinternet-explorerlayoutopera

Using Radio button to access local HTML pages - A step-by-step guide

I am currently working on a project that involves the use of radio buttons and their corresponding options. My goal is to have each radio button selection lead to a specific HTML page being displayed. I've come across solutions involving external URLs ...

javascriptphpjqueryhtml

Execute JavaScript code following the completion of loading and running an external script

My goal is to dynamically load and run a third-party JavaScript file (from a different domain) and then execute some of my own code afterwards. One option I'm considering is using jQuery's $.getScript: $.getScript('https://login.persona.org ...

javascriptjquerybrowserhtml

Text buttons on the menu are running into each other when displayed on an Android device

After recently completing a redesign of my website, hetoft.com, I am proud to say that I crafted the design and code entirely by hand, with only Dreamweaver as a helpful tool. This was my first experience creating a website with a CSS-based layout, and des ...

androidhtmlcssscalingoverlap

Steps to resolve background image problems

Currently encountering issues with the application where the background image is not showing up behind the login form. This problem arises while using a bootstrap template for the website. Attempted to set the background image in the .main-content div with ...

htmlcssasp.net-corefrontendweb-frontend

Centering headings and form elements in Bootstrap

I have a bootstrap row with a heading and an input field. Here is my code: <div class="row mb-5"> <div class="col h1 text-white text-start text-center text-md-start text-lg-start">Welcome<input class="for ...

htmlcssbootstrap-5

My divs are multiplying twice as fast with every iteration of the Javascript For Loop

Recently, I developed a script that generates a series of fields based on a number provided by the user (k). Initially, I had a script that would create the correct number of fields. However, I decided to arrange them like vectors on the screen, so I made ...

javascripthtmlcss