@@ -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+ <script type="module" src="node_modules/spin.js/spin.js"></script>
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