Create a stylish progress bar using CSS arrows

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

I have a progress bar that is almost complete, but the arrow position is not working properly. I have tried using :before to fix it, but the position is still incorrect.

<div class="progress-panel">
    <div class="progress-panel--arrow -complete">
      <div class="progress-panel--arrow-content">
        <div class="progress-panel--arrow-icon">
          <svg width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 .75C5.8.75.75 5.8.75 12S5.8 23.25 12 23.25 23.25 18.2 23.25 12 18.2.75 12 .75zM9.75 17.62L4.13 12l1.58-1.6 4.05 4.04L18.3 5.9l1.57 1.6L9.75 17.62z" />
          </svg>
        </div>
        <div class="progress-panel--arrow-text">
          Ready
        </div>
      </div>
    </div>
    <div class="progress-panel--arrow -active">
      <div class="progress-panel--arrow-content">
        <div class="progress-panel--arrow-icon">
          <svg width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 .83C5.84.83.83 5.83.83 12s5 11.17 11.17 11.17 11.17-5 11.17-11.17S18.17.83 12 .83zm0 20.1c-4.94 0-8.93-4-8.93-8.93s4-8.93 8.93-8.93 8.93 4 8.93 8.93-4 8.93-8.93 8.93z">
            </path>
          </svg>
        </div>
        <div class="progress-panel--arrow-text">
          Steady
        </div>
      </div>
    </div>
    <div class="progress-panel--arrow -incomplete">
      <div class="progress-panel--arrow-content">
        <div class="progress-panel--arrow-icon">
          <svg width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 .83C5.84.83.83 5.83.83 12s5 11.17 11.17 11.17 11.17-5 11.17-11.17S18.17.83 12 .83zm0 20.1c-4.94 0-8.93-4-8.93-8.93s4-8.93 8.93-8.93 8.93 4 8.93 8.93-4 8.93-8.93 8.93z">
            </path>
          </svg>
        </div>
        <div class="progress-panel--arrow-text">
          Go
        </div>
      </div>
    </div>
</div>
<style >
  .progress-panel--arrow-text {
    font-family: sans-serif;
    margin-left: 10px;
  }
  .progress-panel {
    display: flex;
    flex-direction: row;
  }
  .progress-panel--arrow-content {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 50px;
  }
  .progress-panel--arrow-content:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 25px solid #333;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    top: 0;
    left: 100%;
  }
  .-complete {
    background-color: #00a5af;
  }
  .-active{
    background-color: #ffffff;
  }
  .-incomplete {
    background-color: #e8ebee;
  }
</style>
htmlcsssass

Answer №1

Make sure to include the position property in your :before selector for optimal SCSS optimization.

With SCSS, you can avoid repetition by using the :before selector more efficiently compared to CSS.

.progress-panel--arrow-text {
  font-family: sans-serif;
  margin-left: 10px;
}
.progress-panel {
  display: flex;
  flex-direction: row;
}
.progress-panel--arrow-content {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 110px;
  height: 50px;
  &::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    top: 0;
    left: 100%;
    position: absolute;
  }
}
.-complete {
  background-color: #00a5af;
  color: #ffffff;

  svg {
    fill: #ffffff;
  }

  .progress-panel--arrow-content::before {
    border-left: 25px solid #00a5af;
  }
}
.-active{
  background-color: #ffffff;
  color: #01a2ff;

  svg {
    fill: #01a2ff;
  }

  .progress-panel--arrow-content::before {
    border-left: 25px solid #ffffff;
  }
}
.-incomplete {
  background-color: #e8ebee;

  .progress-panel--arrow-content::before {
    border-left: 25px solid #e8ebee;
  }
}

Check out the fully functional demo here: https://codesandbox.io/s/divine-currying-y8b5g

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

Function in jQuery to reference two different divs

I'm currently facing an issue with a code snippet that I have. The requirement is for the user to be able to hover over "Div 1" and/or "Div2" and trigger a red border around both elements simultaneously. Due to the complexity of my WordPress theme, th ...

javascriptjqueryhtmlcss

Display a persistent bar on the page until the user reaches a specified <div> element through scrolling

Looking to implement a sticky bar at the bottom of my page that fades out once the user scrolls to a specific div and then fades back in when scrolling up and the div is out of view. This bar should only appear if the user's screen size is not large ...

javascriptjqueryhtmlcss

Creating a notification system similar to Facebook's in an HTML button using just HTML and CSS

I'm attempting to create a button with a notification feature that mimics the style of Facebook notifications. I want a small red circle in the top right corner, showing a numerical value. However, I'm running into some difficulties. I can' ...

htmlcss

As soon as a key is pressed in tinyMCE, the tracking continues until reaching the conclusion of the initial <

I am attempting to capture, in real-time, the user input in the .content textarea and paste it into the .intro. I have tried the following code without success: //This code is specifically for tinymce, as I am using tinyMCE as a rich text editor for textb ...

