Cartilla CSS Loader Puntos suspensivos animados

Cartilla CSS CSS

Los puntos suspensivos animados indican el estado de carga que informa a los usuarios, es decir, se está procesando una acción en particular y puede tardar un tiempo en completarse.

Clase de puntos suspensivos animados de Primer CSS:

AnimatedEllipsis: esta clase se utiliza para indicar un cargador de puntos suspensivos animados.

Sintaxis:

<span class="AnimatedEllipsis"></span>

Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de los puntos suspensivos animados de Primer CSS.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Animated Ellipsis </title>
  
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <center>
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3> Primer CSS Animated Ellipsis </h3>
          
        <span>Please wait</span>
        <span class="AnimatedEllipsis"></span>
    </center>
</body>
  
</html>

Producción:

Primer CSS Puntos suspensivos animados

Ejemplo 2: El siguiente ejemplo ilustra el uso de los puntos suspensivos animados de Primer CSS utilizando otros elementos diferentes.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Animated Ellipsis </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head>
  
<body>
    <center>
        <h1 class="color-fg-success"> 
            GeeksforGeeks 
        </h1>
        <h3> 
            Primer CSS Animated Ellipsis
        </h3>
        <br> 
        <span class="branch-name">
            <span>
                Component is loading, Please wait</span> 
                <span class="AnimatedEllipsis"></span>
            </span>
        <br>
        <button class="btn btn-outline mt-1">
            <span>Please wait</span>
            <span class="AnimatedEllipsis"></span>
        </button>
        <br> 
        <span class="Label mt-2 " 
              data-color-mode="dark" 
              data-dark-theme="dark">
            <span>Loading</span> 
            <span class="AnimatedEllipsis"></span> 
        </span>
    </center>
</body>
</html>

Producción:

Primer CSS Puntos suspensivos animados

Referencia: https://primer.style/css/components/loaders#animated-ellipsis

Publicación traducida automáticamente

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

HTML

HTML

Deja una respuesta Cancelar la respuesta