fgnass / spin.js

A spinning activity indicator
http://spin.js.org
MIT License
9.3k stars 1.02k forks source link

Wordpress admin class collision #335

Closed orionrush closed 6 years ago

orionrush commented 7 years ago

I was working with spin-js in the WordPress admin for a plugin i am developing. It looks like you use the same class as them, (spinner) so spin-js elements are being overridden, and the wordpress gif isn't appearing either. I'm just going to revert to the native solution for simplicity, but in other frameworks you might have collisions. Perhaps prefix it?

<div class="spinner" role="progressbar" style="position: absolute; width: 0px; z-index: 2000000000; left: 50%; top: 50%;">
    <div style="position: absolute; top: -7px; opacity: 0.25; animation: opacity-60-25-0-13 1s linear  infinite;"></div>
    ••••
</div>
xsynaptic commented 6 years ago

The class is configurable, read the docs: http://spin.js.org/

import {Spinner} from 'spin.js';

var opts = {
  className: 'spinner', // The CSS class to assign to the spinner
};

var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);