Enhancing bar border with the addition of a separator

Our current situation is similar to this:

https://i.stack.imgur.com/Luj1S.png

but our goal is to have a chart with separators on both sides of the age brackets, like this:

https://i.stack.imgur.com/03UpO.png

In order to achieve this, we have utilized the Pure CSS Circular Percentage Bar plugin.

We have attempted various modifications such as adjusting the order, shadow, height, and width of the following classes:

.pie, .c100 .bar:after .pie, .c100 .bar:before

.c100 .slice:before .c100 .slice:after

However, these alterations did not yield the desired outcome.

To see an example of our attempts, please refer to this fiddle: https://jsfiddle.net/bhavikvaishnani/r7emrhv8/6/

.pie,
.c100 .bar {
  position: absolute;
  border: 0.08em solid #307bbb;
  width: 0.84em;
  height: 0.84em;
  clip: rect(0em, 0.5em, 1em, 0em);
  border-radius: 50%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.c100 {
  position: relative;
  font-size: 120px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  float: left;
  margin: 0 0.1em 0.1em 0;
  background-color: #cccccc;
}

.c100>span {
  position: absolute;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  width: 5em;
  line-height: 5em;
  font-size: 0.2em;
  color: #cccccc;
  display: block;
  text-align: center;
  white-space: nowrap;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.c100:after {
  position: absolute;
  top: 0.08em;
  left: 0.08em;
  display: block;
  content: " ";
  border-radius: 50%;
  background-color: #f5f5f5;
  width: 0.84em;
  height: 0.84em;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}

.c100 .slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0em, 1em, 1em, 0.5em);
}

.c100.p25 .bar {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
<div class="c100 p25"> <span>25%</span>
        <div class="slice">
          <div class="bar"></div>
          <div class="fill"></div>
        </div>
      </div>

We are in need of a solution that allows us to dynamically change the percentage value.

jqueryhtmlcss

Answer №1

One possible solution is to alter the properties of ".bar:before" and ".bar:after".

.c100 .bar:before {
  border: 2px solid #000;
  left: -20px;
  top: 57px;
  width: 20px;
}

.c100 .bar:after {
  content: "!";
  top: -31px;
  position: absolute;
  border: 4px solid #000;
  left: 67px;
  padding:0;
  margin:0;
  display:block;
}

If you want to see it in action, check out this jsfiddle.

.pie,
.c100 .bar {
  position: absolute;
  border: 0.08em solid #162d74;
  width: 1em;
  height: 1em;
  clip: rect(0em, 0.5em, 1em, 0em);
  border-radius: 50%;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}

.c100 {
  position: relative;
  font-size: 140px;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  float: right;
  margin: 0 0.2em 0.1em 0;
  background-color: #eeeeee;
}

.c100>span {
  position: absolute;
  width: 90%;
  z-index: 2;
  left: 5%;
  top: 5%;
  line-height: 8em;
  font-size: 0.3em;
  color: #162d74;
  display: block;
  text-align: center;
  white-space: nowrap;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.c100:after {
  position: absolute;
  top: 0.08em;
  left: 0.08em;
  display: block;
  content: " ";
  border-radius: 50%;
  background-color: #f5f5f5;
  width: 0.84em;
  height: 0.84em;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}

.c100 .slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0em, 1em, 1em, 0.5em);
}

.c100 .slice:before {}

.c100.p25 .bar {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.c100 .slice:before,
.c100 .slice:after {}

.pie,
.c100 .bar:after,
.pie,
.c100 .bar:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  box-shadow:
}

.c100 .bar:before {
  border: 2px solid #000;
  left: -20px;
  top: 57px;
  width: 20px;
}

.c100 .bar:after {
  content: "!";
  top: -31px;
  position: absolute;
  border: 4px solid #000;
  left: 67px;
  padding: 0;
  margin: 0;
  display: block;
}
<body>
  <div class="c100 p25"> <span>25%</span>
    <div class="slice">
      <div class="bar"></div>
      <div class="fill"></div>
    </div>

  </div>

