How to do box shadow with progress bar style using bootstrap?

Progress bars are used to show the progress of a process. Box shadow with progress bar style highlights the user progress of a task/process with box-shadow effect.

Syntax:

<td style="box-shadow: px px px px rgba()"></td> 

Return Value: It returns box shadow with progress bar style.



Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
  
    <link rel="stylesheet" 
          href=
  
    <script src=
    </script>
  
    <script src=
    </script>
  
    <script src=
    </script>
  
</head>
  
<body>
    <div class="container">
  
        <h1 style="text-align:center;color:green;"
            GeeksforGeeks 
        </h1>
  
        <table>
            <tr>
                <td style=
                  "box-shadow: 4px 2px 2px 5px rgba(0, 255, 0, 0.3);">
                  <span style="font-size:15px; color:green">
                    GeeksforGeeks
                  </span>
  
                </td>
            </tr>
            <tr>
                <td style=
                    "box-shadow:23px 1px 16px rgba(0, 255, 0, 0.3);">
                    <span style="font-size:35px; color:green">
                      GeeksforGeeks
                  </span>
                </td>
            </tr>
      </table>
    </div>
</body>
  
</html>

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
  
    <link rel="stylesheet"
          href=
  
    <script src=
    </script>
  
    <script src=
    </script>
  
    <script src=
    </script>
    <style>
        td {
            background: repeating-linear-gradient(
              70deg, green 0 10px, lightgreen 10px 20px) 0 0/100% 100% no-repeat;
        }
    </style>
</head>
  
<body>
    <div class="container">
  
        <h1 style="text-align:center;color:green;"
            GeeksforGeeks 
        </h1>
  
        <table>
            <tr>
                <td style="  
          box-shadow: 1px 2px 2px 5px rgba(0, 255, 0, 0.3); 
                           background-size:20% 100%;">
                    <span style="font-size:30px ">  20%</span>
                </td>
            </tr>
            <tr>
                <td style="  
          box-shadow: 4px 2px 2px 5px rgba(0, 255, 0, 0.3);
                           background-size:80% 100%;">
                  <span style="font-size:50px; ">  80%</span>
                </td>
            </tr>
        </table>
    </div>
</body>
  
</html>

chevron_right


Output:

Browser Support: Browsers which support box shadow with progress bar style:

  • Internet Explorer
  • Google Chrome
  • Opera
  • Firefox
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.