progress-loader-js
Advanced tools
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
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.
$ npm install progress-loader-js --save
$ yarn add progress-loader-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;
"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>
);
}
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>
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:
Opciones
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.
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
© 2024 Urian Viera. Todos los derechos reservados.
Licensed under ISC
¡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.
FAQs
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
We found that progress-loader-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
