Animating the width of a progress bar using Bootstrap

Currently, I am working on a website and my goal is to implement a progress bar animation effect within a box-shadow using CSS. However, despite my best efforts, I have not been able to achieve the desired result.

<table>
        <tr>
          <td style="box-shadow: rgb(112, 173, 71) 6px 0px 0px inset;">
            <span style="padding-left:10px;font-size:25px">Style one</span>
          </td>
          <td style="box-shadow: rgb(112, 173, 71) 6px 0px 0px inset;">
            <span style="padding-left:10px;font-size:25px">Style two</span>
          </td>
        </tr>
        <table>

https://i.sstatic.net/DBeef.png I am experimenting with a striped style for the box-shadow inset effect

htmlcssbootstrap-4

Answer №1

Instead of using box-shadow, consider using background and adjust the size with background-size

td {
  background:
    repeating-linear-gradient(45deg,green 0 10px,darkgreen 10px 20px) 0 0/100% 100% no-repeat;
}
<table>
  <tr>
    <td style="background-size:80% 100%;">
      <span style="padding-left:10px;font-size:25px">Style one</span>
    </td>
    <td style="background-size:20% 100%;">
      <span style="padding-left:10px;font-size:25px">Style two</span>
    </td>
  </tr>
  <table>

Add animation to the style:

td {
  position:relative;
  z-index:0;
}
td:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:var(--p);
  background:
    repeating-linear-gradient(45deg,green 0 10px,darkgreen 10px 20px) 0 0/200% 100% no-repeat;
  z-index:-1;
  animation:change 2s linear infinite;
}

@keyframes change {
  to {
    background-position:right;
  }
}
<table>
  <tr>
    <td style="--p:80%;">
      <span style="padding-left:10px;font-size:25px">Style one</span>
    </td>
    <td style="--p:20%;">
      <span style="padding-left:10px;font-size:25px">Style two</span>
    </td>
  </tr>
  <table>

Try another animation technique without transparency and pseudo elements:

