Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report
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:
<!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>

                    
Output: Example 2:
<!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>

                    
Output: Browser Support: Browsers which support box shadow with progress bar style:
  • Internet Explorer
  • Google Chrome
  • Opera
  • Firefox
  • Safari


Last Updated : 31 Jul, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads