Skip to content

Commit a48f7e6

Browse files
committed
automatic commit
1 parent a46cdbb commit a48f7e6

File tree

1 file changed

+26
-12
lines changed

1 file changed

+26
-12
lines changed

index.html

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,33 @@ <h2>Features</h2>
8888

8989
<h2>Installation</h2>
9090
<p>
91-
Run <code>npm install spin.js</code> (recommended), or save the spin.js file in your repo.
91+
Run <code>npm install spin.js</code>, or save the spin.js and spin.css files in your repository.
9292
</p>
93+
94+
<h3>JS bundling</h3>
95+
<p>
96+
For best performance and compatibility, it is recommended to use a module bundler such as
97+
<a href="https://parceljs.org/">Parcel</a>, <a href="https://rollupjs.org/">Rollup</a>,
98+
or <a href="https://webpack.js.org/">Webpack</a> to create a production-ready code bundle.
99+
However, in modern browsers it is also possible to directly load the module via a script tag:
100+
</p>
101+
<pre class="prettyprint">
102+
&lt;script type="module" src="node_modules/spin.js/spin.js"&gt;&lt;/script&gt;
103+
</pre>
104+
<p>
105+
If for some reason you can't use ES6 modules or a module bundler, download
106+
<a href="spin.umd.js">spin.umd.js</a> and save it in your repository.
107+
The UMD script can be used as follows:
108+
</p>
109+
<pre class="prettyprint">
110+
var spinner = new Spin.Spinner(opts).spin(target);
111+
</pre>
112+
<p>
113+
Note that the UMD version is only available as a temporary workaround.
114+
Longer term it is recommended to migrate to the standard ES6 module.
115+
</p>
116+
117+
<h3>CSS</h3>
93118
<p>
94119
Load the spin.css file to include the default animation presets.
95120
You could alternatively create a custom CSS keyframe animation (in your own CSS file)
@@ -136,17 +161,6 @@ <h2 id="usage">Usage</h2>
136161
element is passed as argument, the spinner is added as first child and horizontally and vertically centered.
137162
</p>
138163

139-
<h3>Bundling</h3>
140-
<p>
141-
Not all browsers support native ES6 module imports yet, so it is recommended to use a module bundler such as
142-
<a href="https://webpack.js.org/">Webpack</a> or
143-
<a href="https://rollupjs.org/">Rollup</a> to create a production-ready code bundle.
144-
</p>
145-
<p>
146-
If for some reason you can't use ES6 modules or a module bundler, download
147-
<a href="spin.umd.js">spin.umd.js</a> and save it in your repo.
148-
</p>
149-
150164
<h3>Manual insertion</h3>
151165
<p>
152166
In order to manually insert the spinner into the DOM you can invoke the <code>spin()</code> method

0 commit comments

Comments
 (0)