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