sass-loading-spinner
A css only, and sass importable, loading spinner. Been using this for years, and was inspired by an awesome stack overflow answer I could not find again. The project follows BEM naming conventions.
Github Pages Demo. NPM Module Link.
Usage
Install to the project:
npm install --save sass-loading-spinner
Simply import at the top of a sass file to get going:
; // Other Sass down here... Example
Please see the docs folder for a very simple example project that is on the Github Pages.
Here is how the body should be set up to use the loading spinner. I would show each of the elements when determining your "loading" state. Each of these classes can be used independently of one another.
<!-- Overlay for loading spinner --> <!-- Centered Modal for the loading spinner --> <!-- Title for the Modal --> <!-- Anything can be placed inside the modal --> <!-- The loading spinner itself --> <!-- App container element. If you don't have a container, I suggest moving everything in your <body>, into a container that way you can hide it when the loading state occurs. Also, please note, that the sass-loading-spinner__no-click class and aria-hidden attribute should be applied when loading starts, and removed when loading ends. --> If you would like to change the base color of the spinner, you can use the $spinner variable:
Contributing
Clone the project:
git clone https://github.com/torch2424/sass-loading-spinner.git
Install devDependencies:
npm install
Run the command: npm run build, to continuously see changes to the index.html in the docs folder. Sorry, but no livereload or watch is set up for this (Since it's just a simple little package).