a vue component about toy bricks of skeleton screen loading

Related tags

Loader tb-skeleton
Overview

tb-skeleton

a vue component about toy bricks of skeleton screen loading

install

$ npm i tb-skeleton -s

use npm

  import Vue from 'vue'
  import skeleton from 'tb-skeleton'
  import  'tb-skeleton/dist/skeleton.css'
  Vue.use(skeleton)

use cdn

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tb-skeleton.min.js"></script>
<link ref="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/skeleton.css"></script>

live example

simple demo, page demo

start

<template>
  <div width="20%">
    <tb-skeleton :aspect-ratio="1" :theme="opacity" :shape="circle" bg-color="#dcdbdc"></tb-skeleton>
  </div>
</template>
<script>
</script>

use skeleton

use skeleton component, you can set common props

<template>
  <div>
    <skeleton :theme="opacity" :shape="radius" :bg-color="#dcdbdc">
     <tb-skeleton  width="30%" :aspect-ratio="1"  :shape="circle" bg-color="#eee"></tb-skeleton>
     <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>
     <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>
   </skeleton>
  </div>
</template>
<script>
  import {TbSkeleton,Skeleton} from 'tb-skeleton'
  export default {
    components: {
      TbSkeleton,
      Skeleton
    }
  }
</script>

use grid layout

about grid layout,please see simple-grid

<template>
<skeleton theme="opacity" style="width:200px" shape="radius" bg-color="#dcdbdc">
    <row>
      <col :span="8">
        <tb-skeleton :aspect-ratio="1" shape="circle">
        </tb-skeleton>
      </col>
      <col :span="16">
        <row>
          <col :span="12" style="padding-left: 10px;margin-top: 5px">
            <tb-skeleton :aspect-ratio="0.2"></tb-skeleton>
          </col>
          <col :span="24" style="padding-left: 10px;margin-top: 10px">
            <tb-skeleton :aspect-ratio="0.1"></tb-skeleton>
          </col>
          <col :span="24" style="padding-left: 10px;margin-top: 10px">
            <tb-skeleton :aspect-ratio="0.1"></tb-skeleton>
          </col>
        </row>
      </col>
    </row>
  </skeleton>
</template>
<script>
  import {Col,Row} from 'simple-grid'
  import {TbSkeleton,Skeleton} from 'tb-skeleton'
  export default {
    components: {
      tb-skeleton,
      skeleton,
      Col,
      Row
    }
  }
</script>

skeleton Component

props

param description type default
theme opacity,gradient,flex-outer,flex-inner, normal String normal
shape tb-skeleton shape, circlerectradius String
bgColor tb-skeleton background-color String
duration tb-skeleton animation duration String,Number

tb-skeleton Component

props

param description type default
theme the same as skeleton theme String normal
shape the same as skeleton shape String rect
bgColor the same as skeleton bgColor String
aspectRatio ratio about width,height Number
height the tb-skeleton height Number,String
width the tb-skeleton width Number,String 100%
duration the tb-skeleton animation duration String,Number
You might also like...
Youtube Like Loading Bar Component for Vue.js

vue-loading-bar Loading Bar Component for Vue.Js DEMO Need Vue 2 Version? Click Here... Intro Vue Loading Bar is a Youtube like loading bar component

Vue component to easily build (or use presets) SVG loading cards Facebook like.
Vue component to easily build (or use presets) SVG loading cards Facebook like.

Vue component to easily build (or use presets) SVG loading cards Facebook like.

Vue 3 infinity loading component

vue-eternal-loading Infinity loading component written on TypeScript for Vue 3, based on IntersectionObserver. No dependencies. Features: 4 directiona

An vuejs loading component ☄️
An vuejs loading component ☄️

An vuejs loading component ☄️

Vuegister is a require hook for loading of the Vue.js single-file components (or *.vue files).

vuegister About Vuegister (a portmanteau for vue-register) is a require hook for loading of the Vue.js single-file components (or *.vue files). The ma

A StealJS plugin for loading Vue.js Single File Components (.vue)

StealJS plugin for Vue.js Single File Components. Steal (StealJS) is a module loader with sane defaults. With the steal-vue plugin, Steal can bundle V

Vue-simple-loading: Fork styles from tobiasahlin/SpinKit and built it for vue

vue-simple-loading Thanks for tobiasahlin/SpinKit. The css3 animation is copied from it. All the things I do is built it as a vue component. This proj

Progress bars and loading indicators for Vue.js
Progress bars and loading indicators for Vue.js

vue-progress-path Progress bars and loading indicators that can take any form! This library is Work In Progress. Live Demo Sponsors Gold Silver Bronze

👇 Vue button with slideout loading indicator
👇 Vue button with slideout loading indicator

vue-loading-button Straightforward Vue button with slideout loading indicator Props Prop Type Required Default Description loading boolean false false

