Posted By
Bajarangi soft ,
Posted On 12-10-2020
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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1 style="text-align:center;color:#d4792a;">
BAJARANGI SOFT
</h1>
<table>
<tr>
<td style=
"box-shadow: 4px 2px 2px 5px rgba(234,92,67,0.3);">
<span style="font-size:15px; color:#801e00">
BAJARANGI SOFT
</span>
</td>
</tr>
<tr>
<td style=
"box-shadow:23px 1px 16px rgba(234,105,82,0.3);">
<span style="font-size:35px; color:#ee270d">
BAJARANGI SOFT
</span>
</td>
</tr>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
td {
background: repeating-linear-gradient(
70deg, #f13414 0 10px, #f36255 10px 20px) 0 0/100% 100% no-repeat;
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align:center;color:#f34b18;">
BAJARANGI SOFT
</h1>
<table>
<tr>
<td style="
box-shadow: 1px 2px 2px 5px rgba(219,88,65,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(243,137,137,0.3);
background-size:80% 100%;">
<span style="font-size:50px; ">80%</span>
</td>
</tr>
</table>
</div>
</body>
</html>