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

vue-preloadersとは

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

【動画サイズ：186KB】

環境

インストール

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

npm

npm install vue-preloaders --save

UMD

<script src="https://cdn.jsdelivr.net/npm/vue-preloaders@1.0.13/dist/vue-preloaders.umd.min.js"></script>

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

導入手順

step.2 メソッドを設定

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;
}

サンプル

さいごに

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

今日はこの辺でー