Comments
  • Bump postcss from 7.0.2 to 8.2.10

    Bump postcss from 7.0.2 to 8.2.10

    Bumps postcss from 7.0.2 to 8.2.10.

    Release notes

    Sourced from postcss's releases.

    8.2.10

    8.2.9

    8.2.8

    8.2.7

    8.2.6

    • Fixed Maximum call stack size exceeded in Node#toJSON.
    • Fixed docs (by @​inokawa).

    8.2.5

    • Fixed escaped characters handling in list.split (by @​nex3).

    8.2.4

    8.2.3

    8.2.2

    8.2.1

    • Fixed Node#toJSON() and postcss.fromJSON() (by @​mischnic).

    8.2 “Prince Orobas”

    PostCSS 8.2 added a new API to serialize and deserialize CSS AST to JSON.

    import { parse, fromJSON } from 'postcss'
    

    let root = parse('a{}', { from: 'input.css' }) let json = root.toJSON() // save to file, send by network, etc let root2 = fromJSON(json)

    ... (truncated)

    Changelog

    Sourced from postcss's changelog.

    8.2.10

    • Fixed ReDoS vulnerabilities in source map parsing.
    • Fixed webpack 5 support (by Barak Igal).
    • Fixed docs (by Roeland Moors).

    8.2.9

    • Exported NodeErrorOptions type (by Rouven Weßling).

    8.2.8

    • Fixed browser builds in webpack 4 (by Matt Jones).

    8.2.7

    • Fixed browser builds in webpack 5 (by Matt Jones).

    8.2.6

    • Fixed Maximum call stack size exceeded in Node#toJSON.
    • Fixed docs (by inokawa).

    8.2.5

    • Fixed escaped characters handling in list.split (by Natalie Weizenbaum).

    8.2.4

    • Added plugin name to postcss.plugin() warning (by Tom Williams).
    • Fixed docs (by Bill Columbia).

    8.2.3

    • Fixed JSON.stringify(Node[]) support (by Niklas Mischkulnig).

    8.2.2

    • Fixed CSS-in-JS support (by James Garbutt).
    • Fixed plugin types (by Ludovico Fischer).
    • Fixed Result#warn() types.

    8.2.1

    • Fixed Node#toJSON() and postcss.fromJSON() (by Niklas Mischkulnig).

    8.2 “Prince Orobas”

    • Added Node#toJSON() and postcss.fromJSON() (by Niklas Mischkulnig).

    8.1.14

    • Fixed parser performance regression.

    8.1.13

    • Fixed broken AST after moving nodes in visitor API.

    8.1.12

    • Fixed Autoprefixer regression.

    8.1.11

    • Added PostCSS update suggestion on unknown event in plugin.

    ... (truncated)

    Commits
    • 8395d9f Release 8.2.10 version
    • f2baaa7 Update ESLint config
    • b6f3e4d Fix unsafe regexp in getAnnotationURL() too
    • 4bcd727 Merge pull request #1553 from barak007/patch-2
    • 7c2e97a Add covrage ignore on error paths
    • 8c58434 Apply suggestions from code review
    • ff2fd57 add error for sourcePath
    • 8f02bdc disable url based features
    • a54d020 Fix browser bundling with webpack 5
    • 8682b1e Fix unsafe regexp
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump node-sass from 4.9.2 to 4.13.1

    Bump node-sass from 4.9.2 to 4.13.1

    Bumps node-sass from 4.9.2 to 4.13.1.

    Release notes

    Sourced from node-sass's releases.

    v4.13.1

    Community

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    OSX x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    Linux* x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8**, 9**, 10**^, 11**^, 12**^, 13**^
    Alpine Linux x64 6, 8, 10, 11, 12, 13
    FreeBSD i386 amd64 8, 10, 12, 13

    *Linux support refers to Ubuntu, Debian, and CentOS 5+ ** Not available on CentOS 5 ^ Only available on x64

    v4.13.0

    Features

    Community

    Dependencies

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    OSX x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    Linux* x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8**, 9**, 10**^, 11**^, 12**^, 13**^
    Alpine Linux x64 6, 8, 10, 11, 12, 13
    FreeBSD i386 amd64 6, 8, 10, 12, 13

    *Linux support refers to Ubuntu, Debian, and CentOS 5+

    Changelog

    Sourced from node-sass's changelog.

    v4.13.1

    https://github.com/sass/node-sass/releases/tag/v4.13.1

    v4.13.0

    https://github.com/sass/node-sass/releases/tag/v4.13.0

    v4.12.0

    https://github.com/sass/node-sass/releases/tag/v4.12.0

    v4.11.0

    https://github.com/sass/node-sass/releases/tag/v4.11.0

    v4.10.0

    https://github.com/sass/node-sass/releases/tag/v4.10.0

    v4.9.4

    https://github.com/sass/node-sass/releases/tag/v4.9.4

    v4.9.3

    https://github.com/sass/node-sass/releases/tag/v4.9.3

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump node-sass from 4.9.2 to 7.0.0

    Bump node-sass from 4.9.2 to 7.0.0

    Bumps node-sass from 4.9.2 to 7.0.0.

    Release notes

    Sourced from node-sass's releases.

    v7.0.0

    Breaking changes

    Features

    Dependencies

    Community

    • Remove double word "support" from documentation (@​pzrq, #3159)

    Misc

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 12, 14, 16, 17
    OSX x64 12, 14, 16, 17
    Linux* x64 12, 14, 16, 17
    Alpine Linux x64 12, 14, 16, 17
    FreeBSD i386 amd64 12, 14

    *Linux support refers to major distributions like Ubuntu, and Debian

    v6.0.1

    Dependencies

    Misc

    Supported Environments

    ... (truncated)

    Changelog

    Sourced from node-sass's changelog.

    v4.14.0

    https://github.com/sass/node-sass/releases/tag/v4.14.0

    v4.13.1

    https://github.com/sass/node-sass/releases/tag/v4.13.1

    v4.13.0

    https://github.com/sass/node-sass/releases/tag/v4.13.0

    v4.12.0

    https://github.com/sass/node-sass/releases/tag/v4.12.0

    v4.11.0

    https://github.com/sass/node-sass/releases/tag/v4.11.0

    v4.10.0

    https://github.com/sass/node-sass/releases/tag/v4.10.0

    v4.9.4

    https://github.com/sass/node-sass/releases/tag/v4.9.4

    v4.9.3

    https://github.com/sass/node-sass/releases/tag/v4.9.3

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump postcss from 7.0.2 to 7.0.36

    Bump postcss from 7.0.2 to 7.0.36

    Bumps postcss from 7.0.2 to 7.0.36.

    Release notes

    Sourced from postcss's releases.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by @​emzoumpo).

    7.0.30

    • Fix TypeScript definition (by @​nex3)

    7.0.29

    • Update Processor#version.

    7.0.28

    • Fix TypeScript definition (by @​nex3).

    7.0.27

    • Fix TypeScript definition (by @​nex3).

    7.0.26

    • Fix TypeScript definition (by @​nex3)

    7.0.25

    • Fix absolute path support for Windows (by @​tomrav)

    7.0.24

    7.0.23

    • Update Processor#version.

    7.0.22

    • Add funding link for npm fund.

    7.0.21

    • Revert passing nodes property to node constructor.

    7.0.20

    • Allow to pass PostCSS’s nodes in nodes property to node constructor.

    ... (truncated)

    Changelog

    Sourced from postcss's changelog.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    • Add migration guide link to PostCSS 8 error text.

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    • Add migration guide link to PostCSS 8 error text.

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by Emmanouil Zoumpoulakis).

    7.0.30

    • Fix TypeScript definition (by Natalie Weizenbaum).
    Commits
    • 67e3d7b Release 7.0.36 version
    • 54cbf3c Backport ReDoS vulnerabilities from PostCSS 8
    • 12832f3 Release 7.0.35 version
    • 4455ef6 Use OpenCollective in funding
    • e867c79 Add migration guide to PostCSS 8 error
    • 32a22a9 Release 7.0.34 version
    • 2293982 Lock build targets
    • 2c3a111 Release 7.0.33 version
    • 4105f21 Use yaspeller instead of yaspeller-ci
    • c8d02a0 Revert yaspeller-ci removal
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
zhoulin
believe yourself, be a good coder
zhoulin
Vue.js component for full screen loading indicator :cyclone:

