Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Progress bars and loading indicators for Vue.js

NotificationsYou must be signed in to change notification settings

Akryum/vue-progress-path

Repository files navigation

npmnpmvue2

Progress bars and loading indicators that can take any form!

This library is Work In Progress.

Live Demo

Become a Patreon

Sponsors

Gold

sum.cumo logo

Silver

VueSchool logoVue Mastery logo

Bronze

Installation

npm i -S vue-progress-path
yarn add vue-progress-path

Usage

import'vue-progress-path/dist/vue-progress-path.css'importVueProgressfrom'vue-progress-path'Vue.use(VueProgress,{// defaultShape: 'circle',})

You can now use the<loading-progress> component.

CSS customization example

You can customize the progress components with CSS:

.vue-progress-pathpath {stroke-width:12;}.vue-progress-path .progress {stroke: red;}.vue-progress-path .background {stroke:#edd;}

Examples

Google Material Design-like spinner:

<loading-progress:progress="progress":indeterminate="indeterminate":counter-clockwise="counterClockwise":hide-background="hideBackground"size="64"rotatefillDuration="2"rotationDuration="1"/>

Semi-circle:

<loading-progress:progress="progress":indeterminate="indeterminate":counter-clockwise="counterClockwise":hide-background="hideBackground"shape="semicircle"size="64"/>

Custom SVG path:

<loading-progress:progress="progress":indeterminate="indeterminate":counter-clockwise="counterClockwise":hide-background="hideBackground"shape="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"size="180"fill-duration="2"/>

About

Progress bars and loading indicators for Vue.js

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published
[8]ページ先頭
©2009-2025 Movatter.jp