Modify the appearance of the gradient progression bar

I am working on a gradient progress bar with the following code:

CSS:

.progressbar {
    height: 15px;
    border-radius: 1em;
    margin:5px;
    background: 
      linear-gradient(-45deg,
        rgba(255, 255, 255, 0.15) 25%,transparent 25%, 
        transparent 50%, rgba(255, 255, 255, 0.15) 50%, 
        rgba(255, 255, 255, 0.15) 75%,transparent 75%) 
      left/30px 30px repeat-x,
      linear-gradient(to right, red 0%, yellow 50%, green 100%) left/var(--p,100%) fixed,
      lightgray;
  box-shadow:inset 0px -2px 5px rgba(0, 0, 0, 0.5);
  animation: change 1s linear infinite;
}
@keyframes change {
  from {background-position:0 0,left}
  to {background-position:30px 0,left}
}

HTML:

<div class="progressbar" style="width:80%;"></div>

I am looking to modify the shape of my progress bar while keeping it as a gradient bar only. I would like the shape to resemble an arrow, similar to the image attached here https://i.sstatic.net/BCbhz.png.

htmlcssangularbootstrap-5

Answer №1

This solution may be challenging, especially if your background is not solid. However, you can achieve the desired effect using pseudo elements. Check out the trick below.

For more information on creating CSS triangles, visit this link.

.progressbar {
    position: relative; /* required for absolute positioning of pseudo element */
    height: 56px;
    margin:5px;
    background: 
      linear-gradient(-45deg,
        rgba(255, 255, 255, 0.15) 25%,transparent 25%, 
        transparent 50%, rgba(255, 255, 255, 0.15) 50%, 
        rgba(255, 255, 255, 0.15) 75%,transparent 75%) 
      left/30px 30px repeat,
      linear-gradient(to right, red 0%, yellow 50%, green 100%) left/var(--p,100%) fixed,
      lightgray;
  box-shadow:inset 0px -2px 5px rgba(0, 0, 0, 0.5);
  animation: change 1s linear infinite;
}

.progressbar:after {
  content: "";
  position: absolute;
  right: 0;
  width: 0; 
  height: 0; 
  border-top: 28px solid white; /* Your background color*/
  border-bottom: 28px solid white; /* Your background color*/
  border-left: 28px solid transparent;
}

.progressbar:before {
  content: "";
  position: absolute;
  left: 0;
  width: 0; 
  height: 0; 
  border-top: 28px solid transparent; 
  border-bottom: 28px solid transparent;
  border-left: 28px solid white; /* Your background color*/
}

@keyframes change {
  from {background-position:0 0,left}
  to {background-position:30px 0,left}
}
<div class="progressbar" style="width:80%;"></div>

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

JavaScript takes the spotlight before CSS

Currently experiencing this issue in Chrome, although Firefox seems to be working fine so far. Here is a greatly simplified version of the problem: HTML: <div class="thumbnail"> <a href='#' id="clickMe">Click me!</a> </d ...

javascriptjquerycsstwitter-bootstrapresponsive-design

The SVG animation is reversing and decreasing in size from the bottom

Feeling lost, I spent a day searching without success. I have a project in full Vuejs and I thought using Svg would be easy and fun, but I can't figure out why the image resizes when playing an animation. The bottom of the svg seems to resize and get ...

cssvue.jsanimationsvg

What is a way to perform pre-increment without utilizing the ++I operator?

It is my belief that the code snippet below: i += 1 or i = i + 1 does not have the same effect as ++i. Am I incorrect in this assumption? Is there an alternative method to achieve pre-increment without utilizing the ++ operator? ...

javascriptjavaangularpre-increment

Images and CSS are functioning properly when viewed locally, but are not displaying as expected on GitHub pages

There seems to be some issues with transferring my website from a custom domain on Hover. When I try to import it to anthematics.github.io, only the HTML loads while images and CSS are missing. <link rel="stylesheet" href="theme.css" type="text/css"> ...

htmlcssgithub-pages

Choose all of the IDs from various sections using Jquery

I am facing an issue with having 2 identical IDs inside 2 separate sections. When the button is clicked, I want it to select the ID within this section and apply a style, then also select the ID in the other section and apply that same style. The code sni ...

htmljquerycss

Issues with Angular and Node Frameworks

Recently, I've been diving into learning Angular but have hit a roadblock with an error related to Angular. Here's the issue: I'm using Ubuntu 18.04 and installed the latest version of Node.js via nvm. However, I seem to have "two" nodes in ...

