Encircle a circle within the Progress Tracker

Is there a way to create a ring around the circle in this progress tracker, similar to the image shown here? The progress tracker is based on

You can view an example here.

The CSS approach used was:

.progress-step.is-active .progress-marker {
  background-color: #2196F3;
  border: 2px solid #0e38b1;
}

Make sure to leave an empty/white space between the ring and the circle.

cssflexbox

Answer №1

You have the option to utilize pseudo elements.

Give this a shot

.progress-step.is-active .progress-marker::after {
    content: "";
    position: absolute;
    border: 2px solid #0e38b1;
    height: 22px;
    width: 22px;
    background: transparent;
    border-radius: 100%;
}


.progress-tracker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  list-style: none;
}

.progress-step {
  display: block;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
  margin: 0;
  padding: 0;
  min-width: 28px;
}

.progress-step:last-child {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}

.progress-step:not(:last-child)::after {
  content: '';
  display: block;
  position: absolute;
  z-index: -10;
  top: 6px;
  bottom: 12px;
  right: 0;
  width: 100%;
  height: 2px;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

.progress-step.is-active .progress-title {
  font-weight: 400;
}

.progress-step > a {
  display: block;
}

.progress-marker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 20;
  width: 10px;
  height: 10px;
  color: #fff;
  font-weight: 400;
  border: 2px solid transparent;
  border-radius: 50%;
  -webkit-transition: background-color, border-color;
  transition: background-color, border-color;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}

