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

The margins are misaligned on a tablet-sized device due to an issue with the media

Why are the margins not maintained well when media queries are applied for tablet view, i.e., medium-sized devices? The third block is coded to acquire 100% width in medium size but the margins do not align well. What could be causing the third paragraph t ...

htmlcsstwitter-bootstrap

How can you Use CSS to Float Elements Left and Right while adjusting their Width Dynam

Is it possible to have two columns side by side with dynamic text using only CSS? I'm trying to make the left main text "break" into a new line when it reaches the right category, which is also dynamic. Do I need to use JavaScript for this? ! Link ...

csslayoutdynamiccss-float

Incorporate a new CSS class into a DIV using JavaScript

Sample HTML: <div id="bar" class="style_one"></div> Is there a way to include the class style_two without deleting style_one? final outcome: <div id="bar" class="style_one style_two"></div> ...

javascripthtmlcss

I'm having trouble getting Firefox to recognize the percentage height set on table rows. Any suggestions for a workaround?

The goal is to set the height of the first row to 70% of the screen. To prevent the scrollbar from appearing on the entire webpage, overflow has been set to auto within the div of the first row. This solution functions correctly on Chrome and IE, however, ...

htmlcssfirefox

Styling the content within Template Strings is not supported by VSCode

Recently, I've noticed that there are two scenarios in which my VSCode doesn't properly style the content within my template strings. One is when I'm writing CSS in a JavaScript file, and the other is when I'm fetching data from GraphQL ...

javascriptcssreactjsvisual-studio-codegraphql

Enhanced Custom Code Highlighting for Aptana Studio 3 with support for .less files

Looking to enhance syntax highlighting for .less files in Aptana Studio 3 but struggling to find a solution. XText only works with Eclipse, and the forums offer limited guidance. Has anyone successfully implemented custom syntax highlighting for .less fi ...

csssyntax-highlightingaptanalessxtext

Develop an XML document that includes CSS and DTD seamlessly incorporated

Could someone please provide me with a short code example of an XML file that includes both a DTD and CSS styles all in one file? Just need one element as an example. I'm new to XML and can't seem to find any examples with both XML and CSS comb ...

htmlcssxmlxhtmldtd

Modify the background color of each word within the search bar

I've been attempting to colorize each word using jQuery and give them a colored background. I came across a solution, but it only seems to work for the HTML content, not the input field in the search bar. Below is an example of what I found: HTML So ...

jqueryhtmlcsssearchhighlight

The data type 'string' cannot be assigned to the data type 'Position'

Currently, I am in the process of converting React js to typescript. The component being used is a Class Component. I would like to obtain CSS settings through props and apply them to an element. How can I resolve this issue? render(){return( <span st ...

cssreactjstypescript

ES6 import of CSS file results in string output instead of object

Too long; Didn't read I'm facing an issue where the css file I import into a typescript module resolves to a string instead of an object. Can someone help me understand why this is happening? For Instance // preview.ts import test from './ ...

javascriptcssangularwebpackimport

Footer flexbox element not aligning underneath other content containers

After creating a layout using CSS and Flexbox, I encountered an issue with the footer div. When the page loads, the footer is displayed at the bottom of the page. However, as content is added or loaded dynamically, it causes the footer to float in the midd ...

htmlcssflexbox

Aligning the stars with CSS

One of the components I have deals with a star rating system, and I thought it would be cool to use Font Awesome icons for half stars. Everything is working well except for the CSS styling aspect. While I managed to position some of the stars correctly by ...

javascriptcssreactjsreact-functional-component

The sizing of elements in Firefox seems to be off when using percentage

I am facing an issue with a page that has 3 td elements all set at a width of 33.333333%. In Firefox, the browser seems to be computing it as an actual pixel value of 568px, causing the containers to run off the page. I have not defined any fixed widths in ...

css

Polymer elements fail to adapt to varying screen sizes

I am currently working on creating a responsive website using polymer, but I have encountered an issue where certain elements (such as core-toolbar and paper-fab) are not scaling properly on smaller, denser screens like smartphones. After browsing through ...

csswebpolymer

How can I modify the font style in Bootstrap?

How can I integrate a custom open font into Bootstrap without using a CDN? Should I create a CSS rule to override Bootstrap's default font or locate the font files in Bootstrap and replace them with my desired font? ...

css

What is the best method for loading multiple HTML files into a Div container?

Recently, I made the decision to improve the look of an online manual I have been working on for my company by incorporating Bootstrap. The manual is structured with a tree-view that contains titles linking to HTML files with information and CSS stylesheet ...

javascriptjqueryhtmlcss

Is the CSS Transition Solely Active for the Introductory Animation?

I'm currently looking to enhance the smoothness of div expansion and contraction on hover using CSS transitions. However, I have noticed that the Transition property only seems to affect the entry animation (i.e., when the mouse hovers and the div exp ...

javascripthtmlcssreactjsweb

How to attach an event listener to an input element using Angular

I am looking to add a listener to an input element that will be triggered every time the user changes the input values. The goal is to display the current values chosen by the user. Example HTML template: <div id="idDoseLabel1" class="da ...

javascripthtmlcssangulartypescript

Creating linear overlays in Tailwind CSS can be achieved by utilizing the `bg-gradient

Is there a way to add a linear background like this using Tailwind CSS without configuring it in tailwind.config.js? The image will be fetched from the backend, so I need the linear effect on the image from bottom to top with a soft background. Here are ...

javascriptcssreactjsnext.jstailwind-css

Unable to locate the CSS file

I'm struggling to link a stylesheet file to my 'base.html' template that is used throughout my entire project. Here's the path to the file I want to link: C:\forum_project\static\main\css\style.css Below is ...

cssdjangostatic