ariutta-loading
Advanced tools
Comparing version
@@ -0,1 +1,2 @@ | ||
'use strict'; | ||
var fs = require('fs'); | ||
@@ -2,0 +3,0 @@ var insertCss = require('insert-css'); |
{ | ||
"name": "ariutta-loading", | ||
"version": "1.0.0", | ||
"version": "1.0.1", | ||
"description": "Simple loading style CSS", | ||
"main": "index.js", | ||
"scripts": { | ||
"test": "echo \"Error: no test specified\" && exit 1" | ||
"test": "echo \"Error: no test specified\" && exit 1", | ||
"start": "echo 'View demo at http://localhost:3000/demo.html' && simple-server . 3000" | ||
}, | ||
@@ -31,7 +32,26 @@ "browserify": { | ||
"brfs": "^1.4.3", | ||
"deglobalify": "^0.2.0" | ||
"deglobalify": "^0.2.0", | ||
"simple-server": "^1.0.1" | ||
}, | ||
"dependencies": { | ||
"insert-css": "^0.2.0" | ||
}, | ||
"semverBumper": { | ||
"jsonFiles": [ | ||
{ | ||
"filepath": "package.json", | ||
"key": "version" | ||
} | ||
], | ||
"grepOptions": { | ||
"include": [], | ||
"exclude": [], | ||
"excludeDir": [ | ||
"./docs", | ||
"./test", | ||
"./bower_components", | ||
"./lib" | ||
] | ||
} | ||
} | ||
} | ||
} |
@@ -6,3 +6,3 @@ # ariutta-loading | ||
The parent of the element that will contain your content must have the following styles set: | ||
The parent of your content container element must have the following styles set: | ||
@@ -17,4 +17,6 @@ ```css | ||
Then you just need to reference `ariutta-loading.css` from your HTML page and add the class `ariutta-loading` to your content container element: | ||
### Option 1: Add via HTML | ||
Reference `ariutta-loading.css` from your HTML page and add the class `ariutta-loading` to your content container element: | ||
```html | ||
@@ -29,5 +31,5 @@ <!DOCTYPE html> | ||
<body> | ||
<div class="my-element-parent-selector"> | ||
<div style="display: flex; align-items: center; justify-content: center;"> | ||
<div class="ariutta-loading"> | ||
<!-- when your content has loaded, remove the ariutta loading class --> | ||
<!-- when your content has loaded, remove the ariutta-loading class --> | ||
</div> | ||
@@ -40,10 +42,10 @@ </div> | ||
To add via JS, simply require this module: | ||
### Option 2: Add via JS | ||
```js | ||
require('ariutta-loading'); | ||
``` | ||
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 | ||
## Acknowledgments | ||
Thanks to https://github.com/lukehaas/css-loaders for CSS used as starting point. |
Sorry, the diff of this file is not supported yet
15903
10.12%6
20%51
2%48
4.35%3
50%