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:
<!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
Please Login to comment...