node.jsangularubuntucommand-line-interface

Error in refreshing the deployment package of angular 4 on an Apache server

At the moment, my Angular application runs on an Apache server at the 'http://localhost' root or index page. However, when I refresh the inner page 'http://localhost/dms-data/summary-of-findings', the browser displays Page Not Found T ...

angularapache

Error message: The color shade "100" is not in the color palette. The only available shades are primary, accent, and contrast

I am in the process of upgrading from Angular 12 to 13. Encountering this error, and so far I haven't been able to find a solution for it. Could someone please guide me in the right direction? Here is my package.json file: { "name": &quo ...

csssassangular-materialangular13

Efficiently adjust the width of a child div to automatically fit within

I stumbled upon this fascinating jsfiddle on this website that almost completely addresses my concern, solving up to 90% of it. Check out the JSFiddle Nevertheless, I am keen to incorporate margins within the inner divs. Despite attempting to modify the ...

jqueryhtmlcss

Angular date selection with a range of plus two days, factoring in the exclusion of weekends

I am currently using a mat date picker range with specific logic. The minimum date that a user can select on the calendar is set to + 2 days. For example, if today's date is July 20, 2022, the minimum selectable date would be July 22, 2022. However, ...

javascriptangulartypescript

Adjust the width of your table content to perfectly fit within the designated width by utilizing the CSS property "table width:

Example of a table <table> <tr> <td>Name</td> <td>John</td> <td>Age</td> <td>25</td> <td>Job Title</td> <td>Software Engineer ...

javascriptjqueryhtmlcss

Encountering an error while attempting to load the jQuery script: TypeError - $.fn.appear.run is not a

I have included an animation script for CSS in my markup, but I am encountering the following error: TypeError: $.fn.appear.run is not a function Does anyone know why this is happening and how I can resolve it? /* * CSS3 Animate it * Copyright (c) 2 ...

javascriptjquerycss

Click the link to copy it and then paste the hyperlink

I am facing an issue with copying and pasting file names as hyperlinks. I have checkboxes next to multiple files and a share button. When I check the boxes and click on the share button, I want to copy the download URLs for those files. Although I can succ ...

javascripthtmlangulartypescript

What causes Angular2 to detect both reference changes and primitive changes even when the OnPush flag is enabled?

Take a look at this code snippet import {Component, OnInit, Input, OnChanges, DoCheck, ChangeDetectionStrategy} from 'angular2/core' @Component({ selector: 'child1', template: ` <div>reference change for entire object: { ...

javascripttypescriptangularangular2-changedetection

What can be done to prevent the aspect ratio from being altered?

I am working on creating a parallax effect using a background image that is set to a width of 100% and a height of 700px. I have set the image to have a fixed attachment, but the problem arises when I change the size of the browser window - the picture los ...

htmlcssaspect-ratio

Utilize Google Maps API to showcase draggable marker Latitude and Longitude in distinct TextFields

I am currently utilizing the Google Maps example for Draggable markers. My objective is to showcase the latitude and longitude values within separate TextFields, where the values dynamically change as I drag the marker. Once the user stops dragging the mar ...

phpjavascripthtmlgoogle-mapsdom

Upgrading from Angular 5.2 to 6.0: Facing an issue where angular.json does not replace angular-cli.json

After diligently following the official documentation to upgrade from Angular 5.2 to Angular 6.0 (with the end goal of migrating to Angular 13), I found myself at a standstill. Executing the command NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@6 update @an ...

jsonangularmigrationangular-cli

Enabling the acceptance of blank values within an HTML5 date input field

When using an HTML5 date input for a field that corresponds to a nullable datetime column in the database, how can one avoid setting an empty value in the input field? In my AngularJS application, the ng-model is connected to a scope variable with an init ...

javascriptangularjshtmldate

Tips for adjusting the legend on a chart in chart.js when the text is being truncated

https://i.sstatic.net/5IzUO.png Is there a way to eliminate the extra space on the left and right side of the bar so that the legend can be fully displayed with the entire text? ...

angularchart.jsbar-chart

What is causing the slider image to be the only element that is not adapting to different screen sizes?

I am currently using the flexslider from woothemes and I am unable to understand why the image is consistently wider than the content when the browser window is resized or when viewed on an iPad/iPhone. Upon inspection, I couldn't find any styles on ...

jquerycssresponsive-design