Vue Loading Overlay Component Vue.js component for full screen loading indicator Demo or JSFiddle Installation # yarn yarn add vue-loading-overlay #

Ankur Kumar 1.1k Sep 27, 2022
BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen.

vue-blockui BlockUI for vue 2, similiar to jquery blockUI, can be used for loading screen. Table of contents Installation Usage Demo Screens Installat

Jeff 57 Apr 6, 2022
⏳ Loading inside a container or full screen for Vue.js

vue-element-loading ⏳ Loading inside a container or full screen for Vue.js ?? Document & Demo Page Docs & Live demo Fully feature live demo ?? Install

Pongsatorn 312 Sep 4, 2022
A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

A text loading component for Vue.js. Uses SVG and javascript to animate a text loading with a gradient.

null 1 Aug 3, 2020
SVG component to create placeholder loading, like Facebook cards loading.

SVG component to create placeholder loading, like Facebook cards loading.

EGOIST 2.9k Sep 29, 2022
Data loading animation component for VueJS, inspired by video games loading screens.

Data loading animation component for VueJS, inspired by video games loading screens.

null 0 Sep 1, 2020
The Ultimate fully-customizable plugin for skeleton cards in Vue. It's a no-brainer.

Vue Ultimate Skeleton Cards Check out the guide and demo for full information. This is just an overview. Note: This version is for Vue 2. A new versio

Neelansh Mathur 85 Sep 18, 2022
A simple and easily customizable skeleton loader plugin for you Vue application.

skeleton-loader-vue Loader showing skeleton view while data is being loaded to improve UX. ?? Installation npm: npm install skeleton-loader-vue --save

Abdulqudus Abubakre 72 Sep 16, 2022
Vue-loading - Vue Placeholder loading Content With Image,Table,Status

Vue Loading Project setup npm install Compiles and hot-reloads for development

Vũ Đức Việt 3 Jan 30, 2022
Vue-ac-loader is a plugin for show a full screen loader on requests.

AC Loader (vue-ac-loader) vue-ac-loader is a plugin for show a full screen loader on requests.

miSkoMV 0 Jan 21, 2020