カスタマイズ可能なVue.jsおよびNuxt.jsのプリローダーライブラリ「vue-preloaders」

vue-preloadersとは

vue-preloadersは、安定した、柔軟で完全にカスタマイズ可能なVue.jsおよびNuxt.jsのプリローダーコンポーネントライブラリです。

 

【動画サイズ：186KB】

 

環境

Vue 2.6.10
vue-preloaders 1.0.13

 

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install vue-preloaders --save



UMD


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-preloaders.umd.min.js"></script>


 


gitリポジトリは以下から取得できます。


https://github.com/igaloly/vue-preloaders




 



導入手順




step
1ライブラリの取り込み


    

  • 

    ES6等の場合
    

    import VuePreloaders from 'vue-preloaders' 
    

    • 

  • UMDの場合

    const VuePreloaders  = window['vue-preloaders'];
    

    • 





step
2メソッドを設定


上記で取得したVuePreloadersをVue.useに取り込みます。


Vue.use(VuePreloaders);

new Vue({
  el: '#app'
});



step
3テンプレートを準備


各種コンポーネントを設置します。


サンプルはケバブケースで記載しています。


<div id="app">
  <div class="container">
    <div class="squares">
      <div class="square" v-for="i in 4" :key="i"></div>
    </div>
  </div>
  <div class="container">
    <div class="preloader loading">
      <span class="slice"></span>
      <span class="slice"></span>
      <span class="slice"></span>
      <span class="slice"></span>
      <span class="slice"></span>
      <span class="slice"></span>
    </div>
  </div>
</div>



step
4スタイルを適用する


/* squares */
.container {
text-align: center;
}
.squares {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
overflow: hidden;
transform-origin: bottom left;
animation: squares 1s linear infinite;
}
.square {
position: absolute;
width: 20px;
height: 20px;
background-color: black;
left: 0px;
top: 0px;
}
.square:first-child {
top: 20px;
}
.square:nth-child(2) {
left: 20px;
top: 20px;
animation: square2 1s linear infinite;
}
.square:nth-child(3) {
animation: square3 1s linear infinite;
}
.square:last-child {
left: 20px;
animation: square4 1s linear infinite;
}

@keyframes squares {
from {
transform: scale(1);
}
90% {
transform: scale(1);
}
to {
transform: scale(0.5);
}
}
@keyframes square2 {
from {
transform: translateY(-50px);
}
25% {
transform: translate(0);
}
to {
transform: translate(0);
}
}
@keyframes square3 {
from {
transform: translateY(-50px);
}
50% {
transform: translate(0);
}
to {
transform: translate(0);
}
}
@keyframes square4 {
from {
transform: translateY(-50px);
}
75% {
transform: translate(0);
}
to {
transform: translate(0);
}
}
/* preload */
@keyframes preload-show-1 {
from {
transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-hide-1 {
to {
transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-cycle-1 {
5% {
transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
10%, 75% {
transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
80%, 100% {
transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-show-2 {
from {
transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-hide-2 {
to {
transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-cycle-2 {
10% {
transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
15%, 70% {
transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
75%, 100% {
transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-show-3 {
from {
transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-hide-3 {
to {
transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-cycle-3 {
15% {
transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
20%, 65% {
transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
70%, 100% {
transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-show-4 {
from {
transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-hide-4 {
to {
transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-cycle-4 {
20% {
transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
25%, 60% {
transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
65%, 100% {
transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-show-5 {
from {
transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-hide-5 {
to {
transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-cycle-5 {
25% {
transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
30%, 55% {
transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
60%, 100% {
transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-show-6 {
from {
transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-hide-6 {
to {
transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-cycle-6 {
30% {
transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
35%, 50% {
transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
55%, 100% {
transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-flip {
0% {
transform: rotateY(0deg) rotateZ(-60deg);
}
100% {
transform: rotateY(360deg) rotateZ(-60deg);
}
}
body {
background: #efefef;
}
.preloader {
position: absolute;
top: 50%;
left: 50%;
font-size: 20px;
display: block;
width: 3.75em;
height: 4.25em;
margin-left: -1.875em;
margin-top: -2.125em;
transform-origin: center center;
transform: rotateY(180deg) rotateZ(-60deg);
}
.preloader .slice {
border-top: 1.125em solid transparent;
border-right: none;
border-bottom: 1em solid transparent;
border-left: 1.875em solid #f7484e;
position: absolute;
top: 0px;
left: 50%;
transform-origin: left bottom;
border-radius: 3px 3px 0 0;
}
.preloader .slice:nth-child(1) {
transform: rotateZ(60deg) rotateY(0deg) rotateX(0);
animation: 0.15s linear 0.82s preload-hide-1 both 1;
}
.preloader .slice:nth-child(2) {
transform: rotateZ(120deg) rotateY(0deg) rotateX(0);
animation: 0.15s linear 0.74s preload-hide-2 both 1;
}
.preloader .slice:nth-child(3) {
transform: rotateZ(180deg) rotateY(0deg) rotateX(0);
animation: 0.15s linear 0.66s preload-hide-3 both 1;
}
.preloader .slice:nth-child(4) {
transform: rotateZ(240deg) rotateY(0deg) rotateX(0);
animation: 0.15s linear 0.58s preload-hide-4 both 1;
}
.preloader .slice:nth-child(5) {
transform: rotateZ(300deg) rotateY(0deg) rotateX(0);
animation: 0.15s linear 0.5s preload-hide-5 both 1;
}
.preloader .slice:nth-child(6) {
transform: rotateZ(360deg) rotateY(0deg) rotateX(0);
animation: 0.15s linear 0.42s preload-hide-6 both 1;
}
.preloader.loading {
animation: 2s preload-flip steps(2) infinite both;
}
.preloader.loading .slice:nth-child(1) {
transform: rotateZ(60deg) rotateY(90deg) rotateX(0);
animation: 2s preload-cycle-1 linear infinite both;
}
.preloader.loading .slice:nth-child(2) {
transform: rotateZ(120deg) rotateY(90deg) rotateX(0);
animation: 2s preload-cycle-2 linear infinite both;
}
.preloader.loading .slice:nth-child(3) {
transform: rotateZ(180deg) rotateY(90deg) rotateX(0);
animation: 2s preload-cycle-3 linear infinite both;
}
.preloader.loading .slice:nth-child(4) {
transform: rotateZ(240deg) rotateY(90deg) rotateX(0);
animation: 2s preload-cycle-4 linear infinite both;
}
.preloader.loading .slice:nth-child(5) {
transform: rotateZ(300deg) rotateY(90deg) rotateX(0);
animation: 2s preload-cycle-5 linear infinite both;
}
.preloader.loading .slice:nth-child(6) {
transform: rotateZ(360deg) rotateY(90deg) rotateX(0);
animation: 2s preload-cycle-6 linear infinite both;
}



サンプル



See the Pen カスタマイズ可能なVue.jsおよびNuxt.jsのプリローダーライブラリ「vue-preloaders」 by カバの樹 (@kabanoki) on CodePen.dark



専用ページで確認する



さいごに


カスタマイズ可能なVue.jsおよびNuxt.jsのプリローダーコンポーネントライブラリでした。


今日はこの辺でー


 
























    

  • この記事を書いた人
    • 










 




カバノキ


印刷会社のWEB部隊に所属してます。
WEB制作に携わってから、もう時期10年になります。
普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。
最近のお気に入りはJavascriptです。
Vue.jsを狂喜乱舞しながら、社内に布教中です。




















-Loader, UI Components, vue.js, ライブラリ

-, , , , ,