Cloud Sync Button.JS

Кнопка / индикатор выполнения с анимацией облачной синхронизации в форматах ванильного JavaScript, Vue.js и веб-компонентов.

Как использовать

Этот компонент доступен в трёх версиях:

Компонент Vue. js — в каталоге src
Обычный код JavaScript — в каталоге vanilla-javascript-version
Как Web component — в каталоге web-component-version

Ванильная версия JavaScript

Он создан с использованием пользовательских элементов — технологии, которая в настоящее время хорошо поддерживается. Для старых браузеров доступен полифилл

<cloud-sync-button options='{
"loadColor": "#81d427",
"strokeColor": "#fff",
"btnColor": "#725fdf",
"titleStart": "Sync",
"titleEnd": "Done"
}' /> const aBtn = document.querySelector("cloud-sync-button");
...
aBtn.initSync();
aBtn.updateSync(10);
aBtn.completeSync();
aBtn.resetSync();
Vue version

Компонент Vue состоит из одного файла CloudSyncButton.vue, который можно скопировать в свой проект Vue. js или подключить как пакет NPM:

npm install @vuesence/cloud-sync-button --save

Затем вы можете использовать его в своём коде Vue:

    <template>

    <div id="app">

        <CloudSyncButton

            title="Sync"

            titleDone="Done"

            @click.native="startSync"

            :syncProgress="syncProgress"

            :inSync="inSync"

            :styling="{

                loadColor: '#81d427',

                strokeColor: '#fff',

                btnColor: '#011e4a'

            }"

        />

    </div>

</template>



<script>

    import CloudSyncButton from "@vuesence/cloud-sync-button";



    export default {

        name: "App",

        components: {

            CloudSyncButton,

        },

        data() {

            return {

                syncProgress: 0,

                inSync: false,

            };

        },

        methods: {

            startSync() {

                this.syncProgress = 0;

                this.inSync = true;

            },

            stopSync() {

                this.syncProgress = 0;

                this.inSync = false;

            },

            completeSync() {

                this.syncProgress = 100;

                setTimeout(() => {

                    this.stopSync();

                }, 2000);

            },

        },

    };

</script>

Состояние кнопки определяется двумя реактивными параметрами: inSync — запускает и останавливает синхронизацию, а syncProgress — показывает ход синхронизации. startSyncМетоды stopSync и completeSync используются для программного управления отображением кнопки. Для получения более подробной информации ознакомьтесь с примером использования App.vue

Автор Репозитория GitHub Репозиторий Демо

Другие библиотеки JavaScript

FullPage.js Vue 3
Carouse.js Simple
slider.js Tiny slide.js Flicking.js Splide.js Glide.js Nouislider.js Slick.js Swiper.js Animating
buttons.js Add to
calendar.js Cloud sync
button.js Vue promise btn.js Vue toast notification.js Toastr.js Notify.js Vanilla
toasts.js Notyf.js React
hot toast.js React
toastify.js Sweetalert2.js Notie.js Accordion.js