</body>

If you want to change the width, simply adjust the "left" and "border-width" properties.

Answer №2

I have experimented with this code snippet and discovered that applying the same CSS to the "fill" class and modifying its clip property can increase the size of the arc. If you are dynamically changing the clip value for the "bar" class, you can do the same for the "fill" class as well.

.pie,
.c100 .bar {
  position: absolute;
  border: 0.08em solid #307bbb;
  width: 0.84em;
  height: 0.84em;
  clip: rect(0em, 0.5em, 0.5em, 0em);
  border-radius: 50%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.c100 {
  position: relative;
  font-size: 120px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  float: left;
  margin: 0 0.1em 0.1em 0;
  background-color: #cccccc;
}

.c100 > span {
  position: absolute;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  width: 5em;
  line-height: 5em;
  font-size: 0.2em;
  color: #cccccc;
  display: block;
  text-align: center;
  white-space: nowrap;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.c100:after {
  position: absolute;
  top: 0.08em;
  left: 0.08em;
  display: block;
  content: " ";
  border-radius: 50%;
  background-color: #f5f5f5;
  width: 0.84em;
  height: 0.84em;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}

.c100 .slice {
  position: absolute;
  width: 1em;
  height: 1em;
}

.c100.p25 .bar {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  z-index:101;
}

.c100.p25 .fill {
  position: absolute;
  border: 0.08em solid #fff;
  width: 0.84em;
  height: 0.84em;
  clip: rect(0em, 0.55em, 0.55em, 0em);
  border-radius: 50%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(90deg);
  z-index: 100;
}
<div class="c100 p25"> <span>25%</span>
    <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
    </div>
</div>

Answer №3

Take a look at this snippet as it could be helpful:

.circle,
.s50 .border {
  position: absolute;
  border: 0.08em solid #249456;
  width: 0.84em;
  height: 0.84em;
  clip: rect(0em, 0.5em, 1em, 0em);
  border-radius: 50%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.s50 {
  position: relative;
  font-size: 100px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  float: left;
  margin: 0 0.1em 0.1em 0;
  background-color: #cccccc;
}

.s50 > span {
  position: absolute;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  width: 4em;
  line-height: 4em;
  font-size: 0.2em;
  color: #cccccc;
  display: block;
  text-align: center;
  white-space: nowrap;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.s50:after {
  position: absolute;
  top: 0.08em;
  left: 0.08em;
  display: block;
  content: "";
  border-radius: 50%;
  background-color: #f5f5f5;
  width: 0.84em;
  height: 0.84em;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}

.s50 .part {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0em, 1em, 1em, 0.5em);
}

.s50 .part:before {}

.s50.p25 .border {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.s50 .part:before,
.s50 .part:after {}

.circle,
.s50 .border:after,
.circle,
.s50 .border:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  box-shadow:
}
div.border:before {
  content: "";
  position: absolute;
  border: 0.08em solid #ffffff;
  width: 0.84em;
  height: 0.84em;
  clip: rect(0em, 0.5em, 1em, 0em);
  border-radius: 50%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
    transform: rotate(0deg);
    transform: rotate(180deg);
  box-sizing: content-box;
left: -0.1em !important;
    top: -0.08em !important;
}
<body>
         <div class="s50 p25"> <span>25%</span>
              <div class="part">
                <div class="border"></div>
                <div class="fill"></div>
              </div>
           
          </div>

</body>

Answer №4

This is my solution. I have incorporated pseudo elements before and after the .slice class and implemented different clip values for them, along with a 90-degree rotation for the before pseudo element. Both pseudo elements are connected to the .slice CSS, meaning that adjusting the rotation will automatically adjust the after pseudo element as well.

.circle,
.c100 .line, .c100 .cut:before, .c100 .cut:after {
  position: absolute;
  border: 0.08em solid #307bbb;
  width: 0.84em;
  height: 0.84em;
  clip: rect(0em, 0.5em, 1em, 0em);
  border-radius: 50%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.c100 .cut:before, .c100 .cut:after {
  content:" ";
  display:block;
  border: 0.08em solid #fff;
  z-index:2;
}
.c100 .cut:before {
  clip:rect(0.47em, 0.1em, 1em, 0em);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.c100 .cut:after {
  clip:rect(0em, 0.5em, 1em, 0.47em);
}

.c100 {
  position: relative;
  font-size: 120px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  float: left;
  margin: 0 0.1em 0.1em 0;
  background-color: #cccccc;
}

.c100>span {
  position: absolute;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  width: 5em;
  line-height: 5em;
  font-size: 0.2em;
  color: #cccccc;
  display: block;
  text-align: center;
  white-space: nowrap;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.c100:after {
  position: absolute;
  top: 0.08em;
  left: 0.08em;
  display: block;
  content: " ";
  border-radius: 50%;
  background-color: #f5f5f5;
  width: 0.84em;
  height: 0.84em;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}

.c100 .cut {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0em, 1em, 1em, 0.5em);
}

.c100.p25 .line, .c100 .cut:after {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
<div class="c100 p25"> <span>25%</span>
  <div class="cut">
    <div class="line"></div>
    <div class="fill"></div>
  </div>
</div>

Answer №5

It is incorrect to suggest using .bar:before and .bar:after as a solution because the progress stripe does not have any information about its beginning and end.

Two instances of the "clip" property are used in this code, one for the .slice element and another for the .bar object. These "clips" determine the starting and ending points of the stripe.

To solve this issue, pseudoselectors should be applied on both elements:

.c100 .slice:before {
    content: '';
    position: absolute;
    width: 5px;
    height: .08em;
    background-color: #fff;
    left: calc(50% - 3px);
    z-index: 2;
}

.c100 .bar:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 5px;
    transform: rotate(90deg);
    background-color: #fff;
}

For a working example, please refer to the following link: fiddle

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

Retrieving a variable value from an AJAX call for external use

Looking for a solution to pass the generated JSON response from an ASMX web service accessed via AJAX to an outside variable in another function. Below is the code snippet for reference: function setJsonSer() { var strWsUrl = &apo ...

javascriptjqueryajaxjson

Prevent Fixed Gridview Header from being affected by browser Scroll-bar using JQuery

Is there a way to make the fixed header responsive to only one scroll bar in JQuery? Specifically, is it possible to have it respond solely to the div's scroll bar and not the browser's scroll bar? I attempted to remove the browser's scroll ...

javascriptjqueryhtmlcssgridview

Exploring the usage of arrays within Angular 4 components. Identifying and addressing overlooked input

I'm struggling with array declaration and string interpolation in Angular 4 using TypeScript. When I define the following classes: export class MyArrayProperty { property1: string; property2: string; } export class MyComponent { @Input() object: ...

htmlarraysjsonangulartypescript

Unable to view images on Wordpress theme

I am currently facing an issue where some images in my asset folder are not displaying properly when I convert my HTML/CSS/JS template to Wordpress. The main problem is with the image that should show up when you first visit the website. Below is the CSS c ...

javascriptphphtmlcsswordpress

Using Django to render multiple images for a post

For the past few days, I have been attempting to provide the admin user with the ability to upload multiple images/slides for each individual post. One idea that came to mind was nesting a for loop inside the posts' for loop so that for every post, al ...

htmldjangodjango-modelsrendering

What is the best way to automatically direct users to their profile page after logging in?

After logging in, I need to redirect users to their profile page. The issue I'm encountering is figuring out how to pass the user_id into the URL for successful redirection. I've researched various solutions for this common problem without succe ...

pythonhtmldjango

best practices for choosing items from a dropdown menu using Angular

I have a dropdown list displaying existing tags/chips created by users in the past. However, I'm having an issue where when I select a tag from the dropdown list, it doesn't show up in my input field (similar to the Chart tag currently). I am abl ...

htmlangulartypescriptangular-material

Retrieve the total count of tables within a specific div element

If I have an unspecified amount of tables within a div, how can I determine the total number of tables using either plain JavaScript or jQuery? ...

javascriptjqueryhtml

The content of btn-id element in Angular is showing as undefined

I have a JavaScript file located at sample/scripts/sample.js and there are 8 HTML files in the directory sample/src/templates/. My goal is to select a button on one of the HTML files. When I tried using angular.elemnt(btn-id).html(), I received an 'un ...

javascriptcssangularjshtmlangularjs-directive

Comparison of loading time between loader gif and browser's loading image

Recently, I've come across a code snippet where I implemented a 'loader' gif to show while PHP retrieves data from an SQL database. Everything seemed to be working fine when testing on my localhost. However, upon closer observation, I notice ...

phpjqueryajax

Displaying the "Ad Blocker Detected" image next to the advertisement

I am attempting to create a feature where if adblock is enabled, an image will display behind the ad banner on my website with the message "Please consider disabling adblock". Unfortunately, it is only showing up as a bordered box. Here is how the box ap ...

htmlcss

Prevent automatic submission of forms when selecting attributes in HTML forms using AngularJS

I need to create a form where users can select their branch of study. Here is the form I have designed- <form method="post" [formGroup]="formData" (click)="dataSubmit()" > <div class="form-group"> <label for="branch">Selec ...

htmlangular

Could it be a mistake causing Echo to fail in fetching information from advanced custom fields?

When setting up in-content advertising for my blog posts on WordPress, I wanted the ads to point towards other sections of my site. Everything was working fine with the shortcode [in-content] pulling the most recent post from the 'advertising' cu ...

phphtmlwordpressif-statementadvanced-custom-fields

The HTTP request is malfunctioning in a different location

I'm facing an issue where my code works in the w3schools code editor, but not on localhost or cpanel host. When I try to run it on another host, it gives me a bad request and doesn't return the answer. Here is the code snippet that I am working ...

javascripthtml

In Vue, when you want to display text after reaching a height of 50px, any additional text will automatically be replaced by five full

https://i.stack.imgur.com/mp0YJ.png >>>>>>>>>Explore Sandbox Example <div style="height:50px"> ...

htmlcssvue.js

Contrast between utilizing filter_input and accessing $_POST directly following an asynchronous AJAX request

When I use filter_input(INPUT_POST, 'attribute') and $_POST['attribute'], I get different results and I can't figure out why. The Post-Request is sent by a JavaScript script built with JQuery and it looks like this: // type javaS ...

javascriptphpjqueryajaxfilter-input

Basic jQuery Slideshow Counter

I'm having trouble implementing a text-based horizontal slider on my website that scrolls left and right with mouse control. I want to display the current index of each slide along with the total number of slides (e.g. 1/4) and update the index as use ...

jqueryhtmlcsscarouselcounter

I am experiencing difficulty in successfully transmitting a variable from my jQuery code to my PHP code

I've been attempting to pass a variable from my jQuery code to my HTML/PHP code using AJAX and POST. However, I'm encountering an error message stating "Notice: Undefined index: testData in C:\xampp\htdocs\teszt\test1.php on l ...

javascriptphpjqueryajaxpost

Implementing automatic activation of a tab upon page load using Angular

I am currently working with a set of Bootstrap nav pills in my navigation bar. The 'ng-init' code in my Angular script sets the 'dateState' to 'past' on page load. However, I have noticed that the 'Past Events' nav p ...

javascripthtmlcssangularjs

Achieving a Side-Along Sidebar with CSS, Fully Embracing

I'm encountering an issue with achieving 100% height using CSS. Despite my extensive search for tutorials and solutions, I haven't been able to achieve the desired results. My layout consists of a sidebar and a main column where the content will ...

cssheight