Wondering what’s next for npm?Check out our public roadmap! »

    qa-spin

    1.0.0 • Public • Published

    qa-spin快应用加载动画库

    一套纯css开发的快应用加载动画库,从SpinKit项目完整适配而来。查看预览效果DEMO

    注意:个别动画用到了position:absolute属性,如果需要正常展示,快应用项目的manifest.json中的minPlatformVersion需要不低于1060

    用法

    提供多种使用用法

    • 使用已经封装好的快应用组件。
    • 直接复制style文件夹下的spin.cssspin.scss或者spin.less到自己的项目中,直接import到需要使用的文件里。

    你可以通过yarn安装qa-spin到你的项目中:

    yarn add qa-spin -S

    或者使用npm:

    npm install qa-spin --save

    使用封装好的加载动画组件

    为了更方便的使用这一组加载动画,已经封装好了一个组件,可以通过快应用组件的方式使用,更加方便通用。也是最推荐的使用方法。下面举例使用方法:

    <import name="spin" src="qa-spin/component/spin.ux"></import>
    <template>
      <spin type="chase" size="120" color="red"></spin>
    </template>
    <script>export default {}</script>

    直接使用样式文件

    在需要使用的ux文件的style标签中引入文件

    <style>
    @import url('path/to/spin.less')
    </style>
    • 使用spin.css

    由于快应用暂不支持css变量,所以此处不推荐直接spin.css文件,因为没法快速统一修改默认的宽度和颜色,当然如果愿意为每个加载覆盖写一些样式也是可以的。

    下面举例使用方法:

    <template>
      <div class="sk-plane"></div>
    </template>
    <script>export default {}</script>
    <style>
    @import url('path/to/spin.css');
      .sk-plane {
        height: 60px;
        width: 60px;
        background-color: red;
      }
    </style>
    • 使用spin.scss

    如果你的快应用项目使用sass作为css 的预处理工具,那么你可以引入spin.scss。scss样式文件定义了两个用于控制加载动画的大小和颜色的变量,分别为$sk-size$sk-color,你可以通过覆盖这两个变量来统一控制加载动画的大小,这种场景下可以在app.ux中引入样式,修改覆盖样式变量,即可在整个应用所有文件中直接使用而不需要重复引入。

    下面举例使用方法:

    <template>
      <div class="sk-plane"></div>
    </template>
    <script>export default {}</script>
    <style lang="scss">
    @import url('path/to/spin.scss');
      $sk-size: 60px;
      $sk-color: red;
    </style>
    • 使用spin.less

    同scss文件一样,这个文件是为你项目使用less作为css预处理工具准备的。less的控制变量为@sk-size@sk-color

    下面举例在app.ux中的使用:

    <script>export default {}</script>
    <style lang="scss">
    @import url('path/to/spin.less');
      @sk-size: 60px;
      @sk-color: red;
    </style>

    动画类型及API

    使用快应用组件的API

    属性 类型 默认值 说明
    type string 'plane' 动画类型
    size number '100' 动画大小
    color string '#333333' 动画颜色

    type值枚举:'plane','chase','bounce','wave','pulse','flow','swing','circle','circle-fade','grid','fold','wander'。

    使用样式文件引入

    Plane

    <div class="sk-plane"></div>

    Chase

    <div class="sk-chase">
      <div class="sk-chase-dot sk-chase-dot-1">
        <div class="sk-chase-dot-before sk-chase-dot-before-1"></div>
      </div>
      <div class="sk-chase-dot sk-chase-dot-2">
        <div class="sk-chase-dot-before sk-chase-dot-before-2"></div>
      </div>
      <div class="sk-chase-dot sk-chase-dot-3">
        <div class="sk-chase-dot-before sk-chase-dot-before-3"></div>
      </div>
      <div class="sk-chase-dot sk-chase-dot-4">
        <div class="sk-chase-dot-before sk-chase-dot-before-4"></div>
      </div>
      <div class="sk-chase-dot sk-chase-dot-5">
        <div class="sk-chase-dot-before sk-chase-dot-before-5"></div>
      </div>
      <div class="sk-chase-dot sk-chase-dot-6">
        <div class="sk-chase-dot-before sk-chase-dot-before-6"></div>
      </div>
    </div>

    Bounce

    <stack class="sk-bounce">
      <div class="sk-bounce-dot"></div>
      <div class="sk-bounce-dot sk-bounce-dot-2"></div>
    </stack>

    Wave

    <div class="sk-wave">
      <div class="sk-wave-rect sk-wave-rect-1"></div>
      <div class="sk-wave-rect sk-wave-rect-2"></div>
      <div class="sk-wave-rect sk-wave-rect-3"></div>
      <div class="sk-wave-rect sk-wave-rect-4"></div>
      <div class="sk-wave-rect sk-wave-rect-5"></div>
    </div>

    Pulse

    <div class="sk-pulse"></div>

    Flow

    <div class="sk-flow">
      <div class="sk-flow-dot"></div>
      <div class="sk-flow-dot sk-flow-dot-2"></div>
      <div class="sk-flow-dot sk-flow-dot-1"></div>
    </div>

    Swing

    <div class="sk-swing">
      <div class="sk-swing-dot sk-swing-dot-1"></div>
      <div class="sk-swing-dot"></div>
    </div>

    Circle

    <div class="sk-circle">
      <div class="sk-circle-dot sk-circle-dot-1">
        <div class="sk-circle-dot-before sk-circle-dot-before-1"></div>
      </div>
      <div class="sk-circle-dot sk-circle-dot-2">
        <div class="sk-circle-dot-before sk-circle-dot-before-2"></div>
      </div>
      <div class="sk-circle-dot sk-circle-dot-3">
        <div class="sk-circle-dot-before sk-circle-dot-before-3"></div>
      </div>
      <div class="sk-circle-dot sk-circle-dot-4">
        <div class="sk-circle-dot-before sk-circle-dot-before-4"></div>
      </div>
      <div class="sk-circle-dot sk-circle-dot-5">
        <div class="sk-circle-dot-before sk-circle-dot-before-5"></div>
      </div>
      <div class="sk-circle-dot sk-circle-dot-6">
        <div class="sk-circle-dot-before sk-circle-dot-before-6"></div>
      </div>
      <div class="sk-circle-dot sk-circle-dot-7">
        <div class="sk-circle-dot-before sk-circle-dot-before-7"></div>
      </div>
      <div class="sk-circle-dot sk-circle-dot-8">
        <div class="sk-circle-dot-before sk-circle-dot-before-8"></div>
      </div>
      <div class="sk-circle-dot sk-circle-dot-9">
        <div class="sk-circle-dot-before sk-circle-dot-before-9"></div>
      </div>
      <div class="sk-circle-dot sk-circle-dot-10">
        <div class="sk-circle-dot-before sk-circle-dot-before-10"></div>
      </div>
      <div class="sk-circle-dot sk-circle-dot-11">
        <div class="sk-circle-dot-before sk-circle-dot-before-11"></div>
      </div>
      <div class="sk-circle-dot sk-circle-dot-12">
        <div class="sk-circle-dot-before sk-circle-dot-before-12"></div>
      </div>
    </div>

    Circle Fade

    <div class="sk-circle-fade">
      <div class="sk-circle-fade-dot sk-circle-fade-dot-1">
        <div class="sk-circle-fade-dot-before sk-circle-fade-dot-before-1"></div>
      </div>
      <div class="sk-circle-fade-dot sk-circle-fade-dot-2">
        <div class="sk-circle-fade-dot-before sk-circle-fade-dot-before-2"></div>
      </div>
      <div class="sk-circle-fade-dot sk-circle-fade-dot-3">
        <div class="sk-circle-fade-dot-before sk-circle-fade-dot-before-3"></div>
      </div>
      <div class="sk-circle-fade-dot sk-circle-fade-dot-4">
        <div class="sk-circle-fade-dot-before sk-circle-fade-dot-before-4"></div>
      </div>
      <div class="sk-circle-fade-dot sk-circle-fade-dot-5">
        <div class="sk-circle-fade-dot-before sk-circle-fade-dot-before-5"></div>
      </div>
      <div class="sk-circle-fade-dot sk-circle-fade-dot-6">
        <div class="sk-circle-fade-dot-before sk-circle-fade-dot-before-6"></div>
      </div>
      <div class="sk-circle-fade-dot sk-circle-fade-dot-7">
        <div class="sk-circle-fade-dot-before sk-circle-fade-dot-before-7"></div>
      </div>
      <div class="sk-circle-fade-dot sk-circle-fade-dot-8">
        <div class="sk-circle-fade-dot-before sk-circle-fade-dot-before-8"></div>
      </div>
      <div class="sk-circle-fade-dot sk-circle-fade-dot-9">
        <div class="sk-circle-fade-dot-before sk-circle-fade-dot-before-9"></div>
      </div>
      <div class="sk-circle-fade-dot sk-circle-fade-dot-10">
        <div class="sk-circle-fade-dot-before sk-circle-fade-dot-before-10"></div>
      </div>
      <div class="sk-circle-fade-dot sk-circle-fade-dot-11">
        <div class="sk-circle-fade-dot-before sk-circle-fade-dot-before-11"></div>
      </div>
      <div class="sk-circle-fade-dot sk-circle-fade-dot-12">
        <div class="sk-circle-fade-dot-before sk-circle-fade-dot-before-12"></div>
      </div>
    </div>

    Grid

    <div class="sk-grid">
      <div class="sk-grid-cube sk-grid-cube-1"></div>
      <div class="sk-grid-cube sk-grid-cube-2"></div>
      <div class="sk-grid-cube sk-grid-cube-3"></div>
      <div class="sk-grid-cube sk-grid-cube-4"></div>
      <div class="sk-grid-cube sk-grid-cube-5"></div>
      <div class="sk-grid-cube sk-grid-cube-6"></div>
      <div class="sk-grid-cube sk-grid-cube-7"></div>
      <div class="sk-grid-cube sk-grid-cube-8"></div>
      <div class="sk-grid-cube sk-grid-cube-9"></div>
    </div>

    Fold

    <div class="sk-fold">
      <div class="sk-fold-cube">
        <div class="sk-fold-cube-before"></div>
      </div>
      <div class="sk-fold-cube sk-fold-cube-2">
        <div class="sk-fold-cube-before sk-fold-cube-before-2"></div>
      </div>
      <div class="sk-fold-cube sk-fold-cube-3">
        <div class="sk-fold-cube-before sk-fold-cube-before-3"></div>
      </div>
      <div class="sk-fold-cube sk-fold-cube-4">
        <div class="sk-fold-cube-before sk-fold-cube-before-4"></div>
      </div>
    </div>

    Wander

    <div class="sk-wander">
      <div class="sk-wander-cube"></div>
      <div class="sk-wander-cube sk-wander-cube-2"></div>
      <div class="sk-wander-cube sk-wander-cube-3"></div>
      <div class="sk-wander-cube sk-wander-cube-4"></div>
    </div>

    Keywords

    none

    Install

    npm i qa-spin

    DownloadsWeekly Downloads

    7

    Version

    1.0.0

    License

    none

    Unpacked Size

    88.3 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar