前言
随着互联网技术的不断发展，前端工程化越来越成为网站开发的必经之路。npm作为前端开发者不可或缺的包管理工具，其生态圈中的第三方包也越来越丰富。@granite-elements/granite-spinner就是其中之一，本文将会详细介绍它的使用方法。
什么是@granite-elements/granite-spinner
@granite-elements/granite-spinner是一个基于web components技术的loading加载图标组件。它可以很好地帮助前端开发者减少开发loading组件的时间和工作量，同时它还有很强的扩展性和自定义性。
安装和使用
安装
@granite-elements/granite-spinner可以通过npm安装：
npm i @granite-elements/granite-spinner -S
使用
使用@granite-elements/granite-spinner非常简便，只需要在HTML中添加下面的代码即可：
<granite-spinner></granite-spinner>
如需从js中控制@granite-elements/granite-spinner的样式和属性，则需要使用JavaScript API：
const spinner = document.querySelector('granite-spinner');
spinner.color = 'red'; //设置组件的颜色此外，@granite-elements/granite-spinner还支持众多自定义属性，可通过以下代码进行实现：
<granite-spinner color="red" size="small"></granite-spinner>
自定义loading图标
@granite-elements/granite-spinner支持自定义loading图标，只需要在组件元素内添加svg文件即可。例如，以下代码添加了一个名为"custom-icon.svg"的svg图片作为loading图标：
<granite-spinner>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
<circle cx="12" cy="12" r="9" stroke-width="3" stroke="#ff0000" stroke-linecap="round" fill="none" stroke-dasharray="42.411500823462205,14.137167374487402" transform="rotate(360 12 12)">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="0.8928571428571428s" keyTimes="0;1" values="0 12 12;360 12 12"></animateTransform>
</circle>
</svg>
</granite-spinner>总结
本文介绍了@granite-elements/granite-spinner的安装和使用方法，并且详细说明了如何进行自定义样式和自定义loading图标。希望本文能够对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e9d9381d61a3540be4