❤
npm
Sign UpSign In

ariutta-loading

1.0.1 • Public • Published

ariutta-loading

Simple loading style CSS

How To Use

The parent of your content container element must have the following styles set:

.my-element-parent-selector {
  display: flex;
  align-items: center;
  justify-content: center;
}

Option 1: Add via HTML

Reference ariutta-loading.css from your HTML page and add the class ariutta-loading to your content container element:

<!DOCTYPE html>
<html>
 
  <head>
    <link rel="stylesheet" href="ariutta-loading.css">
  </head>
 
  <body>
    <div style="display: flex; align-items: center; justify-content: center;">
      <div class="ariutta-loading">
        <!-- when your content has loaded, remove the ariutta-loading class -->
      </div>
    </div>
  </body>
 
</html>

Option 2: Add via JS

  1. Install: npm install --save ariutta-loading
  2. Require this module: require('ariutta-loading');
  3. Set the ariutta-loading class on your content container element (be sure parent element styles are set as specified above)

Acknowledgments

Thanks to https://github.com/lukehaas/css-loaders for CSS used as starting point.

Readme

Keywords

Package Sidebar

Install

npm i ariutta-loading

Repository

github.com/ariutta/ariutta-loading

Homepage

github.com/ariutta/ariutta-loading#README.md

Weekly Downloads

2

Version

1.0.1

License

Apache-2.0

Last publish

Collaborators

  • jacobwindsor
  • ariutta
  • alexanderpico
  • larsgw
Try on RunKit
Report malware