spinning-progress-indicator-element
A simple spinning loading web component based on macOS one.
📦 Microbundle for exporting .mjs and optimize the output🔎 Uses Typescript for type checking👻 Shadow DOM to not mess with your elements and styles⚖️ less than ~900 bytes gzipped with stylese included💅 🍦 Three flavours black, grey and black- 💁Two sizes available
Installation
If you're using Webpack or Parcel, you could use directly the package:
npm install @midudev/wc-spinning-progress
Also, you could directly use the script using a CDN like unpkg:
<script src="https://unpkg.com/@midudev/[email protected]/dist/spinning-progress.umd.js"></script>
Module version is provided as well:
<script type='module' src="https://unpkg.com/@midudev/[email protected]/dist/spinning-progress.mjs"></script>
Usage
<spinning-progress></spinning-progress>
<spinning-progress size='large'></spinning-progress>
<spinning-progress color='black'></spinning-progress>
<spinning-progress color='black' size='large'></spinning-progress>
<spinning-progress color='white'></spinning-progress>
<spinning-progress color='white' size='large'></spinning-progress>What's next
- Use custom properties instead attributes
- Upgrade to latest microbundle and get everything working
- Move this to a monorepo with more @midudev/wc?
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D