npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

progress-loader-js

v1.6.0

Published

Progress Loader JS es un paquete versátil, que te permite mostrar una barra de progreso elegante y altamente personalizable para tus aplicaciones web. Añade un toque de profesionalismo y dinamismo a tu sitio con una implementación sencilla y opciones de p

Downloads

16

Readme

Progress Loader JS

npm version GitHub Repo npm

Progress Loader JS es un paquete versátil que permite mostrar una barra de progreso elegante y altamente personalizable en tus aplicaciones web. Con una implementación sencilla y opciones de personalización flexibles, añade un toque de profesionalismo y dinamismo a tu sitio. Ideal para cualquier proyecto que necesite mostrar el progreso de manera atractiva y eficaz.

Casos de uso:

demo

demo

Instalación

$ npm install progress-loader-js --save
$ yarn add progress-loader-js

Ejemplo Práctico utilizando React.js

import { ProgressLoaderContainer } from "progress-loader-js";
import "progress-loader-js/dist/style.css";

function App() {
  const ActivarBarra = () => {
    ProgressLoaderContainer({
      backgroundColor: "#ccc",
      barColor: "#1fb141",
    });
  };

  return (
    <>
      <h1>Progress Loader JS</h1>
      <button onClick={ActivarBarra}>Activar Barra</button>
    </>
  );
}

export default App;

Ejemplo Práctico utilizando Next.js, navegación entre paginas

Ver Código en GitHub

"use client";
import { ProgressLoaderContainer } from "progress-loader-js";
import "progress-loader-js/dist/style.css";

export default function Contacto() {
  ProgressLoaderContainer({
    backgroundColor: "#ccc",
    barColor: "#1fb141",
  });
  return (
    <div>
      <h1>Página de Contacto 😯</h1>
    </div>
  );
}

👉 Ver Código en GitHub

Uso a través de CDN

También puedes incluir progress-loader-js directamente en tu proyecto utilizando un enlace CDN. Sigue estos pasos:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Progress Loader JS</title>
    <!-- Incluir el CSS de loading-request desde CDN -->
    <link rel="stylesheet" href="https://unpkg.com/progress-loader-js/dist/style.css" />
  </head>
  <body>
    <button id="btnLoading">Mostrar Loading</button>

    <script type="module">
      import { ProgressLoaderContainer } from "https://unpkg.com/progress-loader-js/dist/index.js";

      // Función para mostrar el loading
      function handleShowLoading() {
        ProgressLoaderContainer({
          backgroundColor: "lightblue",
          barColor: "green",
        });
      }

      // Asociar la función al botón
      document.querySelector("#btnLoading").addEventListener("click", handleShowLoading);
    </script>
  </body>
</html>

Caracteristicas

  • Fácil implementación: Agrega indicadores de progreso con solo unas líneas de código.
  • Compatible con varios frameworks: Funciona sin problemas en React, Vue, Angular, Next, Svelte y más.
  • Personalización flexible: Ajusta colores del spinner y texto de carga según tus necesidades.
  • Instalación rápida: Se integra fácilmente via npm o yarn en minutos.
  • Soporte para operaciones asíncronas: Ideal para carga de datos y navegación entre páginas.
  • Animaciones suaves: Mejora la experiencia de usuario con animaciones CSS.
  • Eficiencia y rendimiento: Diseñado para impactar mínimamente el rendimiento de la aplicación.
  • Documentación completa: Incluye ejemplos prácticos y guías detalladas.
  • Mantenimiento activo: Actualizaciones frecuentes y mejoras continuas.
  • Licencia abierta: Publicado bajo licencia ISC, apto para uso comercial y personal.

API

ProgressLoaderContainer(options: ProgressLoaderOptions);

Esta función crea y muestra una barra de progreso con opciones personalizables. Por defecto, la barra de progreso se muestra en la parte superior de la página y se oculta automáticamente cuando se completa la carga.

  • Parámetros:

    • Recibe un objeto opcional de tipo ProgressLoaderOptions que contiene las opciones para personalizar la barra de progreso y su fondo. El objeto puede incluir las siguientes propiedades:
      • backgroundColor: Color de fondo de la barra de progreso. Por defecto es #ccc. Si se proporciona, se aplica dinámicamente.
      • barColor: Color de la barra de progreso. Por defecto es #f11946. Si se proporciona, se aplica dinámicamente.
  • Opciones

    • backgroundColor: Color de fondo de la barra de progreso.
    • barColor: Color de la barra de progreso.

Esta función es útil para implementar indicadores de carga visualmente atractivos y personalizables en aplicaciones web.

Como se mencionó antes, ProgressLoaderContainer recibe de forma opcional un objeto con los colores para personalizar la barra de progreso y su fondo. Por defecto, la barra posee como color backgroundColor: #ccc y barColor: #f11946.

Contribuir

Si encuentras algún problema o tienes una idea para mejorar el paquete, por favor abre un issue o envía un pull request en GitHub: https://github.com/urian121/progress-loader-js

Desarrollado por

Copyright

© 2024 Urian Viera. Todos los derechos reservados.

License

Licensed under ISC

GitHub

Agradecimientos

¡Gracias a todos los Devs 👨‍💻 que han utilizado y contribuido al desarrollo de Progress Loader JS! Su apoyo y retroalimentación son fundamentales para mejorar continuamente este paquete.