Precargador de CSS de Materialise

Posted on by Rudeus Greyrat

Los precargadores se utilizan para proporcionar mensajes simbólicos que informan a los usuarios sobre el estado del sitio web, como «Cargando» o «No bloqueado». Materialise proporciona clases de CSS para dar varios tipos de precargadores. Las siguientes son las clases disponibles proporcionadas por Materialise CSS.

Lineal: identifica un elemento como una clase de barra de progreso requerida para el elemento «div». Hay dos tipos diferentes de barras de progreso lineales.

  • Determinado: proporciona la función básica de materializar al indicador de progreso. 
    <div class="progress">
    <div class="determinate" style="width: 70%"></div>
</div>
  • Indeterminado: Proporciona animación al indicador de progreso. 
    <div class="progress">
    <div class="indeterminate"></div>
</div>

    • Circular: En circular, hay 4 colores y 3 tamaños. El spinner debe anidarse en un envoltorio de precarga «div». El tamaño predeterminado es mediano , pero se pueden agregar clases grandes o pequeñas para ajustar el tamaño en consecuencia. Puede agregar las clases spinner-red-only, spinner-blue-only, spinner-yellow-only y spinner-green-only , si desea mostrar un color.

<div class="preloader-wrapper big active">
    <div class="spinner-layer spinner-blue-only">
        <div class="circle-clipper left">
            <div class="circle"></div>
        </div>
        <div class="gap-patch">
            <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
            <div class="circle"></div>
        </div>
    </div>
</div>

<div class="preloader-wrapper active">
    <div class="spinner-layer spinner-red-only">
        <div class="circle-clipper left">
            <div class="circle"></div>
        </div>
        <div class="gap-patch">
            <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
            <div class="circle"></div>
        </div>
    </div>
</div>

<div class="preloader-wrapper small active">
    <div class="spinner-layer spinner-green-only">
        <div class="circle-clipper left">
            <div class="circle"></div>
        </div>
        <div class="gap-patch">
            <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
            <div class="circle"></div>
        </div>
    </div>
</div>

Colores intermitentes circulares: son los mismos que los circulares, excepto que utiliza los cuatro colores proporcionados por materialise durante su visualización.

<div class="preloader-wrapper big active">
    <div class="spinner-layer spinner-blue">
        <div class="circle-clipper left">
            <div class="circle"></div>
        </div>
        <div class="gap-patch">
            <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
            <div class="circle"></div>
        </div>
    </div>

    <div class="spinner-layer spinner-red">
        <div class="circle-clipper left">
            <div class="circle"></div>
        </div>
        <div class="gap-patch">
            <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
            <div class="circle"></div>
        </div>
    </div>

    <div class="spinner-layer spinner-yellow">
        <div class="circle-clipper left">
            <div class="circle"></div>
        </div>
        <div class="gap-patch">
            <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
            <div class="circle"></div>
        </div>
    </div>

    <div class="spinner-layer spinner-green">
        <div class="circle-clipper left">
            <div class="circle"></div>
        </div>
        <div class="gap-patch">
            <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
            <div class="circle"></div>
        </div>
    </div>
</div>

Ejemplo: El siguiente ejemplo muestra el uso de todas las clases de precargador anteriores.

HTML

<!DOCTYPE html>
<html>
  
<head>
  <!--Import Google Icon Font-->
  <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet">
  
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  
  <script type="text/javascript" src=
    "https://code.jquery.com/jquery-2.1.1.min.js">
  </script>
  
  <!-- Compiled and minified JavaScript -->
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
  </script>
    
  <!--Let browser know website is
      optimized for mobile-->
  <meta name="viewport" content=
    "width=device-width, initial-scale=1.0" />
</head>
  
<body>
  <!-- Preloader determinate -->
  <div class="card-panel">
    <h3>Linear Determinate</h3>
    <div class="progress blue lighten-4">
      <div class="determinate green" style="width: 70%"></div>
    </div>
  </div>
  <!-- Preloader Indeterminate -->
  <div class="card-panel">
    <h3>Linear Indeterminate</h3>
    <div class="progress yellow lighten-3">
      <div class="indeterminate green" style="width: 70%"></div>
    </div>
  </div>
  <!-- Preloader Circular -->
  <div class="card-panel">
    <h3>Circular Preloader</h3>
    <div class="row">
      <div class="col s4">
        <div class="preloader-wrapper active">
          <div class="spinner-layer spinner-green-only">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="col s4">
        <div class="preloader-wrapper big active">
          <div class="spinner-layer spinner-green-only">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="col s4">
        <div class="preloader-wrapper small active">
          <div class="spinner-layer spinner-green-only">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Preloader circular Flashing colors -->
  
  <div class="card-panel">
    <h3>Preloader Circular Flashing Colors</h3>
    <div class="row">
      <div class="col s4">
        <div class="preloader-wrapper active">
          <!-- spinner-blue -->
          <div class="spinner-layer spinner-blue">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
          <!-- spinner-red -->
          <div class="spinner-layer spinner-red">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
          <!-- spinner-yellow -->
          <div class="spinner-layer spinner-yellow">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
          <!-- spinner-green -->
          <div class="spinner-layer spinner-green">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="col s4">
        <div class="preloader-wrapper big active">
          <!-- spinner-blue -->
          <div class="spinner-layer spinner-blue">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
          <!-- spinner-red -->
          <div class="spinner-layer spinner-red">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
          <!-- spinner-yellow -->
          <div class="spinner-layer spinner-yellow">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
          <!-- spinner-green -->
          <div class="spinner-layer spinner-green">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="col s4">
        <div class="preloader-wrapper small active">
          <!-- spinner-blue -->
          <div class="spinner-layer spinner-blue">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
          <!-- spinner-red -->
          <div class="spinner-layer spinner-red">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
          <!-- spinner-yellow -->
          <div class="spinner-layer spinner-yellow">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
          <!-- spinner-green -->
          <div class="spinner-layer spinner-green">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por tanvi_gupta 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 *