javascriptjqueryhtmltinymce

Upon loading a website, the Chrome browser will automatically set the zoom level to 80%

Recently, I've encountered a perplexing issue with Chrome where my website is automatically zoomed out from 100% to 80%. It seems that browsers cache zoom settings based on the domain and apply them when users revisit the site. However, in this case, ...

htmlangulargoogle-chromefirefoxbrowser

Showcasing the values of JavaScript

How can I resolve the issue depicted in the second picture? I need the value of 3 only in the USD column, with all others having a value of zero. <div class="span3"> <ul class="nav nav-tabs nav-stacked" > <?php foreach ( ...

javascriptjqueryhtmlmysqlcss

Add a color gradient to text as it animates without displaying any code tags (HTML, CSS, JS)

I have a unique text animation that loads when the page loads. The characters will be gradually written to the screen with some words having a gradient effect. While I've managed to successfully apply the gradient, there seems to be a pause when it re ...

javascripthtmlcssanimationgradient

What is the best way to style multiple classes within the same element (specifically an ordered list ol

Using CSS counters, I have created various styles for an ordered list <ol> by applying different classes and adjusting the styles accordingly. Now, I want the counters to adjust based on screen size, displaying smaller numbers on smaller screens. To ...

cssclasshtml-liststargeting

Trouble encountered when attempting to download PDF using jQuery

I have encountered an issue while trying to download a PDF using Ajax response HTML. Here is the code I am using: var newPDFAction = function () { $.ajax({ type: "post", url: '{{ route("admin.getCustomerSalesRepTota ...

htmljquerypdf

Incorrect Pixel Width with Relative Positioning in Internet Explorer 11

I'm encountering a positioning problem that seems to be specific to Internet Explorer (11). I'm attempting to absolutely position a div tag in relation to another element. The problematic code snippet appears as follows: <div id="FacebookWra ...

htmlcssinternet-explorer

Difficulty viewing image in Firefox using HTML <img> tag

I'm encountering an issue with rendering an img tag in an HTML page. The img source is a file located on a remote server. Surprisingly, when attempting to display the image in Firefox using: file://///server/folder1/folder2/name.jpg it shows up prop ...

htmlimage

The document type specified in the HTML validation process does not support the use of the "hr" element

My goal is to display a list of articles including images, titles, horizontal lines, and dates using a UL. Unfortunately, I encountered a validation error when testing them on the website validator tool at https://validator.w3.org/. Below is a simplified ...

htmlw3c-validation

A step-by-step guide on integrating SASS into a React project using Vite

I've recently set up a project using React with Vite and I'd like to incorporate SASS as well. Currently, I have it installed and typically I open a Git Bash terminal and run sass -w sass:css. However, I'm wondering if there's a more e ...

reactjssassvite

The <h> tag gains height on its own accord

Here is my original code: <h4 class="orange2" ><a href="<?php echo base_url();?>v/<?php echo $this->uri->segment(3);?>/<?php echo $v['uniq'];?>"><?php echo trim(strip_tags($v['video_name']));?> ...

javascriptcsshtmltwitter-bootstrap

Struggling with the Nivo slider not loading properly?

Check out my personal website. I'm having an issue with my Nivo slider not displaying properly - it just keeps loading. Any ideas on why this is happening and how I can fix it? Below is the CSS I am using: #slider { position:relative; width: ...

javascripthtmlcssnivo-slider

Utilizing ionic-scroll for seamless movement and scrolling of a canvas element

I have set up a canvas element with a large image and I want to enable dragging using ionic-scroll. Following the provided example: <ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px"> <div style="width: 5000px; h ...

javascripthtmlcanvasionic-framework

What is the reason for adding CSS styles to a JavaScript file without importing them?

/Navbar.js/ import './navbar.scss'; import {FaBars, FaSearch} from "react-icons/fa"; import { useState } from 'react'; function Navbar(){ const [hide,sethide] = useState(true); const barIcon = document.querySelectorAl ...

javascripthtmlcssreactjs

What is the best way to convert my Chatbot component into a <script> tag for seamless integration into any website using React.js?

I have successfully integrated a Chatbot component into my Next.js application. https://i.stack.imgur.com/BxgWV.png Now, I want to make this component available for anyone to use on their own website by simply adding a tag. My initial approach was to cre ...

javascripthtmlreactjswebpacknext.js

Modify the appearance of HTML dialog box using CSS styling

Currently, I am working on a Java Spring project that includes a single CSS file consisting of around 1500 rows. Recently, I was tasked with adding a dialog box to one of the screens in the project. The issue I encountered is that the style of the dialog b ...

javajquerycssstylesdialog

Having Difficulty Positioning Tooltip Beside Input/Label Field

I have created a tooltip using HTML and CSS that appears when hovering over an image. However, I am encountering alignment issues when placing the image next to a textbox/input as it is not inline with the input box, likely due to some absolute positioning ...

jqueryhtmlcss