.progress-text {
  display: block;
  padding: 14px 9.3333333333px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-title {
  margin-top: 0;
}

.progress-step .progress-marker {
  color: #fff;
  background-color: #0e38b1;
}

.progress-step::after {
  background-color: #0e38b1;
}

.progress-step .progress-text, .progress-step .progress-step > a .progress-text {
  color: #333333;
}

.progress-step.is-active .progress-marker {
  background-color: #2196F3;
}

.progress-step.is-complete .progress-marker {
  background-color: #1976D2;
}

.progress-step.is-complete::after {
  background-color: #868686;
}

.progress-step:hover .progress-marker {
  background-color: #56ADF5;
}

.progress-tracker--center .progress-step {
  text-align: center;
}

.progress-tracker--center .progress-step:last-child {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.progress-tracker--center .progress-step::after {
  right: -50%;
}

.progress-tracker--center .progress-marker {
  margin-left: auto;
  margin-right: auto;
}

.progress-tracker--right .progress-step {
  text-align: right;
}

.progress-tracker--right .progress-step:last-child {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.progress-tracker--right .progress-step::after {
  right: calc(-100% + 14px);
}

.progress-tracker--right .progress-marker {
  margin-left: auto;
}

.progress-tracker--border {
  padding: 5px;
  border: 2px solid #868686;
  border-radius: 38px;
}

.progress-tracker--spaced .progress-step::after {
  width: calc(100% - 30px);
  margin-right: 8px;
}

.progress-tracker--word {
  padding-right: 38.6666666667px;
  overflow: hidden;
}

.progress-tracker--word .progress-text {
  display: inline-block;
  white-space: nowrap;
}

.progress-tracker--word .progress-title {
  margin: 0;
}

.progress-tracker--word-center {
  padding-right: 38.6666666667px;
  padding-left: 38.6666666667px;
}

.progress-tracker--word-center .progress-text {
  padding-right: 0;
  padding-left: 0;
  -webkit-transform: translateX(calc(-50% + 14px));
          transform: translateX(calc(-50% + 14px));
}

.progress-tracker--word-right {
  padding-right: 0;
  padding-left: 38.6666666667px;
}

.progress-tracker--word-right .progress-text {
  padding-left: 0;
  -webkit-transform: translateX(calc(-100% + 28px));
          transform: translateX(calc(-100% + 28px));
}

.progress-tracker--text .progress-step:last-child {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.progress-tracker--text-top .progress-step::after {
  top: auto;
}

.progress-tracker--text-top .progress-text {
  height: 100%;
}

.progress-tracker--text-top .progress-marker {
  bottom: 28px;
}

.progress-tracker--text-inline .progress-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.progress-tracker--text-inline .progress-text {
  position: relative;
  z-index: 30;
  max-width: 70%;
  white-space: nowrap;
  padding-top: 0;
  padding-bottom: 0;
  background-color: #fff;
}

.progress-tracker--text-inline .progress-title {
  margin: 0;
}

.progress-tracker--square .progress-step {
  padding-top: 0;
}

.progress-tracker--square .progress-marker {
  -webkit-transform: scaleX(0.33) translateY(-12px);
          transform: scaleX(0.33) translateY(-12px);
  border-radius: 0;
}

@media (max-width: 399px) {
  .progress-tracker-mobile {
    overflow-x: auto;
  }
  .progress-tracker-mobile .progress-tracker {
    min-width: 200%;
  }
}

.progress-tracker--vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.progress-tracker--vertical .progress-step {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.progress-tracker--vertical .progress-step::after {
  right: auto;
  top: 14px;
  left: 12px;
  width: 4px;
  height: 100%;
}

.progress-tracker--vertical .progress-marker {
  position: absolute;
  left: 0;
}

.progress-tracker--vertical .progress-text {
  padding-top: 7px;
  padding-left: 42px;
}

.progress-tracker--vertical .progress-step:not(:last-child) .progress-text {
  padding-bottom: 42px;
}

@-webkit-keyframes scale-up {
  from {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes scale-up {
  from {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}

.anim-ripple .progress-marker::before, .anim-ripple-large .progress-marker::before, .anim-ripple-splash .progress-marker::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 30;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  visibility: hidden;
}

.anim-ripple :not(:active) .progress-marker::before, .anim-ripple-large :not(:active) .progress-marker::before, .anim-ripple-splash :not(:active) .progress-marker::before {
  -webkit-animation: scale-up 0.3s ease-out;
          animation: scale-up 0.3s ease-out;
}

.anim-ripple :focus .progress-marker::before, .anim-ripple-large :focus .progress-marker::before, .anim-ripple-splash :focus .progress-marker::before {
  visibility: visible;
}

.anim-ripple-large .progress-marker::before {
  width: 200%;
  height: 200%;
}

.anim-ripple-splash .progress-marker::before {
  width: 200%;
  height: 200%;
  box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.35);
}

.anim-ripple-double .progress-marker::before, .anim-ripple-double .progress-marker::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 30;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  visibility: hidden;
  background: none;
  border: 3px solid rgba(0, 0, 0, 0.3);
}

.anim-ripple-double :not(:active) .progress-marker::before, .anim-ripple-double :not(:active) .progress-marker::after {
  -webkit-animation: scale-up 0.3s ease-out 0s;
          animation: scale-up 0.3s ease-out 0s;
}

.anim-ripple-double :not(:active) .progress-marker::after {
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
}

.anim-ripple-double :focus .progress-marker::before, .anim-ripple-double :focus .progress-marker::after {
  visibility: visible;
}

.anim-path .progress-step::after {
  background-image: -webkit-linear-gradient(left, #0e38b1 50%, #868686 50%);
  background-image: linear-gradient(to right, #0e38b1 50%, #868686 50%);
  background-size: 200% 100%;
  background-position: 0% 100%;
  -webkit-transition: background-position 0.3s ease-out;
  transition: background-position 0.3s ease-out;
}

.anim-path .progress-step.is-complete::after {
  background-position: -100% 100%;
}

.progress-step.is-active .progress-marker::after {
    content: "";
    position: absolute;
    border: 2px solid #0e38b1;
    height: 22px;
    width: 22px;
    background: transparent;
    border-radius: 100%;
}
<ul class="progress-tracker progress-tracker--spaced">
  <li class="progress-step is-active">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step">
    <span class="progress-marker"></span>
  </li>
</ul>

Updated pen: https://codepen.io/anon/pen/VVqQRw

Answer №2

For those who prefer not to modify the HTML structure of their progress tracker, an efficient approach would involve using a box-shadow. Here's how you can implement it:

box-shadow: 0 0 0 10px #FFF, 0 0 0 11px #000

The first box-shadow represents the background color (set to 10px in this example), while the second one indicates the border color (set to 11px for a visible 1px border). To adjust the border width or size, simply tweak these values accordingly.

We hope this solution proves to be helpful!

Answer №3

I am hopeful that this solution will meet your needs

<div class="shape1">
   <div class="shape2">

   </div>
</div>
.shape1{
    border: 10px solid #bababa;
    width: 232px;
    border-radius: 50%;
}

.shape2{
    background: #bababa;
    width: 150px;
    height: 150px;
    border-radius: 56%;
    display: inline-block;
    border: 41px solid #fff;
}

Answer №4

To achieve the desired effect, simply add a box shadow.

Replace 

.progress-step.is-active .progress-marker
with:

.progress-step.is-active .progress-marker {
   background-color: #2196F3;
   border: 3px solid #fff;
   box-shadow: 0 0 0 2px #2196F3;
   margin-top: -1px
 }

For a live demonstration, check out this example: https://codepen.io/paddyfields/pen/GwPQPo

Answer №5

You have the option to include a border using the :before selector.

.progress-step.is-active .progress-marker:before {
  content: "";
  border: 2px solid  #2196F3;
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 100%
}


(CSS code with various styling properties)
<ul class="progress-tracker progress-tracker--spaced">
  <li class="progress-step is-active">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step">
    <span class="progress-marker"></span>
  </li>
</ul>

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

Conceal the unstyled element and reveal its adjacent sibling?

I have come across some HTML code that I am unable to modify. Instead of using JS/jQuery, I prefer a solution with cross-browser compatible CSS. The structure of the HTML is as follows: <ul class="list"> <li class="item"> <a hr ...

htmlcsshtml-lists

Creating a circular image with a vibrant color light effect that seamlessly runs across all browsers: What you need to know

Recently, I was working on a project involving this website that utilizes the Bootstrap framework. One interesting feature of the website is circle-shaped images that create a color light effect when hovered over. To achieve this, I decided to use the CSS ...

htmlcsstwitter-bootstrapgoogle-chromewebkit

Error with HTML form validation

After clicking the "Send Request" button, the query string ?req_flag=0 is not appearing in the URL. What could be causing this issue? I want my URL to look like this: localhost/flavourr/send_req.php?req_flag=0&f_e_mail_add=value <pre> <form ...

phphtmlcssxhtmltextarea

Dynamic sliding box jumps instead of simply fading in/out

My app features both a navigation bar and a sub-navigation bar. Within the sub-navigation bar, users can click on a button that triggers the appearance of another sub-bar while hiding the original one. The new sub-bar should smoothly slide out from behind ...

javascripthtmlcssangularjsangularjs-animation

Flexbox CSS Card Layout Behavior

Looking to achieve a specific design effect without relying on Semantic UI? Check out the codepen link here: https://codepen.io/anon/pen/YxBOax <div class="ui container"> <div class="ui four cards stackable"> <div class="teal card"> ...

htmlcsssemantic-uicss-grid

Achieving responsive masonry layout with Bootstrap 4

I'm attempting to implement the bootstrap 4 masonry effect on my website, but I'm facing issues with card responsiveness. The page is very basic without any special effects. While the page works well when resizing the browser window, it doesn&ap ...

javascripthtmlcssresponsive-designbootstrap-4

Creating an adjustable fixed footer using Bootstrap 3

Struggling with the application of bootstrap styling. I have a footer with columns set as col-md-3, 3, 2, 4 which sums up to a total of 12. The issue lies in the differing content within each column. My goal is to achieve equal spacing between each div in ...

htmlcsstwitter-bootstrap

Detecting collisions using CSS animation

I'm currently working on a unique "game" project. Check out the code snippet here: jsfiddle function update() { coyote.applyForce(gravity); coyote.edges(); coyote.update(); cactus.update(); if (coyote.intersects(cactus)){ alert("colisio ...

javascripthtmlcsscollision-detection

"Discover the magic of jQuery: Unveiling the hidden div with one simple CSS visibility change

I want to implement a functionality on my screen where the Previous button is hidden initially and only becomes visible when the user clicks the Next button. I have set the CSS property for the Previous button to hide it by default, but despite using an if ...

javascriptjqueryhtmlcss

Is it feasible for nested div to remain unaffected by bleeding when the container is positioned relatively and has an overflow hidden

Is it possible to bleed a nested div even when the container is positioned relative with hidden overflow? In this case, giving the nested div a fixed position is not an option. Please check out this unique example: http://jsfiddle.net/s7nhw/11/. If you ...

cssoverflowcss-positionhtml

What are the top methods for interacting between Server APIs and Client-Side JavaScript?

Presently, I am utilizing setTimeout() to pause a for loop on a vast list in order to apply some styling to the page. For example, For example: How I utilize setTimeOut: I use setTimeout() to add images, text and css progress bars (Why doesn't Prog ...

javascriptphpjquerycssajax

Tips on modifying the background color of a read-only field in an edit form

Changing the background color of a readonly field in the edit form of Free jqgrid can be a challenge. One potential solution involves specifying a style: .jqgrid-readonlycolumn { background-color: #FFFFDD; } This style is then used in the colmodel e ...

jqueryhtmlcssjqgridfree-jqgrid

Thrilling visual loops in motion with CSS animations

Currently, I am working on developing a captivating 'pulsating rings' animation that revolves around a circular image with the use of CSS animations. The image itself is a circle measuring 400px in width. Although I have successfully implemented ...

htmlcsscss-animations

Interactive CSS Video Gallery Slideshow

Is there a way to create a slideshow video gallery using CSS? I've looked everywhere but all I find are slideshow image galleries. If anyone has any resources or tips on how to do this, please share! This is the kind of video gallery I'm looking ...

htmlcssslideshowvideo-gallery

Inadequate text alignment

Trying to create a header mockup for a website featuring branding elements like a logo and brand name. Utilizing Angular.js for the webpage development process, incorporating a URL for the logo image from an online source. Encountering alignment issues th ...

htmlcssangularjstext-alignment

Creating diamond-shaped columns and rows in HTML using the Bootstrap framework is a fun and creative way to

Recently, I tackled the challenge of building a website based on a specific design. Within this design, there was a div element that included an image link. Despite my efforts, I found myself at a loss on how to proceed with this task. Here is the snippet ...

htmlcssbootstrap-4bootstrap-5

Ensure that the footer remains at the bottom of the page without being fixed to the bottom

I am currently working on configuring the footer placement on pages of my website that contain the main body content class ".interior-health-main". My goal is to have a sticky footer positioned at the very bottom of these pages in order to eliminate any wh ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

IE encounters an absolute z-index problem when expanding concealed content

I'm having trouble with the positioning of a block (div). I am new to CSS, so any help would be greatly appreciated. Here is the code snippet: http://jsfiddle.net/9rEmt/ (please check it out) for viewing online in IE. When I use absolute for positio ...

javascriptjqueryhtmlcss

optimal method for organizing design elements

I have a container with 9 square-shaped divs that I want to arrange in the following layout: It should resemble something like this: _________ ____ ____ | A | B | C | | |____|____| | | D | E | |_________|____|____| | F | G | ...

htmlcsslayoutflexbox

Troubleshooting: Twitter Bootstrap dropdown feature experiencing issues within navigation bar

I am facing an issue with getting the bootstrap dropdown to function properly. I have tested it on my mobile device and noticed that the menu does not drop down as expected. Here is a DEMO Below is the code snippet: <nav class="navbar navbar-inverse ...

jqueryhtmlcsstwitter-bootstrapdrop-down-menu