CODEWITHSUNDEEP
htmlcssbootstrap-4
Pritesh Bhoi
Pritesh Bhoi

Reputation: 1096

Progress bar width animation in Bootstrap

I am developing a website in this I am trying to add a progress-bar (animation) style in box-shadow inset using CSS. But it is not done perfectly.

<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>

Image I am trying this strips style in box-shadow inset

Upvotes: 1

Views: 293

Answers (2)

Temani Afif
Temani Afif

Reputation: 273010

Consider background instead of box-shadow then simply adjust the size using 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>

And with animation:

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>

Another kind of animation without transparency and without pseudo element:

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>

Upvotes: 4

supriya suresh g
supriya suresh g

Reputation: 385

May below code help you out

<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>

Upvotes: 1

Related Questions