td {
  position:relative;
  z-index:0;
  background:
    linear-gradient(#fff,#fff) right/calc(100% - var(--p)) 100% no-repeat,
    repeating-linear-gradient(45deg,green 0 10px,darkgreen 10px 20px) 0 0/200% 100% no-repeat;
  animation:change 2s linear infinite;
}

@keyframes change {
  to {
    background-position:right;
  }
}
<table>
  <tr>
    <td style="--p:80%;">
      <span style="padding-left:10px;font-size:25px">Style one</span>
    </td>
    <td style="--p:20%;">
      <span style="padding-left:10px;font-size:25px">Style two</span>
    </td>
  </tr>
  <table>

Answer №2

Here is a code snippet that could be useful:

<table>
  <tr>
    <td style="  
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;">
      <span style="padding-left:10px;font-size:25px">Style one</span>
    </td>
    <td style="box-shadow: 20px 19px 26px rgb(112, 173, 71)  inset;">
      <span style="padding-left:10px;font-size:25px">Style two</span>
    </td>
  </tr>
<table>

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

Tips for adding a border to a 3D pie chart in Highcharts

I created a 3D pie chart using the Highchart plugin and wanted to add borders to each portion. I tried adding the following code: borderWidth: 4, borderColor: "red" within the plotOptions: pie: section. However, I noticed that the portions were getting b ...

javascriptjqueryhtmlcsshighcharts

Switch up the displayed text according to the user's clicks

After extensive research on the topic, I have come across numerous methods but none that fully meet my requirements. In Typo3, I am attempting to create multiple links that, when clicked, will change the text displayed in a designated area below the links ...

javascriptjqueryhtmlcsstypo3

add .on("mouseover") and .on("mouseout") to a list

I am currently delving into the world of jquery and trying to grasp its concepts. One particular task I am working on involves displaying a random list element phrase upon loading the page. Here's the code snippet along with a link to a live demo on J ...

jqueryhtml

Implementing a click event on a selection option – tips and tricks

When I want to select an option, I can use the following script: Javascript $("#practice-area optgroup option").click(function(){ // insert your function here }); HTML <select name="practice-area" id="practice-area"> <option value="0">S ...

javascriptjqueryhtml

The image disappears when I click on a link and then return to the main page, but this only happens in Mozilla Firefox

Upon opening the main page, everything functions flawlessly. However, if I navigate to another page through one of my href links and then return to the main page, my div with the class "bild" disappears. Oddly enough, this issue only occurs in Mozilla Fire ...

htmlcss

Switch out HTML tags depending on attribute content

In my current project, I am looking to replace all instances of the vanilla <a> tag with a different tag (<router-link>). The challenge lies in applying certain conditions based on the value of the href attribute (for example, it should ignore ...

htmlvue.jswebstormstructural-search

Layout featuring center-aligned fixed-width design with elements stretching across the entire width of the page

How can I create a centered fixed-width layout for my page while also having headings with a background that extends over the whole page, without having to break up the single fixed-width+margin auto div into many separate divs? ...

htmlcss

What is the method to extract the value of $r['id_usr'] from a select tag in PHP and store it in a variable?

Is there a way to retrieve the option value from a select tag using $r['usr_id'] when submitting it in order to utilize that value in a php query? Below is an example of my code : <pre> <div class="form-group"> & ...

phpjqueryhtml

Create a visually stunning CSS3 animation within a specified container, mimicking the style shown in the

I'm currently working on creating the animation depicted in the image below: https://i.stack.imgur.com/W69EQ.jpg My goal is to develop a video slider where, upon clicking a button, the video will seamlessly shift to the right within its parent conta ...

htmlcss

Error encountered during W3 CSS validation: Parsing error

Upon attempting to validate the code snippet below: .cd-stretchy-nav ul a { (line 186) position: relative; display: block; height: 50px; line-height: 50px; padding: 0 calc(1em + 60px) 0 1em; color: white; opacity: 1; fon ...

htmlcss

Developing Wordpress themes with varying H5 tag sizes across different pages

I'm struggling with a puzzling issue while developing a Wordpress theme. When I zoom in to 250% on mobile, all the header text stays the same size on every page except for one. On that particular page, the text appears significantly larger, almost as ...

csswordpressthemes

Exploring the Concepts of Javascript Functions

Currently, I am working on a JavaScript function. The program is causing some confusion for me, particularly with the for loop decrement. Can someone please explain this whole program to me? var socialMediaIcon = { facebook: "http://facebook.com/has ...

javascripthtmlloopsfor-loopfor-in-loop

Develop a form for generating OTPs with input fields appearing separately on screen

I am looking to create a design similar to the one shown in the Image, where a 6-digit one-time password (OTP) is required to be entered by the user. Currently, I have implemented this using 6 separate input fields and then combining the values in Angula ...

jqueryangularjshtmlcss

Vertically centering elements within columns using CSS Grid

I attempted to bring a unique design to life using CSS Grid. While initially exploring Isotope JS for the same layout, I encountered some difficulties. Eventually, I was able to achieve a close representation of the design through CSS grid. There are a to ...

csscss-grid

``There seems to be an issue with the alignment of items in the

I am fairly new to using css and bootstrap and I am currently working on integrating a carousel into my angular web app. I copied the code from the bootstrap site but I am facing challenges in aligning everything properly. Additionally, the image slides do ...

cssbootstrap-4carouselangular-ui-bootstrapbootstrap-carousel

What is the best way to set the exact pixel width for a sidebarPanel?

Is there a way to define the precise width of a sidebarPanel in pixels instead of using the width argument? I have found that the width option is not precise enough for my needs. library(shiny) ui <- fluidPage( sidebarLayout( sidebarPanel(widt ...

cssrshiny

How can you insert text onto a page with restricted space?

As I work on my web page, I find myself restricted by a character limit of 10,000. This limitation is proving to be quite challenging for me. The tabs on the page I am editing are divided with div ID, and all my writing already takes up 80% of the charact ...

htmlcssembed

Is there a way to lead to a password-protected page without making it accessible through the URL?

I'm currently honing my skills in web development and embarking on a project to create an interactive puzzle website. The premise is simple - the homepage will feature just an answer input field where users can enter the correct solution to progress t ...

javascriptphphtml

A search bar with an icon using Bootstrap

I'm facing a dilemma here because Bootstrap 4 no longer supports glyphicons. Should I set up the icon as a background or try a different approach with font-awesome icons? Here's the current state of my code: <link rel="stylesheet" href="ht ...

csstwitter-bootstrapbootstrap-4font-awesome

I would like to implement a delay on this button so that when it is clicked, there is a pause before navigating

When I add the delay, it doesn't work, and when I remove it, it does. What can I do to make this button have a href link that delays before redirecting to another page? (I'm a newbie) I need to click and wait 3 seconds before navigating to other ...

javascripthtmljquerycss