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

Overview

vue-content-loader

NPM version NPM downloads CircleCI

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

preview

Features

This is a Vue port for react-content-loader.

  • Completely customizable: you can change the colors, speed and sizes.
  • Create your own loading: use the online tool to create your custom loader easily.
  • You can use it right now: there are a lot of presets already.
  • Performance:
    • Tree-shakable and highly optimized bundle.
    • Pure SVG, so it's works without any javascript, canvas, etc.
    • Pure functional components.

Install

⚠️ The latest version is compatible with Vue 3 only. For Vue 2 & Nuxt 2, use [email protected]^0.2 instead.

With npm:

npm i vue-content-loader

Or with yarn:

yarn add vue-content-loader

CDN: UNPKG | jsDelivr (available as window.contentLoaders)

Usage

πŸ‘€ πŸ‘‰ Demo: CodeSandbox

<template>
  <content-loader>content-loader>
template>

<script>
import { ContentLoader } from 'vue-content-loader'

export default {
  components: {
    ContentLoader
  }
}
script>

Built-in loaders

import {
  ContentLoader,
  FacebookLoader,
  CodeLoader,
  BulletListLoader,
  InstagramLoader,
  ListLoader
} from 'vue-content-loader'

ContentLoader is a meta loader while other loaders are just higher-order components of it. By default ContentLoader only displays a simple rectangle, here's how you can use it to create custom loaders:

">
<ContentLoader viewBox="0 0 250 110">
  <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
  <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
  <rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
  <rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
  <rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
  <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
ContentLoader>

This is also how ListLoader is created.

You can also use the online tool to create shapes for your custom loader.

API

Props

Prop Type Default Description
width number, string SVG width in pixels without unit
height number, string SVG height in pixels without unit
viewBox string '0 0 ${width ?? 400} ${height ?? 130}' See SVG viewBox attribute
preserveAspectRatio string 'xMidYMid meet' See SVG preserveAspectRatio attribute
speed number 2 Animation speed
primaryColor string '#f9f9f9' Background color
secondaryColor string '#ecebeb' Highlight color
uniqueKey string randomId() Unique ID, you need to make it consistent for SSR
animate boolean true
baseUrl string empty string Required if you're using in your . Defaults to an empty string. This prop is common used as: which will fill the SVG attribute with the relative path. Related #14.
primaryOpacity number 1 Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari
secondaryOpacity number 1 Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari

Examples

Responsiveness

To create a responsive loader that will follow its parent container width, use only the viewBox attribute to set the ratio:

">
<ContentLoader viewBox="0 0 300 200">
  
ContentLoader>

To create a loader with fixed dimensions, use width and height attributes:

">
<ContentLoader width="300" height="200">
  
ContentLoader>

Note: the exact behavior might be different depending on the CSS you apply to SVG elements.

Credits

This is basically a Vue port for react-content-loader.

Thanks to @alidcastano for transferring the package name to me. 😘

License

MIT Β© EGOIST

