¿Cómo hacer una sombra de cuadro con estilo de barra de progreso usando bootstrap?

Las barras de progreso se utilizan para mostrar el progreso de un proceso. La sombra de cuadro con estilo de barra de progreso resalta el progreso del usuario de una tarea/proceso con efecto de sombra de cuadro.

Sintaxis:

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

Valor devuelto: Devuelve la sombra del cuadro con estilo de barra de progreso.

Ejemplo 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=
"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: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>

Producción:

Ejemplo 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=
"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, 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>

Producción:

Compatibilidad con navegadores: Navegadores que admiten la sombra de cuadro con estilo de barra de progreso:

  • explorador de Internet
  • Google Chrome
  • Ópera
  • Firefox
  • Safari

Publicación traducida automáticamente

Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *