New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@swup/progress-plugin

Package Overview
Dependencies
Maintainers
3
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@swup/progress-plugin

A swup plugin for displaying a progress bar

  • 3.1.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.7K
decreased by-0.26%
Maintainers
3
Weekly downloads
 
Created
Source

Swup Progress Bar Plugin

A swup plugin for displaying a progress bar.

Shows a loading indicator for requests taking longer than ~300ms.

Installation

Install the plugin from npm and import it into your bundle.

npm install @swup/progress-plugin
import SwupProgressPlugin from '@swup/progress-plugin';

Or include the minified production file from a CDN:

<script src="https://unpkg.com/@swup/progress-plugin@3"></script>

Usage

To run this plugin, include an instance in the swup options.

const swup = new Swup({
  plugins: [new SwupProgressPlugin()]
});

Styling

The progress bar has a class name of swup-progress-bar you can use for styling.

.swup-progress-bar {
  height: 4px;
  background-color: blue;
}

Options

{
  className: 'swup-progress-bar',
  transition: 300,
  delay: 300,
  initialValue: 0.25,
  finishAnimation: true
}

className

Class name to use for the container div.

transition

Length of the CSS transition between loading states, in milliseconds.

delay

How long to wait before showing the progress bar, in milliseconds.

Set to 0 to always display the progress bar, even on fast requests.

initialValue

To create a slightly more "realistic" appearance, the progress bar will start out at a random position beteen 0 and the value of this option. Set to 0 to always start from the left.

finishAnimation

Whether the progress bar will complete the transition to 100% before hiding.

FAQs

Package last updated on 29 Jul 2023

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc