rainbow-loader

Rainbow loader css only

Usage no npm install needed!

<script type="module">
  import rainbowLoader from 'https://cdn.skypack.dev/rainbow-loader';
</script>

README

Rainbow Loader

npm version GitHub

Install

npm i rainbow-loader

Import stylesheet

import "rainbow-loader/css/rainbow-loader.css"

Usage

<div class="rainbow-loader"></div>

Override

You can override .rainbow-loader class in your own css files.

Example to change height to be 100% of parent element instead of a fixed 0.2rem, and to a slower speed :

.rainbow-loader {
    height: 100% !important; /* default is 0.2rem */
    animation-duration: 8s !important; /* default is 2s */
}

Demo

https://codepen.io/oygen/pen/WNeOXXN