https://github.com/lonr/browser-logo-spinner

browser logos as spinners
https://github.com/lonr/browser-logo-spinner

spinner

Last synced: about 2 months ago
JSON representation

browser logos as spinners

• Host: GitHub
• URL: https://github.com/lonr/browser-logo-spinner
• Owner: lonr
• License: mit
• Created: 2021-03-01T14:46:04.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-03-06T02:09:41.000Z (almost 4 years ago)
• Last Synced: 2024-10-13T11:20:34.985Z (3 months ago)
• Topics: spinner
• Language: TypeScript
• Homepage: https://lonr.github.io/browser-logo-spinner
• Size: 5.21 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# browser-logo-spinner

Use browser logos as spinners!

![chrome](./assets/infinite-loop/chrome.svg)

![edge](./assets/infinite-loop/edge.svg)

![firefox](./assets/infinite-loop/firefox.svg)

![opera](./assets/infinite-loop/opera.svg)

![safari](./assets/infinite-loop/safari.svg)

## Installation

```bash

yarn add @lonr/browser-logo-spinner

```

## Usage

This package provides several specific elements (e.g. ``) and a `` element which auto detects the visitor's UA and chooses one logo

```html

  

    

    Usage

    

  

  

    

    

  

```

`spinner.setAttribute('loading', '')` or `spinner.loading = true` to mark the spinner loading. The spinner will wait for `delay`(defaults to `200`ms) and then starting spinning

Then `spinner.removeAttribute('loading')` or `spinner.loading = false` to mark the spinner loaded. The spinner will speed up(controlled by `faster-rate`; defaults to `2`) and stop at the end of the current iteration

You should at least size the element or one of it's parent elements

You probably want to set an initial `loading` attribute

```html

```

There is also a [storybook](https://lonr.github.io/browser-logo-spinner) playground

## Limitations

The Opera spinner is broken in Firefox and Safari

Higher CPU usage