Comments
  • Seems to show a black box instead on an iPhone6

    Seems to show a black box instead on an iPhone6

    Issuehunt badges

    Hello, thank you for this beauty. The content loader works exactly as expected across different devices on production but displays a black rectangular box on my iphone 6 instead, does anyone have such experience please? file


    IssueHunt Summary

    mldmoritz mldmoritz has been rewarded.

    Sponsors (Total: $100.00)

    Tips

    bug help wanted released :gift: Rewarded on Issuehunt 
    opened by ZeeUnltd 8
  • [Vue warn]: Invalid prop: type check failed for prop

    [Vue warn]: Invalid prop: type check failed for prop "height". Expected Number, got String.

    I got a message in console after adding it in Vue 2.0

    [Vue warn]: Invalid prop: type check failed for prop "height". Expected Number, got String.

    opened by itsyub 7
  • Online tool to create content loaders for Vue not working

    Online tool to create content loaders for Vue not working

    Hey. Thanks for the awesome project.

    Vue content loader online tool isn't working anymore.

    http://danilowoz.com/create-content-loader/ There is no vue creater (it was there few days back)

    image

    opened by pranavjindal999 6
  • Package name

    Package name

    Not sure whether @alidcastano 's vue-content-loader is in use or not.

    Otherwise I'll move this package to @egoist/vue-content-loader when I get the npm handle (egoist).

    opened by egoist 6
  • Seems to show a black color an iPhone8 plus

    Seems to show a black color an iPhone8 plus

    <ContentLoader :height="960" :width="700" > This is the code causing the problem. But i fix it by <ContentLoader :height="960" :width="701" > Then,it looks like normal. why?I think it is a bug. tmp7cfe04ab

    bug 
    opened by iyanming 4
  • fix: fixes issues with iOS

    fix: fixes issues with iOS

    This fixes #14 by adding new props to the Component.

    Supply a baseUrl if you use <base href> tag. Supply non rgba values as primary / secondary color.

    <content-loader
      :base-url="$route.fullPath"
      primary-color="rgb(0,0,0)"
      secondary-color="rgb(0,0,0)"
      :primary-opacity="0.06"
      :secondary-opacity="0.12"
    />
    released 
    opened by MLDMoritz 4
  • Add typescript definition file

    Add typescript definition file

    I was using this library for a personal app and I needed a typescript definition file so here it is!

    Since it's a small code base and there is not much properties going on, every vue properties are declared for ContentLoader and the other definitions are just extending ContentLoaderConstructor.

    Already tested on my local source code, need to be tested before merged though (first time I'm doing a .d.ts file for a particular module).

    Should solve #11

    released 
    opened by akuma06 4
  • content-loader not displayed immediately when in production

    content-loader not displayed immediately when in production

    before introducing content-loader I just had a loading spinner that would appear immediately upon arriving on a certain page

    after replacing the loading spinner with content-loader, there is a lag for the content-loader to appear. are there known causes to this?

    this problem appears only in production, but not when I am running my development server.

    opened by nazreen 4
  • Dynamically viewbox

    Dynamically viewbox

    When I want to dynamically change the value of the viewbox,

    I find that the computedviewbox in the component contentloader maintains the original value,

    resulting in failure to respond to the latest value

    bug released 
    opened by whmk-m 3
  • Add line & bar chart loaders

    Add line & bar chart loaders

    Preset charts loaders

    This PR is to add 2 new loaders, bar chart & line chart loaders.

    Why ?

    Into my job project, we use vue-content-loader for a dataviz app & we need loaders for this 2 types of charts, so I decide to share my litlle work with the community, maybe one person need this too.

    opened by arnaudforaison 3
  • Component disappear during mount in nuxt

    Component disappear during mount in nuxt

    Hello,

    thank you for the awesome work. I'm experiencing an issue using vue-content-loader with nuxt. At the beginning server render the content, and then in mount it disappear.

    If I trigger HMR component appear again.

    Any ideas?

    Thank you.

    opened by liqueflies 3
  • chore(deps): bump minimatch from 3.0.4 to 3.1.2

    chore(deps): bump minimatch from 3.0.4 to 3.1.2

    Bumps minimatch from 3.0.4 to 3.1.2.

    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
  • chore(deps): bump css-what from 2.1.0 to 2.1.3

    chore(deps): bump css-what from 2.1.0 to 2.1.3

    Bumps css-what from 2.1.0 to 2.1.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
  • chore(deps): update jest monorepo to v28 (major)

    chore(deps): update jest monorepo to v28 (major)

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | babel-jest | 27.5.1 -> 28.1.1 | age | adoption | passing | confidence | | jest (source) | 27.5.1 -> 28.1.1 | age | adoption | passing | confidence |


    Release Notes

    facebook/jest

    v28.1.1

    Compare Source

    Features
    • [jest] Expose Config type (#​12848)
    • [@jest/reporters] Improve GitHubActionsReporters annotation format (#​12826)
    • [@jest/types] Infer argument types passed to test and describe callback functions from each tables (#​12885, #​12905)
    Fixes
    • [@jest/expect-utils] Fix deep equality of ImmutableJS OrderedMaps (#​12763)
    • [jest-docblock] Handle multiline comments in parseWithComments (#​12845)
    • [jest-mock] Improve spyOn error messages (#​12901)
    • [jest-runtime] Correctly report V8 coverage with resetModules: true (#​12912)
    • [jest-worker] Make JestWorkerFarm helper type to include methods of worker module that take more than one argument (#​12839)
    Chore & Maintenance
    • [docs] Updated docs to indicate that jest-environment-jsdom is a separate package #​12828
    • [docs] Document the comments used by coverage providers #​12835
    • [docs] Use docusaurus-remark-plugin-tab-blocks to format tabs with code examples (#​12859)
    • [jest-haste-map] Bump walker version (#​12324)

    v28.1.0

    Compare Source

    Features
    • [jest-circus] Add failing test modifier that inverts the behavior of tests (#​12610)
    • [jest-environment-node, jest-environment-jsdom] Allow specifying customExportConditions (#​12774)
    Fixes
    • [expect] Adjust typings of lastCalledWith, nthCalledWith, toBeCalledWith matchers to allow a case there a mock was called with no arguments (#​12807)
    • [@jest/expect-utils] Fix deep equality of ImmutableJS Lists (#​12763)
    • [jest-core] Do not collect SIGNREQUEST as open handles (#​12789)
    Chore & Maintenance
    • [docs] Specified documentation about --filter CLI docs (#​12799)
    • [@jest-reporters] Move helper functions from utils.ts into separate files (#​12782)
    • [jest-resolve] Replace process.versions.pnp type declaration with @types/pnpapi devDependency (#​12783)

    v28.0.3

    Compare Source

    Fixes
    • [jest-config] Normalize reporters option defined in presets (#​12769)
    • [@jest/reporters] Fix trailing slash in matching coverageThreshold key (#​12714)
    • [jest-resolve] Fix (experimental) ESM module mocking for re-exports (#​12766)
    • [@jest/transform] Throw better error if an invalid return value if encountered (#​12764)
    Chore & Maintenance

    v28.0.2

    Compare Source

    Features
    • [jest-worker] Add JestWorkerFarm helper type (#​12753)
    Fixes
    • [*] Lower Node 16 requirement to 16.10 from 16.13 due to a Node bug that causes memory and performance issues (#​12754)

    v28.0.1

    Compare Source

    Features
    Fixes
    • [expect] Add missing dependency jest-util (#​12744)
    • [jest-circus] Improve test.concurrent (#​12748)
    • [jest-resolve] Correctly throw an error if jsdom test environment is used, but not installed (#​12749)
    Chore & Maintenance
    • [jest-serializer] Remove deprecated module from source tree (#​12735)

    v28.0.0

    Compare Source

    Features
    • [babel-jest] Export createTransformer function (#​12399)
    • [expect] Expose AsymmetricMatchers, MatcherFunction and MatcherFunctionWithState interfaces (#​12363, #​12376)
    • [jest-circus] Support error logging before retry (#​12201)
    • [jest-circus, jest-jasmine2] Allowed classes and functions as describe and it/test names (#​12484)
    • [jest-cli, jest-config] [BREAKING] Remove testURL config, use testEnvironmentOptions.url instead (#​10797)
    • [jest-cli, jest-core] Add --shard parameter for distributed parallel test execution (#​12546)
    • [jest-cli] [BREAKING] Remove undocumented --timers option (#​12572)
    • [jest-config] [BREAKING] Stop shipping jest-environment-jsdom by default (#​12354)
    • [jest-config] [BREAKING] Stop shipping jest-jasmine2 by default (#​12355)
    • [jest-config, @&#8203;jest/types] Add ci to GlobalConfig (#​12378)
    • [jest-config] [BREAKING] Rename moduleLoader to runtime (#​10817)
    • [jest-config] [BREAKING] Rename extraGlobals to sandboxInjectedGlobals (#​10817)
    • [jest-config] [BREAKING] Throw an error instead of showing a warning if multiple configs are used (#​12510)
    • [jest-config] [BREAKING] Do not normalize long deprecated configuration options preprocessorIgnorePatterns, scriptPreprocessor, setupTestFrameworkScriptFile and testPathDirs (#​12701)
    • [jest-cli, jest-core] Add --ignoreProjects CLI argument to ignore test suites by project name (#​12620)
    • [jest-core] Pass project config to globalSetup/globalTeardown function as second argument (#​12440)
    • [jest-core] Stabilize test runners with event emitters (#​12641)
    • [jest-core, jest-watcher] [BREAKING] Move TestWatcher class to jest-watcher package (#​12652)
    • [jest-core] Allow using Summary Reporter as stand-alone reporter (#​12687)
    • [jest-environment-jsdom] [BREAKING] Upgrade jsdom to 19.0.0 (#​12290)
    • [jest-environment-jsdom] [BREAKING] Add default browser condition to exportConditions for jsdom environment (#​11924)
    • [jest-environment-jsdom] [BREAKING] Pass global config to Jest environment constructor for jsdom environment (#​12461)
    • [jest-environment-jsdom] [BREAKING] Second argument context to constructor is mandatory (#​12469)
    • [jest-environment-node] [BREAKING] Add default node and node-addon conditions to exportConditions for node environment (#​11924)
    • [jest-environment-node] [BREAKING] Pass global config to Jest environment constructor for node environment (#​12461)
    • [jest-environment-node] [BREAKING] Second argument context to constructor is mandatory (#​12469)
    • [jest-environment-node] Add all available globals to test globals, not just explicit ones (#​12642, #​12696)
    • [@jest/expect] New module which extends expect with jest-snapshot matchers (#​12404, #​12410, #​12418)
    • [@jest/expect-utils] New module exporting utils for expect (#​12323)
    • [@jest/fake-timers] [BREAKING] Rename timers configuration option to fakeTimers (#​12572)
    • [@jest/fake-timers] [BREAKING] Allow jest.useFakeTimers() and projectConfig.fakeTimers to take an options bag (#​12572)
    • [jest-haste-map] [BREAKING] HasteMap.create now returns a promise (#​12008)
    • [jest-haste-map] Add support for dependencyExtractor written in ESM (#​12008)
    • [jest-mock] [BREAKING] Rename exported utility types ClassLike, FunctionLike, ConstructorLikeKeys, MethodLikeKeys, PropertyLikeKeys; remove exports of utility types ArgumentsOf, ArgsType, ConstructorArgumentsOf - TS builtin utility types ConstructorParameters and Parameters should be used instead (#​12435, #​12489)
    • [jest-mock] Improve isMockFunction to infer types of passed function (#​12442)
    • [jest-mock] [BREAKING] Improve the usage of jest.fn generic type argument (#​12489)
    • [jest-mock] Add support for auto-mocking async generator functions (#​11080)
    • [jest-mock] Add contexts member to mock functions (#​12601)
    • [@jest/reporters] Add GitHub Actions reporter (#​11320, #​12658)
    • [@jest/reporters] Pass reporterContext to custom reporter constructors as third argument (#​12657)
    • [jest-resolve] [BREAKING] Add support for package.json exports (#​11961, #​12373)
    • [jest-resolve] Support package self-reference (#​12682)
    • [jest-resolve, jest-runtime] Add support for data: URI import and mock (#​12392)
    • [jest-resolve, jest-runtime] Add support for async resolver (#​11540)
    • [jest-resolve] [BREAKING] Remove browser?: boolean from resolver options, conditions: ['browser'] should be used instead (#​12707)
    • [jest-resolve] Expose JestResolver, AsyncResolver, SyncResolver, PackageFilter, PathFilter and PackageJSON types (#​12707, (#​12712)
    • [jest-runner] Allow setupFiles module to export an async function (#​12042)
    • [jest-runner] Allow passing testEnvironmentOptions via docblocks (#​12470)
    • [jest-runner] Expose CallbackTestRunner, EmittingTestRunner abstract classes and CallbackTestRunnerInterface, EmittingTestRunnerInterface to help typing third party runners (#​12646, #​12715)
    • [jest-runner] Lock version of source-map-support to 0.5.13 (#​12720)
    • [jest-runtime] [BREAKING] Runtime.createHasteMap now returns a promise (#​12008)
    • [jest-runtime] Calling jest.resetModules function will clear FS and transform cache (#​12531)
    • [jest-runtime] [BREAKING] Remove Context type export, it must be imported from @jest/test-result (#​12685)
    • [jest-runtime] Add import.meta.jest (#​12698)
    • [@jest/schemas] New module for JSON schemas for Jest's config (#​12384)
    • [@jest/source-map] Migrate from source-map to @jridgewell/trace-mapping (#​12692)
    • [jest-transform] [BREAKING] Make it required for process() and processAsync() methods to always return structured data (#​12638)
    • [jest-test-result] Add duration property to JSON test output (#​12518)
    • [jest-watcher] [BREAKING] Make PatternPrompt class to take entityName as third constructor parameter instead of this._entityName (#​12591)
    • [jest-worker] [BREAKING] Allow only absolute workerPath (#​12343)
    • [jest-worker] [BREAKING] Default to advanced serialization when using child process workers (#​10983)
    • [pretty-format] New maxWidth parameter (#​12402)
    Fixes
    • [*] Use sha256 instead of md5 as hashing algortihm for compatibility with FIPS systems (#​12722)
    • [babel-jest] [BREAKING] Pass rootDir as root in Babel's options (#​12689)
    • [expect] Move typings of .not, .rejects and .resolves modifiers outside of Matchers interface (#​12346)
    • [expect] Throw useful error if expect.extend is called with invalid matchers (#​12488)
    • [expect] Fix iterableEquality ignores other properties (#​8359)
    • [expect] Fix print for the closeTo matcher (#​12626)
    • [jest-changed-files] Improve changedFilesWithAncestor pattern for Mercurial SCM (#​12322)
    • [jest-circus, @&#8203;jest/types] Disallow undefined value in TestContext type (#​12507)
    • [jest-config] Correctly detect CI environment and update snapshots accordingly (#​12378)
    • [jest-config] Pass moduleTypes to ts-node to enforce CJS when transpiling (#​12397)
    • [jest-config] [BREAKING] Add mjs and cjs to default moduleFileExtensions config (#​12578)
    • [jest-config, jest-haste-map] Allow searching for tests in node_modules by exposing retainAllFiles (#​11084)
    • [jest-core] [BREAKING] Exit with status 1 if no tests are found with --findRelatedTests flag (#​12487)
    • [jest-core] Do not report unref-ed subprocesses as open handles (#​12705)
    • [jest-each] %# is not replaced with index of the test case (#​12517)
    • [jest-each] Fixes error message with incorrect count of missing arguments (#​12464)
    • [jest-environment-jsdom] Make jsdom accessible to extending environments again (#​12232)
    • [jest-environment-jsdom] Log JSDOM errors more cleanly (#​12386)
    • [jest-environment-node] Add MessageChannel, MessageEvent to globals (#​12553)
    • [jest-environment-node] Add structuredClone to globals (#​12631)
    • [@jest/expect-utils] [BREAKING] Fix false positives when looking for undefined prop (#​8923)
    • [jest-haste-map] Don't use partial results if file crawl errors (#​12420)
    • [jest-haste-map] Make watchman existence check lazy+async (#​12675)
    • [jest-jasmine2, jest-types] [BREAKING] Move all jasmine specific types from @jest/types to its own package (#​12125)
    • [jest-jasmine2] Do not set duration to 0 for skipped tests (#​12518)
    • [jest-matcher-utils] Pass maxWidth to pretty-format to avoid printing every element in arrays by default (#​12402)
    • [jest-mock] Fix function overloads for spyOn to allow more correct type inference in complex object (#​12442)
    • [jest-mock] Handle overridden Function.name property (#​12674)
    • [@jest/reporters] Notifications generated by the --notify flag are no longer persistent in GNOME Shell. (#​11733)
    • [@jest/reporters] Move missing icon file which is needed for NotifyReporter class. (#​12593)
    • [@jest/reporters] Update v8-to-istanbul (#​12697)
    • [jest-resolver] Call custom resolver with core node.js modules (#​12654)
    • [jest-runner] Correctly resolve source-map-support (#​12706)
    • [jest-worker] Fix Farm execution results memory leak (#​12497)
    Chore & Maintenance
    • [*] [BREAKING] Drop support for Node v10 and v15 and target first LTS 16.13.0 (#​12220)
    • [*] [BREAKING] Drop support for [email protected], minimum version is now 4.3 (#​11142, #​12648)
    • [*] Bundle all .d.ts files into a single index.d.ts per module (#​12345)
    • [*] Use globalThis instead of global (#​12447)
    • [babel-jest] [BREAKING] Only export createTransformer (#​12407)
    • [docs] Add note about not mixing done() with Promises (#​11077)
    • [docs, examples] Update React examples to match with the new React guidelines for code examples (#​12217)
    • [docs] Add clarity for module factory hoisting limitations (#​12453)
    • [docs] Add more information about how code transformers work (#​12407)
    • [docs] Add upgrading guide (#​12633)
    • [expect] [BREAKING] Remove support for importing build/utils (#​12323)
    • [expect] [BREAKING] Migrate to ESM (#​12344)
    • [expect] [BREAKING] Snapshot matcher types are moved to @jest/expect (#​12404)
    • [jest-cli] Update yargs to v17 (#​12357)
    • [jest-config] [BREAKING] Remove getTestEnvironment export (#​12353)
    • [jest-config] [BREAKING] Rename config option name to id (#​11981)
    • [jest-create-cache-key-function] Added README.md file with basic usage instructions (#​12492)
    • [@jest/core] Use index.ts instead of jest.ts as main export (#​12329)
    • [jest-environment-jsdom] [BREAKING] Migrate to ESM (#​12340)
    • [jest-environment-node] [BREAKING] Migrate to ESM (#​12340)
    • [jest-haste-map] Remove legacy isRegExpSupported (#​12676)
    • [@jest/fake-timers] Update @sinonjs/fake_timers to v9 (#​12357)
    • [jest-jasmine2, jest-runtime] [BREAKING] Use Symbol to pass jest.setTimeout value instead of jasmine specific logic (#​12124)
    • [jest-phabricator] [BREAKING] Migrate to ESM (#​12341)
    • [jest-resolve] [BREAKING] Make requireResolveFunction argument mandatory (#​12353)
    • [jest-runner] [BREAKING] Remove some type exports from @jest/test-result (#​12353)
    • [jest-runner] [BREAKING] Second argument to constructor (Context) is not optional (#​12640)
    • [jest-serializer] [BREAKING] Deprecate package in favour of using v8 APIs directly (#​12391)
    • [jest-snapshot] [BREAKING] Migrate to ESM (#​12342)
    • [jest-transform] Update write-file-atomic to v4 (#​12357)
    • [jest-types] [BREAKING] Remove Config.Glob and Config.Path (#​12406)
    • [jest] Use index.ts instead of jest.ts as main export (#​12329)
    Performance
    • [jest-haste-map] [BREAKING] Default to node crawler over shelling out to find if watchman is not enabled (#​12320)

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about these updates again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    dependencies breaking 
    opened by renovate[bot] 0
  • Dependency Dashboard

    Dependency Dashboard

    This issue provides visibility into Renovate updates and their statuses. Learn more

    Open

    These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

    Detected dependencies

    npm
    package.json
    • @babel/core 7.18.5
    • @babel/preset-env 7.18.2
    • @types/poi 12.5.5
    • @vue/babel-plugin-jsx 1.1.1
    • @vue/compiler-sfc 3.2.37
    • @vue/test-utils 2.0.1
    • babel-jest 27.5.1
    • bili 5.0.5
    • jest 27.5.1
    • poi 12.10.3
    • prettier 2.7.1
    • regenerator-runtime 0.13.9
    • rollup-plugin-typescript2 0.32.1
    • typescript 4.7.4
    • vue 3.2.37
    • vue-loader 17.0.0
    • vue-router 4.0.16
    • vue ^3

    • [ ] Check this box to trigger a request for Renovate to run again on this repository
    opened by renovate[bot] 0
  • Add responsive support #18

    Add responsive support #18


    IssueHunt Summary

    Referenced issues

    This pull request has been submitted to:


    IssueHunt has been backed by the following sponsors. Become a sponsor

    opened by ferco0 2
  • Responsive

    Responsive

    Issuehunt badges

    My content's width depend on the screen size, is it possible to create content loaders with a dynamic width for responsiveness purposes ?

    The width and height properties seems to accept only numbers.


    IssueHunt Summary

    Backers (Total: $100.00)

    Submitted pull Requests


    Become a backer now!

    Or submit a pull request to get the deposits!

    Tips


    IssueHunt has been backed by the following sponsors. Become a sponsor

    enhancement :dollar: Funded on Issuehunt 
    opened by ThomasKientz 7
Releases(v2.0.1)
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 5 Oct 20, 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
Vue-blog-placeholders: Vue plugin package for a placeholder of your content to a demonstration before content loads

Vue-blog-placeholders: Vue plugin package for a placeholder of your content to a demonstration before content loads

Hakan 4 Jul 13, 2021
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 86 Nov 9, 2022
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.

Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.

まっけゃとーにゅ 0 Apr 24, 2020
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

Naufal Rabbani 141 Oct 19, 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
Super simple svg loading module for Vue.js

vue-svg Super simple svg loading module for Vue.js (actual npm package is vue-cli-plugin-svg) Introduction vue-svg allows you to import .svg files in

Sam Holmes 27 Aug 10, 2022
Vue component runtime generator for svg-sprite-loader.

svg-sprite-vue-generator Vue component runtime generator for svg-sprite-loader. Install npm install svg-sprite-vue-generator -D Usage Inline mode All

Ming 3 Apr 15, 2020
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 Nov 14, 2022
a vue component about toy bricks of skeleton screen loading

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 skelet

zhoulin 87 Nov 19, 2022
An vuejs loading component β˜„οΈ

An vuejs loading component β˜„οΈ

Igor Souza Martins 19 Jul 27, 2022
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

TS Pro 38 Oct 21, 2022
Vite 2.x plugin to load SVG files as Vue components

Vite SVG loader Vite 2.x plugin to load SVG files as Vue components. <template> <MyIcon /> </template> <script setup> import MyIcon from './my-icon

Jan-Paul Kleemans 280 Nov 22, 2022
☺️ Vue cli3 plugin for svg-sprite-loader

☺️ Vue cli3 plugin for svg-sprite-loader

RJW 12 Jan 10, 2021
A Vue.js component to create beautiful animated circular progress bars. https://vue-ellipse-progress-demo.netlify.com/

vue-ellipse-progress A dependency-free Vue.js plugin to create beautiful and animated circular progress bars, implemented with SVG. The purpose of thi

Sergej Atamantschuk 247 Nov 19, 2022
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

Guillaume Chau 409 Nov 24, 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
πŸŒ€ A collection of loading indicators animated with CSS for VueJS

vue-spinkit A collection of loading indicators animated with CSS for VueJS Inspiration Spinkit css animated loading react-spinkit loaders.css DEMO Ins

Chanwit Piromplad 108 Sep 28, 2022