https://github.com/jagjitgill/svg-loading

SVG loading animation library
https://github.com/jagjitgill/svg-loading

animation circle circular infinity loading loading-spinner svg

Last synced: 4 months ago
JSON representation

SVG loading animation library

• Host: GitHub
• URL: https://github.com/jagjitgill/svg-loading
• Owner: jagjitgill
• License: mit
• Created: 2017-05-21T03:43:24.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-08-25T20:07:55.000Z (almost 9 years ago)
• Last Synced: 2026-01-23T02:36:17.520Z (5 months ago)
• Topics: animation, circle, circular, infinity, loading, loading-spinner, svg
• Language: HTML
• Homepage: https://jagjitgill.github.io/svg-loading/
• Size: 2.45 MB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# SVG Loading Animation

SVG based customizable loading animation.

[View demo](http://jagjitgill.ca/code/svg-loading/)

## Install

Download zip from the [GitHub repo][svg-loading] or install via bower, a [client-side code package manager][bower].

```bash

bower install svg-loading

# bower install https://github.com/jagjitgill/svg-loading.git#master

```

Include the required css and the js files:

```html

```

### JS

By default the `` and `` will start the animation on click. All the other containers (`
`, `


` etc.) will start the animation upon initialization.

Initialize the animation:

```js

$(function(){

    // Initialize

    var circularLoading = initializeLoading('.my-class');


    // Stop animation

    circularLoading.triggerSuccess();           // Stop with tick mark

    circularLoading.triggerFail();              // Stop with "x"

    circularLoading.triggerSilentSuccess();     // Fade away

});

```

### Options

#### Status text

1) Via `data` attributes.

```html

        Send

```

2) Via js _(Only success and fail)_

```javascript

circularLoading.triggerSuccess('Action successful');

circularLoading.triggerFail('Action failed');

```

**Position**

The animation can be added on `left`, `right`, `top` or `bottom` of the element. The default value is 'right'. Specific position settings can be passed during initialization. (Use `inline` for paragraphs and divs)

```javascript

var loading = initializeLoading('.my-class', { position: 'bottom' });

```

**Type**

Choose one from 3 available types: `circular`, `circle` and `infinity`. The default value is 'circular'.

```javascript

var loading = initializeLoading('.my-class', { type: 'circle' });

```

**Scale (Inline only)**

Available options: `x1-5`, `x2`, `x2-5` ... `x4`.

```javascript

var loading = initializeLoading('.my-class', { scale: 'x2' });

```

## About

This library is made using [segment](https://lmgonzalves.github.io/segment/) and [classie](https://github.com/desandro/classie). Feel free to use the source code as an example or in any project of your own. 

Found a bug? or an enhancement idea?  Let's _git_ on it.

Inspired by [lmgonzalves](https://x-team.com/blog/creating-loading-buttons-svg-segment/).

![Loading gif](/demo-svg-loading.gif?raw=true)

[svg-loading]: https://github.com/jagjitgill/svg-loading

[bower]: http://bower.io/