├── app
    ├── static
    │   ├── favicon.ico
    │   └── loaders
    │   │   ├── ellipses01
    │   │       └── index.html
    │   │   ├── panel01
    │   │       └── index.html
    │   │   ├── neon
    │   │       └── index.html
    │   │   ├── ellipses02
    │   │       └── index.html
    │   │   ├── rippleandheart
    │   │       └── index.html
    │   │   └── circles01
    │   │       └── index.html
    ├── components
    │   ├── AppLoader.vue
    │   └── Logo.vue
    ├── layouts
    │   └── default.vue
    └── pages
    │   └── index.vue
├── .gitignore
├── README.md
├── .editorconfig
├── package.json
├── nuxt.config.js
└── LICENSE


/app/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/magitek-telescope/preloaders/HEAD/app/static/favicon.ico


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | node_modules
 3 | 
 4 | # logs
 5 | npm-debug.log
 6 | 
 7 | # Nuxt build
 8 | .nuxt
 9 | 
10 | # Nuxt generate
11 | dist
12 | .envrc
13 | sw.*
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # preloaders
 2 | 
 3 | > Nuxt.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | $ yarn
10 | 
11 | # serve with hot reload at localhost:3000
12 | $ yarn dev
13 | 
14 | # generate static project
15 | $ yarn generate
16 | ```
17 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_size = 2
 6 | indent_style = space
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "preloaders",
 3 |   "version": "2.0.0",
 4 |   "description": "Nuxt.js project",
 5 |   "author": "Takuma Hanatani <mail@potato4d.me>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "generate": "nuxt generate"
10 |   },
11 |   "dependencies": {
12 |     "@nuxtjs/google-analytics": "^2.0.2",
13 |     "@nuxtjs/pwa": "^2.0.8",
14 |     "axios": "^0.16.2",
15 |     "nuxt": "^1.4.1"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   srcDir: './app',
 3 |   head: {
 4 |     title: 'preloaders',
 5 |     meta: [
 6 |       { charset: 'utf-8' },
 7 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
 8 |       { hid: 'description', name: 'description', content: 'Nuxt.js project' },
 9 |       { name: 'link', href: 'https://fonts.googleapis.com/css?family=Quicksand', rel: 'stylesheet'}
10 |     ],
11 |     link: [
12 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
13 |     ]
14 |   },
15 |   loading: { color: '#3B8070' },
16 |   modules: [
17 |     '@nuxtjs/pwa',
18 |     [
19 |       '@nuxtjs/google-analytics',
20 |       {
21 |         id: process.env.GA_ID || 'UA-12301-2'
22 |       }
23 |     ]
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017 HANATANI Takuma
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/app/static/loaders/ellipses01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ja">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Ellipses02</title>
 7 | </head>
 8 | <body>
 9 |   <style>
10 |   html,body{
11 |     margin: 0;
12 |     padding: 0;
13 |   }
14 |   .cover{
15 |     display:flex;
16 |     align-items: center;
17 |     justify-content: center;
18 |     width: 100vw;
19 |     height: 100vh;
20 |     margin: 0;
21 |     padding: 0;
22 |     background: #A2DEF8;
23 |     overflow: hidden;
24 |   }
25 |   .loading{
26 |     width: 50px;
27 |     height: 50px;
28 |     position: relative;
29 |   }
30 |   .loading::before, .loading::after {
31 |     position: absolute;
32 |     left: 0;
33 |     top: 0;
34 |     right: 0;
35 |     bottom: 0;
36 |     background: rgba(255,255,255,0.5);
37 |     content: "";
38 |     border-radius: 50%;
39 |   }
40 |   .loading::before{
41 |     animation: anim1 2s infinite;
42 |   }
43 |   .loading::after{
44 |     animation: anim1 2s -1s infinite;
45 |   }
46 |   @keyframes anim1{
47 |       0%{transform: scale(0)}
48 |      50%{transform: scale(2.5)}
49 |     100%{transform: scale(0)}
50 |   }
51 |   </style>
52 |   <div class="cover"><div class="loading"></div></div>
53 | </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/app/components/AppLoader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <article class="card">
 3 |     <iframe :src="`/loaders/${loader}/`" />
 4 |     <h1 class="card-title">
 5 |       <span>{{loader}}</span>
 6 |       <span
 7 |         class="card-show"
 8 |         @click="handleClick"
 9 |       >
10 |         show source
11 |       </span>
12 |     </h1>
13 |   </article>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   props: {
19 |     loader: String
20 |   },
21 |   methods: {
22 |     handleClick() {
23 |       this.$emit('click', this.loader)
24 |     }
25 |   }
26 | }
27 | </script>
28 | 
29 | <style scoped>
30 | 
31 | .card {
32 |   width: 400px;
33 |   max-width: 100%;
34 |   border-radius: 2px;
35 |   overflow: hidden;
36 |   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.093);
37 |   margin-bottom: 30px;
38 | }
39 | 
40 | .card iframe {
41 |   width: 100%;
42 |   height: 300px;
43 |   border: 0;
44 |   overflow: hidden;
45 | }
46 | 
47 | .card .card-title {
48 |   color: #666;
49 |   font-size: 16px;
50 |   display: flex;
51 |   align-items: center;
52 |   justify-content: space-between;
53 |   margin: 15px;
54 | }
55 | 
56 | .card .card-show{
57 |   font-size: 13px;
58 |   color: #77CFF7;
59 |   cursor: pointer;
60 | }
61 | 
62 | .card .card-show:hover{
63 |   text-decoration: underline;
64 | }
65 | 
66 | @media (max-width: 600px) {
67 |   .card iframe {
68 |     width: calc(100vw - 20px);
69 |     height: calc(75vw);
70 |   }
71 | }
72 | 
73 | </style>
74 | 


--------------------------------------------------------------------------------
/app/static/loaders/panel01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ja">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Ellipses02</title>
 7 | </head>
 8 | <body>
 9 |   <style>
10 |   html,body{
11 |     margin: 0;
12 |     padding: 0;
13 |   }
14 |   .cover{
15 |     display:flex;
16 |     align-items: center;
17 |     justify-content: center;
18 |     width: 100vw;
19 |     height: 100vh;
20 |     margin: 0;
21 |     padding: 0;
22 |     background: #9E86C1;
23 |   }
24 |   .loading{
25 |     width: 80px;
26 |     height: 80px;
27 |     position: relative;
28 |     background: rgba(255, 255, 255, 0.6);
29 |     animation: anim1 3.0s linear infinite;
30 |   }
31 |   @keyframes anim1 {
32 |     0%{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
33 |     20%{ transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg); }
34 |     25%{ transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg); }
35 |     45%{ transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
36 |     50%{ transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
37 |     70%{ transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg); }
38 |     75%{ transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg); }
39 |     95%{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
40 |     100%{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
41 |   }
42 |   </style>
43 |   <div class="cover"><div class="loading"></div></div>
44 | </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/app/static/loaders/neon/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ja">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Neon</title>
 7 | </head>
 8 | <body>
 9 |   <style>
10 |   html, body, .cover{
11 |     display: flex;
12 |     align-items: center;
13 |     justify-content: center;
14 |     width: 100vw;
15 |     height: 100vh;
16 |     margin: 0;
17 |     padding: 0;
18 |     background: #0A2138;
19 |     overflow: hidden;
20 |   }
21 |   .loading {
22 |     width: 200px;
23 |     height: 200px;
24 |     display: flex;
25 |     align-items: center;
26 |     justify-content: center;
27 |     position: relative;
28 |     overflow: visible;
29 |     z-index: 100;
30 |     transform: rotateX(60deg);
31 |     filter: drop-shadow(0 0 300px rgba(26, 209, 253, 1.0));
32 |   }
33 |   .loading::before{
34 |     display: block;
35 |     width: 140px;
36 |     height: 140px;
37 |     left: 0;
38 |     top: 0;
39 |     right: 0;
40 |     bottom: 0;
41 |     margin: auto;
42 |     border: solid 3px #1AD1FD;
43 |     border-right-color: transparent;
44 |     border-left-color: transparent;
45 |     border-radius: 50%;
46 |     overflow: hidden;
47 |     content: "";
48 |     position: absolute;
49 |     animation: anim2 1.0s ease infinite;
50 |   }
51 |   .loading .inner-loading {
52 |     width: 65px;
53 |     height: 65px;
54 |     border: solid 5px #1AD1FD;
55 |     border-radius: 50%;
56 |     overflow: hidden;
57 |   }
58 |   @keyframes anim2 {
59 |     0% { transform: rotate(0deg); }
60 |     50% { transform: rotate(360deg); }
61 |     100% { transform: rotate(720deg); }
62 |   }
63 |   </style>
64 |   <div class="cover"><div class="loading"><div class="inner-loading"></div></div></div>
65 | </body>
66 | </html>
67 | 


--------------------------------------------------------------------------------
/app/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="VueToNuxtLogo">
 3 |     <div class="Triangle Triangle--two"></div>
 4 |     <div class="Triangle Triangle--one"></div>
 5 |     <div class="Triangle Triangle--three"></div>
 6 |     <div class="Triangle Triangle--four"></div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <style>
11 | .VueToNuxtLogo {
12 |   display: inline-block;
13 |   animation: turn 2s linear forwards 1s;
14 |   transform: rotateX(180deg);
15 |   position: relative;
16 |   overflow: hidden;
17 |   height: 180px;
18 |   width: 245px;
19 | }
20 | 
21 | .Triangle {
22 |   position: absolute;
23 |   top: 0;
24 |   left: 0;
25 |   width: 0;
26 |   height: 0;
27 | }
28 | 
29 | .Triangle--one {
30 |   border-left: 105px solid transparent;
31 |   border-right: 105px solid transparent;
32 |   border-bottom: 180px solid #41B883;
33 | }
34 | 
35 | .Triangle--two {
36 |   top: 30px;
37 |   left: 35px;
38 |   animation: goright 0.5s linear forwards 3.5s;
39 |   border-left: 87.5px solid transparent;
40 |   border-right: 87.5px solid transparent;
41 |   border-bottom: 150px solid #3B8070;
42 | }
43 | 
44 | .Triangle--three {
45 |   top: 60px;
46 |   left: 35px;
47 |   animation: goright 0.5s linear forwards 3.5s;
48 |   border-left: 70px solid transparent;
49 |   border-right: 70px solid transparent;
50 |   border-bottom: 120px solid #35495E;
51 | }
52 | 
53 | .Triangle--four {
54 |   top: 120px;
55 |   left: 70px;
56 |   animation: godown 0.5s linear forwards 3s;
57 |   border-left: 35px solid transparent;
58 |   border-right: 35px solid transparent;
59 |   border-bottom: 60px solid #fff;
60 | }
61 | 
62 | @keyframes turn {
63 |   100% {
64 |     transform: rotateX(0deg);
65 |   }
66 | }
67 | 
68 | @keyframes godown {
69 |   100% {
70 |     top: 180px;
71 |   }
72 | }
73 | 
74 | @keyframes goright {
75 |   100% {
76 |     left: 70px;
77 |   }
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/app/static/loaders/ellipses02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ja">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Ellipses02</title>
 7 | </head>
 8 | <body>
 9 |   <style>
10 |   html, body, .cover{
11 |     display:flex;
12 |     align-items: center;
13 |     justify-content: center;
14 |     width: 100vw;
15 |     height: 100vh;
16 |     margin: 0;
17 |     padding: 0;
18 |     background: #FDA700;
19 |     overflow: hidden;
20 |   }
21 |   .loading, .loading2 {
22 |     width: 80px;
23 |     height: 80px;
24 |     background: rgba(255, 255, 255, 0.6);
25 |     border-radius: 50%;
26 |     overflow: hidden;
27 |     background-blend-mode: lighten;
28 |   }
29 |   .loading {
30 |     animation: anim1 4s infinite ease-in-out;
31 |   }
32 |   .loading2 {
33 |     animation: anim2 4s infinite ease-in-out;
34 |   }
35 |   @keyframes anim1 {
36 |     0% {
37 |       transform: translate(-20px, 0);
38 |       z-index: 100;
39 |     }
40 |     25% {
41 |       transform: translate(80px, 0);
42 |     }
43 |     50% {
44 |       transform: translate(-20px, 0);
45 |       z-index: 1;
46 |     }
47 |     75% {
48 |       transform: translate(80px, 0);
49 |     }
50 |     100% {
51 |       transform: translate(-20px, 0);
52 |       z-index: 100;
53 |     }
54 |   }
55 |   @keyframes anim2 {
56 |     0% {
57 |       transform: translate(20px, 0);
58 |       z-index: 1;
59 |     }
60 |     25% {
61 |       transform: translate(-80px, 0);
62 |     }
63 |     50% {
64 |       transform: translate(20px, 0);
65 |       z-index: 100;
66 |     }
67 |     75% {
68 |       transform: translate(-80px, 0);
69 |     }
70 |     100% {
71 |       transform: translate(20px, 0);
72 |       z-index: 1;
73 |     }
74 |   }
75 |   </style>
76 |   <div class="cover"><div class="loading"></div><div class="loading2"></div></div>
77 | </body>
78 | </html>
79 | 


--------------------------------------------------------------------------------
/app/static/loaders/rippleandheart/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ja">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Ripple and Heart</title>
 7 | </head>
 8 | <body>
 9 |   <style>
10 |   html, body, .cover{
11 |     display: flex;
12 |     align-items: center;
13 |     justify-content: center;
14 |     width: 100vw;
15 |     height: 100vh;
16 |     margin: 0;
17 |     padding: 0;
18 |     background: #f06a6a;
19 |     overflow: hidden;
20 |   }
21 |   .loading:before,
22 |   .loading:after {
23 |     content: "";
24 |     position: absolute;
25 |     top: 0;
26 |     bottom: 0;
27 |     left: 0;
28 |     right: 0;
29 |     margin: auto;
30 |   }
31 |   .loading:before {
32 |     width: 140px;
33 |     height: 140px;
34 |     border-radius: 50%;
35 |     border: solid 5px #fff;
36 |     background-size: cover;
37 |     background-image: url('https://img.esa.io/uploads/production/attachments/4699/2018/07/15/11203/6d663ebe-2eab-406f-be2a-a0d0fe38aa1b.jpg');
38 |     z-index: 1000;
39 |     animation: heart 1.9s cubic-bezier(0.86, 0, 0.07, 1) 0.75s infinite;
40 |   }
41 |   .loading:after {
42 |     width: 0;
43 |     height: 0;
44 |     animation: anim1 1.9s ease-in-out infinite;
45 |     opacity: 1;
46 |     transition: opacity 0.3s;
47 |     border: solid 1px #fff;
48 |   }
49 |   @keyframes heart {
50 |     0% { transform: scale(1); }
51 |     1% { transform: scale(1.025); }
52 |     35% { transform: scale(1); }
53 |   }
54 |   @keyframes anim1 {
55 |     0%{
56 |       width: 0;
57 |       height: 0;
58 |       border-radius: 50%;
59 |       border: solid 2px rgba(255, 255, 255, 1.0);
60 |     }
61 |     100%{
62 |       width: 300px;
63 |       height: 300px;
64 |       border-radius: 50%;
65 |       border: solid 2px rgba(255, 255, 255, 0.0);
66 |     }
67 |   }
68 |   </style>
69 |   <div class="cover"><div class="loading"></div></div>
70 | </body>
71 | </html>
72 | 


--------------------------------------------------------------------------------
/app/static/loaders/circles01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ja">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Ripple and Heart</title>
 7 | </head>
 8 | <body>
 9 |   <style>
10 |   html, body, .cover{
11 |     display:flex;
12 |     align-items: center;
13 |     justify-content: center;
14 |     width: 100vw;
15 |     height: 100vh;
16 |     margin: 0;
17 |     padding: 0;
18 |     background: hsl(180, 80%, 40%);
19 |     overflow: hidden;
20 |   }
21 |   .loading, .loading2 {
22 |     width:100px;
23 |     height:100px;
24 |     position: absolute;
25 |   }
26 |   .loading:before,
27 |   .loading:after,
28 |   .loading2:before,
29 |   .loading2:after{
30 |     position: absolute;
31 |     left: 0;
32 |     top: 0;
33 |     width: 100%;
34 |     height: 100%;
35 |     border: solid 5px #fff;
36 |     content: "";
37 |     border-radius: 50%;
38 |   }
39 |   .loading:before{
40 |     border-top: solid 5px transparent;
41 |     border-bottom: solid 5px transparent;
42 |     animation: anim1 1s infinite linear;
43 |   }
44 |   .loading:after{
45 |     left: -50px;
46 |     top: -50px;
47 |     width: 200px;
48 |     height: 200px;
49 |     border-left: solid 5px transparent;
50 |     border-right: solid 5px transparent;
51 |     animation: anim2 1s infinite linear;
52 |   }
53 |   .loading2:before{
54 |     left: -25px;
55 |     top: -25px;
56 |     width: 150px;
57 |     height: 150px;
58 |     border-top: solid 5px transparent;
59 |     border-bottom: solid 5px transparent;
60 |     animation: anim3 2s infinite linear;
61 |   }
62 |   .loading2:after{
63 |     left: -100px;
64 |     top: -100px;
65 |     width: 300px;
66 |     height: 300px;
67 |     border-top: solid 5px transparent;
68 |     border-bottom: solid 5px transparent;
69 |     animation: anim2 2s infinite linear;
70 |   }
71 |   @keyframes anim1{
72 |     0%{transform:rotate(0deg);}
73 |     100%{transform:rotate(-360deg);}
74 |   }
75 |   @keyframes anim2{
76 |     0%{transform:rotate(0deg);}
77 |     100%{transform:rotate(360deg);}
78 |   }
79 |   @keyframes anim3{
80 |     0%{transform:rotate(45deg);}
81 |     100%{transform:rotate(405deg);}
82 |   }
83 |   </style>
84 |   <div class="cover"><div class="loading"></div><div class="loading2"></div></div>
85 | </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/app/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nuxt/>
 4 |     <a href="https://github.com/potato4d/preloaders" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <style>
 9 | html {
10 |   font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
11 |   font-size: 16px;
12 |   word-spacing: 1px;
13 |   -ms-text-size-adjust: 100%;
14 |   -webkit-text-size-adjust: 100%;
15 |   -moz-osx-font-smoothing: grayscale;
16 |   -webkit-font-smoothing: antialiased;
17 |   box-sizing: border-box;
18 | }
19 | 
20 | *, *:before, *:after {
21 |   box-sizing: border-box;
22 |   margin: 0;
23 | }
24 | 
25 | .button--green {
26 |   display: inline-block;
27 |   border-radius: 4px;
28 |   border: 1px solid #3b8070;
29 |   color: #3b8070;
30 |   text-decoration: none;
31 |   padding: 10px 30px;
32 | }
33 | 
34 | .button--green:hover {
35 |   color: #fff;
36 |   background-color: #3b8070;
37 | }
38 | 
39 | .button--grey {
40 |   display: inline-block;
41 |   border-radius: 4px;
42 |   border: 1px solid #35495e;
43 |   color: #35495e;
44 |   text-decoration: none;
45 |   padding: 10px 30px;
46 |   margin-left: 15px;
47 | }
48 | 
49 | .button--grey:hover {
50 |   color: #fff;
51 |   background-color: #35495e;
52 | }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/app/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section
  3 |     class="wrapper"
  4 |     :class="{
  5 |       'is-modal': isShowModal
  6 |     }"
  7 |   >
  8 |     <div class="main">
  9 |       <h1 class="title">
 10 |         preloaders
 11 |       </h1>
 12 | 
 13 |       <p class="description">
 14 |         My preloader collection using CSS Animation.<br>
 15 |         by <a href="https://github.com/potato4d">@potato4d</a>
 16 |       </p>
 17 | 
 18 |       <div class="container">
 19 |         <AppLoader @click="handleClick" v-for="loader in loaders" :key="loader" :loader="loader" />
 20 |       </div>
 21 |     </div>
 22 | 
 23 |     <div class="modal" v-if="isShowModal">
 24 |       <div class="modal-content">
 25 |         <code>
 26 |           <pre>{{source}}</pre>
 27 |         </code>
 28 |       </div>
 29 |       <div class="modal-background" @click="handleHide"></div>
 30 |     </div>
 31 |   </section>
 32 | </template>
 33 | 
 34 | <script>
 35 | import axios from 'axios'
 36 | import AppLoader from '~/components/AppLoader.vue'
 37 | 
 38 | export default {
 39 |   components: {
 40 |     AppLoader
 41 |   },
 42 |   data () {
 43 |     return {
 44 |       loaders: [
 45 |         'rippleandheart',
 46 |         'ellipses02',
 47 |         'circles01',
 48 |         'ellipses01',
 49 |         'panel01',
 50 |         'neon'
 51 |       ],
 52 |       status: 'wait',
 53 |       source: ''
 54 |     }
 55 |   },
 56 |   computed: {
 57 |     isShowModal() {
 58 |       return this.status =='show'
 59 |     }
 60 |   },
 61 |   methods: {
 62 |     async handleClick (loader) {
 63 |       try {
 64 |         this.status = 'loading'
 65 |         const { data: html } = await axios.get(`/loaders/${loader}/`)
 66 |         this.source = html.match(/(<body>)[\s\S]*?(<\/body>)/)[0]
 67 |                           .replace(`<body>\n`, '')
 68 |                           .replace('</body>', '')
 69 |         this.status = 'show'
 70 |       } catch (e) {
 71 |         this.status = 'wait'
 72 |         alert('Error.')
 73 |       }
 74 |     },
 75 |     handleHide () {
 76 |       this.status = 'wait'
 77 |     }
 78 |   }
 79 | }
 80 | </script>
 81 | 
 82 | <style>
 83 | .wrapper{
 84 |   min-height: 100vh;
 85 |   display: flex;
 86 |   justify-content: center;
 87 |   text-align: center;
 88 |   padding: 30px;
 89 | }
 90 | 
 91 | .main{
 92 |   width: 100%;
 93 | }
 94 | 
 95 | .wrapper.is-modal {
 96 |   height: 100vh;
 97 |   overflow: hidden;
 98 | }
 99 | 
100 | .title {
101 |   font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
102 |   display: block;
103 |   font-weight: 300;
104 |   font-size: 80px;
105 |   color: #35495e;
106 |   letter-spacing: 1px;
107 | }
108 | 
109 | .description {
110 |   margin: 10px 0 30px;
111 |   text-align: center;
112 |   line-height: 1.8;
113 |   font-size: 16px;
114 |   color: #35495e;
115 | }
116 | 
117 | .container {
118 |   display: flex;
119 |   width: 1280px;
120 |   padding: 10px;
121 |   align-items: stretch;
122 |   justify-content: space-between;
123 |   flex-wrap: wrap;
124 |   max-width: 100%;
125 |   margin: 0 auto;
126 | }
127 | 
128 | .card {
129 |   width: 400px;
130 |   max-width: 100%;
131 |   border-radius: 2px;
132 |   overflow: hidden;
133 |   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.093);
134 |   margin-bottom: 30px;
135 | }
136 | 
137 | .card iframe {
138 |   width: 100%;
139 |   height: 300px;
140 |   border: 0;
141 |   overflow: hidden;
142 | }
143 | 
144 | @media (max-width: 600px) {
145 |   .wrapper{
146 |     padding: 10px;
147 |   }
148 |   .container {
149 |     padding: 0;
150 |   }
151 |   .title{
152 |     font-size: 60px;
153 |   }
154 |   .card iframe {
155 |     width: calc(100vw - 20px);
156 |     height: calc(75vw);
157 |   }
158 | }
159 | 
160 | .card .card-title {
161 |   color: #666;
162 |   font-size: 16px;
163 |   display: flex;
164 |   align-items: center;
165 |   justify-content: space-between;
166 |   margin: 15px;
167 | }
168 | 
169 | .card .card-show{
170 |   font-size: 13px;
171 |   color: #77CFF7;
172 |   cursor: pointer;
173 | }
174 | 
175 | .card .card-show:hover{
176 |   text-decoration: underline;
177 | }
178 | 
179 | a,
180 | * a{
181 |   color: #77CFF7;
182 | }
183 | 
184 | .modal{
185 |   position: fixed;
186 |   left: 0;
187 |   top: 0;
188 |   width: 100vw;
189 |   height: 100vh;
190 |   z-index: 10000000;
191 |   display: flex;
192 |   align-items: center;
193 |   justify-content: center;
194 | }
195 | 
196 | .modal-content{
197 |   position: static;
198 |   width: 960px;
199 |   height: 90vh;
200 |   overflow: scroll;
201 | 
202 |   background: #fff;
203 |   padding: 10px;
204 |   border-radius: 4px;
205 |   z-index: 100;
206 |   text-align: left;
207 | }
208 | 
209 | .modal-content code,
210 | .modal-content pre{
211 |   font-family: Monaco;
212 | }
213 | 
214 | .modal-content pre {
215 |   padding: 10px;
216 |   background: #f0f0f0;
217 |   border-radius: 4px;
218 |   display: block;
219 | }
220 | 
221 | .modal-background{
222 |   position: absolute;
223 |   left: 0;
224 |   top: 0;
225 |   width: 100%;
226 |   height: 100%;
227 |   background: rgba(0, 0, 0, 0.4);
228 | }
229 | 
230 | </style>
231 | 


--------------------------------------------------------------------------------