Git Product home page Git Product logo

vue-loading's Introduction

vue-loading-template


Use SVG for loading.

Demo: https://jkchao.github.io/vue-loading/

Start

npm install vue-loading-template --save

Options

Prop Type Required Default Available values
type String false balls balls, bars, beat, bubbles, cylon, spin, spiningDubbles, barsCylon
color String false #5ac1dd
size Object false { width: '30px', height: '30px' }

Example in SPA

 <template>
    <div>
       <h2>bars</h2>
       <vue-loading type="bars" color="#d9544e" :size="{ width: '50px', height: '50px' }"></vue-loading>    
    </div>
 </template>
  <script>
  import { VueLoading } from 'vue-loading-template'
  export default {
    name: 'app',
    components: {
      VueLoading
    }
  }
  </script>

Or you can install it in your main.js

// main.js
import Vue from 'vue'
import VueLoading from 'vue-loading-template'
Vue.use(VueLoading, /** options **/)

If you use it in TypeScript, you can:

// main.ts
import Vue from 'vue'
import vueLoading, { VueLoadingOptions } from 'vue-loading-template'

Vue.use<VueLoadingOptions>(VueLoading, /** options **/)

so, you will receive the tip about optional options.

License

MIT

vue-loading's People

Contributors

dannyfeliz avatar jkchao avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-loading's Issues

Request for description of frequently used cases

I would like to display loading over objects such as a list, but it was not written in the readme.md or sample source.
I think this case is often used, so I would like to see how to write a reference in readme.md or sample source for such a common case.

关于打包后文件体积问题

你好,我看到打包后的压缩文件也有 35kb 左右的大小,那是包括了 vue-property-decorator 依赖的吗?对于一个普通的组件,好像稍微大了点?这有什么好的处理方式吗?

Position

  1. How can I show spinner in middle (center) of screen?
  2. How to use loading on pages without dynamic data?
    Example
    Main page or login/register pages, there are no dynamic data to use v-if/v-show i just want to show loading before page elements load.

感谢开源,有一个问题,频繁展示会有 [Vue warn]: $attrs is readonly.

[Vue warn]: $attrs is readonly.

found in

---> at Loading.vue



warn @ build.js:125547
build.js:125547 [Vue warn]: $listeners is readonly.

found in

---> at Loading.vue



warn @ build.js:125547
build.js:125547 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "size"

found in

---> at Loading.vue


How Can I render it stopped?

We want to use this spinner but having the possibility to have it "Stopped". So when a process waith appear the balls but does not animate. Later when running the process it starts to moves.

Do you think is possible?

Component not rendering on the screen

I'm not sure what exactly I am doing wrong. I tried the global installation and the component level installation, and I cannot get anything to appear on the screen.

Is this just me? I'm confused.

vue-loading-template无法渲染

在APP.vue中使用
import VueLoading from 'vue-loading-template'
导入
components: {
VueLoading
}
然后在模板中使用,在浏览器中找不到对应loading图标

没有关闭方法,是否考虑添加一个

这是一个很棒的组件,内置了很多漂亮的loading
但是没有发现关闭的方法,是否考虑添加一个,或者添加一个控制显示关闭的prop属性,或者是显示关闭的事件监听等等
因为loading是根据产品需要来显示和隐藏的,所以我想这个比较重要

我尝试在引用时添加hide属性,结果发现vue并不允许这么做,当然也或许是我用法有问题😂

VueJs2 template or render function not defined

The loading bar is not showing and I get this error in the console. I am using VueJs2 + webpack

vue.esm.js?efeb:591 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <VueLoading>
       <Campaigns> at src/components/Campaigns.vue
         <App> at src/App.vue
           <Root>

Styles

How I can change the styles of the component?
I want the blue dotted style!

UglifyJs error

I got this error by running yarn build

ERROR in static/js/account~agents~app-view~apps-list~finance~settings.f31e64a4.js from UglifyJs
Unexpected token: name (i) [./node_modules/vue-loading-template/dist/vueLoading.common.js:1029,0][static/js/account~agents~app-view~apps-list~finance~settings.f31e64a4.js:1034,6]

show loading while sending request

I want to show loading when user is waiting for request to get answer from server,

explanation

Example User hit login button and sometimes it takes time for server to respond whether login the user or show an error. during that time i want show loading so user knows his/her click on the button already took the place and just have to be patience.

How can I do that?

Sample code

Please take this code as sample and help me to do what I want to do with it

methods: {
            handleSubmit(e) {
                e.preventDefault()
                if (this.password.length > 0) {
                    let email = this.email
                    let password = this.password

                    axios.post('api/auth/login', {email, password}).then(response => {
                        let user = response.data.user
                        let is_admin = user.is_admin
                        
                        localStorage.setItem('myApp.user', JSON.stringify(user))
                        localStorage.setItem('myApp.jwt', response.data.token)

                        if (this.$route.params.nextUrl != null) {
                            this.$router.push(this.$route.params.nextUrl)
                        } else {
                            this.$router.push((is_admin == 1 ? 'administrator' : '/'))
                        }
                    });
                }
            }
        }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.