From dc67ddc31c175b8e8ebc57bb70235dcfc2e8d550 Mon Sep 17 00:00:00 2001 From: Kirby Wu Date: Fri, 4 Oct 2019 15:27:10 +0800 Subject: [PATCH 01/22] refactor code structure and styles --- README.md | 2 + basic.styl | 71 - build.ls | 39 + build/circle/sample.html | 32 - build/default/sample.html | 86 - build/dual-ring/sample.html | 28 - build/ellipsis/sample.html | 59 - build/facebook/sample.html | 40 - build/grid/sample.html | 71 - build/heart/sample.html | 58 - build/hourglass/sample.html | 35 - build/ring/sample.html | 39 - build/ripple/sample.html | 36 - build/roller/sample.html | 88 - build/spinner/sample.html | 82 - dist/circle.html | 10 +- dist/default.html | 56 +- dist/dist.zip | Bin 6117 -> 0 bytes dist/dual-ring.html | 6 +- dist/ellipsis.html | 10 +- .../main.css => dist/entries/circle/index.css | 2 +- .../entries/circle/index.html | 0 .../entries/default/index.css | 54 +- .../entries/default/index.html | 0 .../entries/dual-ring/index.css | 4 +- .../entries/dual-ring/index.html | 0 .../entries/ellipsis/index.css | 8 +- .../entries/ellipsis/index.html | 0 .../entries/facebook/index.css | 4 +- .../entries/facebook/index.html | 0 .../main.css => dist/entries/grid/index.css | 2 +- .../main.html => dist/entries/grid/index.html | 0 .../main.css => dist/entries/heart/index.css | 4 +- .../entries/heart/index.html | 0 .../entries/hourglass/index.css | 4 +- .../entries/hourglass/index.html | 0 .../main.css => dist/entries/ring/index.css | 4 +- .../main.html => dist/entries/ring/index.html | 0 .../main.css => dist/entries/ripple/index.css | 2 +- .../entries/ripple/index.html | 0 .../main.css => dist/entries/roller/index.css | 30 +- .../entries/roller/index.html | 0 .../entries/spinner/index.css | 10 +- .../entries/spinner/index.html | 0 dist/facebook.html | 6 +- dist/grid.html | 4 +- dist/heart.html | 6 +- dist/hourglass.html | 6 +- index.css => dist/index.css | 588 ++-- dist/ring.html | 6 +- dist/ripple.html | 4 +- dist/roller.html | 32 +- dist/spinner.html | 12 +- index.html | 1 - index.pug | 18 - mixin.pug | 37 - package-lock.json | 3073 +++++++---------- package.json | 25 +- server.ls | 396 --- src/circle/{main.pug => index.pug} | 0 src/circle/index.styl | 24 + src/circle/main.styl | 23 - src/default/{main.pug => index.pug} | 0 src/default/index.styl | 29 + src/default/main.styl | 29 - src/dual-ring/{main.pug => index.pug} | 0 src/dual-ring/index.styl | 24 + src/dual-ring/main.styl | 24 - src/ellipsis/{main.pug => index.pug} | 0 src/ellipsis/{main.styl => index.styl} | 30 +- src/facebook/{main.pug => index.pug} | 0 src/facebook/index.styl | 35 + src/facebook/main.styl | 35 - src/grid/{main.pug => index.pug} | 0 src/grid/index.styl | 28 + src/grid/main.styl | 28 - src/heart/{main.pug => index.pug} | 0 src/heart/index.styl | 45 + src/heart/main.styl | 45 - src/hourglass/{main.pug => index.pug} | 0 src/hourglass/index.styl | 28 + src/hourglass/main.styl | 28 - src/mixin.pug | 37 + src/ring/{main.pug => index.pug} | 0 src/ring/index.styl | 30 + src/ring/main.styl | 30 - src/ripple/{main.pug => index.pug} | 0 src/ripple/index.styl | 31 + src/ripple/main.styl | 31 - src/roller/{main.pug => index.pug} | 0 src/roller/index.styl | 40 + src/roller/main.styl | 40 - src/spinner/{main.pug => index.pug} | 0 src/spinner/{main.styl => index.styl} | 20 +- vars.styl | 6 +- web/src/pug/index.pug | 29 + web/src/styl/index.styl | 0 index.styl => web/src/styl/test.styl | 0 web/static/assets/index.css | 606 ++++ web/static/css/index.css | 0 web/static/index.html | 9 + 101 files changed, 2688 insertions(+), 3866 deletions(-) delete mode 100644 basic.styl create mode 100755 build.ls delete mode 100644 build/circle/sample.html delete mode 100644 build/default/sample.html delete mode 100644 build/dual-ring/sample.html delete mode 100644 build/ellipsis/sample.html delete mode 100644 build/facebook/sample.html delete mode 100644 build/grid/sample.html delete mode 100644 build/heart/sample.html delete mode 100644 build/hourglass/sample.html delete mode 100644 build/ring/sample.html delete mode 100644 build/ripple/sample.html delete mode 100644 build/roller/sample.html delete mode 100644 build/spinner/sample.html delete mode 100644 dist/dist.zip rename build/circle/main.css => dist/entries/circle/index.css (95%) rename build/circle/main.html => dist/entries/circle/index.html (100%) rename build/default/main.css => dist/entries/default/index.css (68%) rename build/default/main.html => dist/entries/default/index.html (100%) rename build/dual-ring/main.css => dist/entries/dual-ring/index.css (77%) rename build/dual-ring/main.html => dist/entries/dual-ring/index.html (100%) rename build/ellipsis/main.css => dist/entries/ellipsis/index.css (90%) rename build/ellipsis/main.html => dist/entries/ellipsis/index.html (100%) rename build/facebook/main.css => dist/entries/facebook/index.css (91%) rename build/facebook/main.html => dist/entries/facebook/index.html (100%) rename build/grid/main.css => dist/entries/grid/index.css (97%) rename build/grid/main.html => dist/entries/grid/index.html (100%) rename build/heart/main.css => dist/entries/heart/index.css (93%) rename build/heart/main.html => dist/entries/heart/index.html (100%) rename build/hourglass/main.css => dist/entries/hourglass/index.css (85%) rename build/hourglass/main.html => dist/entries/hourglass/index.html (100%) rename build/ring/main.css => dist/entries/ring/index.css (85%) rename build/ring/main.html => dist/entries/ring/index.html (100%) rename build/ripple/main.css => dist/entries/ripple/index.css (93%) rename build/ripple/main.html => dist/entries/ripple/index.html (100%) rename build/roller/main.css => dist/entries/roller/index.css (80%) rename build/roller/main.html => dist/entries/roller/index.html (100%) rename build/spinner/main.css => dist/entries/spinner/index.css (94%) rename build/spinner/main.html => dist/entries/spinner/index.html (100%) rename index.css => dist/index.css (87%) delete mode 100644 index.html delete mode 100644 index.pug delete mode 100644 mixin.pug delete mode 100644 server.ls rename src/circle/{main.pug => index.pug} (100%) create mode 100644 src/circle/index.styl delete mode 100644 src/circle/main.styl rename src/default/{main.pug => index.pug} (100%) create mode 100644 src/default/index.styl delete mode 100644 src/default/main.styl rename src/dual-ring/{main.pug => index.pug} (100%) create mode 100644 src/dual-ring/index.styl delete mode 100644 src/dual-ring/main.styl rename src/ellipsis/{main.pug => index.pug} (100%) rename src/ellipsis/{main.styl => index.styl} (51%) rename src/facebook/{main.pug => index.pug} (100%) create mode 100644 src/facebook/index.styl delete mode 100644 src/facebook/main.styl rename src/grid/{main.pug => index.pug} (100%) create mode 100644 src/grid/index.styl delete mode 100644 src/grid/main.styl rename src/heart/{main.pug => index.pug} (100%) create mode 100644 src/heart/index.styl delete mode 100644 src/heart/main.styl rename src/hourglass/{main.pug => index.pug} (100%) create mode 100644 src/hourglass/index.styl delete mode 100644 src/hourglass/main.styl create mode 100644 src/mixin.pug rename src/ring/{main.pug => index.pug} (100%) create mode 100644 src/ring/index.styl delete mode 100644 src/ring/main.styl rename src/ripple/{main.pug => index.pug} (100%) create mode 100644 src/ripple/index.styl delete mode 100644 src/ripple/main.styl rename src/roller/{main.pug => index.pug} (100%) create mode 100644 src/roller/index.styl delete mode 100644 src/roller/main.styl rename src/spinner/{main.pug => index.pug} (100%) rename src/spinner/{main.styl => index.styl} (50%) create mode 100644 web/src/pug/index.pug create mode 100644 web/src/styl/index.styl rename index.styl => web/src/styl/test.styl (100%) create mode 100644 web/static/assets/index.css create mode 100644 web/static/css/index.css create mode 100644 web/static/index.html diff --git a/README.md b/README.md index a846130..3f31be9 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,8 @@ License All loader files here are released under CC0 License. However, you could attribute to this link: [loading.io css spinner ( https://loading.io/css/ )](https://loading.io/css/) to give loading.io a thumbs-up. +Other source codes are released under MIT License. + Other Resources ---------------- diff --git a/basic.styl b/basic.styl deleted file mode 100644 index ee0415c..0000000 --- a/basic.styl +++ /dev/null @@ -1,71 +0,0 @@ -transition() - if index(vendors, 'ms') != null && index(vendors, 'ms') >= 0 - -ms-transition arguments - if index(vendors, 'moz') != null && index(vendors, 'moz') >= 0 - -moz-transition arguments - if index(vendors, 'webkit') != null && index(vendors, 'webkit') >= 0 - -webkit-transition arguments - if index(vendors, 'o') != null && index(vendors, 'o') >= 0 - -o-transition arguments - if index(vendors, 'official') != null && index(vendors, 'official') >= 0 - transition arguments - -transform() - if index(vendors, 'ms') != null && index(vendors, 'ms') >= 0 - -ms-transform arguments - if index(vendors, 'moz') != null && index(vendors, 'moz') >= 0 - -moz-transform arguments - if index(vendors, 'webkit') != null && index(vendors, 'webkit') >= 0 - -webkit-transform arguments - if index(vendors, 'o') != null && index(vendors, 'o') >= 0 - -o-transform arguments - if index(vendors, 'official') != null && index(vendors, 'official') >= 0 - transform arguments - -transform-origin() - if index(vendors, 'ms') != null && index(vendors, 'ms') >= 0 - -ms-transform-origin arguments - if index(vendors, 'moz') != null && index(vendors, 'moz') >= 0 - -moz-transform-origin arguments - if index(vendors, 'webkit') != null && index(vendors, 'webkit') >= 0 - -webkit-transform-origin arguments - if index(vendors, 'o') != null && index(vendors, 'o') >= 0 - -o-transform-origin arguments - if index(vendors, 'official') != null && index(vendors, 'official') >= 0 - transform-origin arguments - -animation() - if index(vendors, 'ms') != null && index(vendors, 'ms') >= 0 - -ms-animation arguments - if index(vendors, 'moz') != null && index(vendors, 'moz') >= 0 - -moz-animation arguments - if index(vendors, 'webkit') != null && index(vendors, 'webkit') >= 0 - -webkit-animation arguments - if index(vendors, 'o') != null && index(vendors, 'o') >= 0 - -o-animation arguments - if index(vendors, 'official') != null && index(vendors, 'official') >= 0 - animation arguments - -animation-delay() - if index(vendors, 'ms') != null && index(vendors, 'ms') >= 0 - -ms-animation-delay arguments - if index(vendors, 'moz') != null && index(vendors, 'moz') >= 0 - -moz-animation-delay arguments - if index(vendors, 'webkit') != null && index(vendors, 'webkit') >= 0 - -webkit-animation-delay arguments - if index(vendors, 'o') != null && index(vendors, 'o') >= 0 - -o-animation-delay arguments - if index(vendors, 'official') != null && index(vendors, 'official') >= 0 - animation-delay: arguments - -animation-timing-function() - if index(vendors, 'ms') != null && index(vendors, 'ms') >= 0 - -ms-animation-timing-function arguments - if index(vendors, 'moz') != null && index(vendors, 'moz') >= 0 - -moz-animation-timing-function arguments - if index(vendors, 'webkit') != null && index(vendors, 'webkit') >= 0 - -webkit-animation-timing-function arguments - if index(vendors, 'o') != null && index(vendors, 'o') >= 0 - -o-animation-timing-function arguments - if index(vendors, 'official') != null && index(vendors, 'official') >= 0 - animation-timing-function arguments diff --git a/build.ls b/build.ls new file mode 100755 index 0000000..0dbcaee --- /dev/null +++ b/build.ls @@ -0,0 +1,39 @@ +require! <[fs fs-extra progress colors stylus pug]> + +console.log "Build all CSS-spinners..." + +progress-bar = (total = 10, text = "converting") -> + bar = new progress( + " #text [#{':bar'.yellow}] #{':percent'.cyan} :etas", + { total: total, width: 60, complete: '#' } + ) + +spinners = fs.readdir-sync \src/ + .filter -> fs.lstat-sync "src/#it" .is-directory! + +bar = progress-bar spinners.length, "Build Spinners" +vars = fs.read-file-sync "vars.styl" .toString! +all-css = "" + +spinners.map -> + src = do + stylus: [vars, fs.read-file-sync("src/#it/index.styl").toString!].join(\\n) + pug: fs.read-file-sync "src/#it/index.pug" .toString! + css = stylus src.stylus .render! + all-css += css + html = pug.render src.pug + html-css = """ + + #html + """ + fs-extra.ensure-dir-sync "dist/entries/#it" + fs.write-file-sync "dist/entries/#it/index.css", css + fs.write-file-sync "dist/entries/#it/index.html", html + fs.write-file-sync "dist/#it.html", html-css + bar.tick! + +fs.write-file-sync "dist/index.css", all-css +fs.write-file-sync "web/static/assets/index.css", all-css +console.log "\nFinished." diff --git a/build/circle/sample.html b/build/circle/sample.html deleted file mode 100644 index 00ca178..0000000 --- a/build/circle/sample.html +++ /dev/null @@ -1,32 +0,0 @@ - -
\ No newline at end of file diff --git a/build/default/sample.html b/build/default/sample.html deleted file mode 100644 index c2982f9..0000000 --- a/build/default/sample.html +++ /dev/null @@ -1,86 +0,0 @@ - -
\ No newline at end of file diff --git a/build/dual-ring/sample.html b/build/dual-ring/sample.html deleted file mode 100644 index b0d5a1f..0000000 --- a/build/dual-ring/sample.html +++ /dev/null @@ -1,28 +0,0 @@ - -
\ No newline at end of file diff --git a/build/ellipsis/sample.html b/build/ellipsis/sample.html deleted file mode 100644 index 120aeaf..0000000 --- a/build/ellipsis/sample.html +++ /dev/null @@ -1,59 +0,0 @@ - -
\ No newline at end of file diff --git a/build/facebook/sample.html b/build/facebook/sample.html deleted file mode 100644 index 60ff738..0000000 --- a/build/facebook/sample.html +++ /dev/null @@ -1,40 +0,0 @@ - -
\ No newline at end of file diff --git a/build/grid/sample.html b/build/grid/sample.html deleted file mode 100644 index c7b4b2a..0000000 --- a/build/grid/sample.html +++ /dev/null @@ -1,71 +0,0 @@ - -
\ No newline at end of file diff --git a/build/heart/sample.html b/build/heart/sample.html deleted file mode 100644 index 3623a98..0000000 --- a/build/heart/sample.html +++ /dev/null @@ -1,58 +0,0 @@ - -
\ No newline at end of file diff --git a/build/hourglass/sample.html b/build/hourglass/sample.html deleted file mode 100644 index 66ba0a5..0000000 --- a/build/hourglass/sample.html +++ /dev/null @@ -1,35 +0,0 @@ - -
\ No newline at end of file diff --git a/build/ring/sample.html b/build/ring/sample.html deleted file mode 100644 index 33da2cd..0000000 --- a/build/ring/sample.html +++ /dev/null @@ -1,39 +0,0 @@ - -
\ No newline at end of file diff --git a/build/ripple/sample.html b/build/ripple/sample.html deleted file mode 100644 index bd17e60..0000000 --- a/build/ripple/sample.html +++ /dev/null @@ -1,36 +0,0 @@ - -
\ No newline at end of file diff --git a/build/roller/sample.html b/build/roller/sample.html deleted file mode 100644 index 983c30d..0000000 --- a/build/roller/sample.html +++ /dev/null @@ -1,88 +0,0 @@ - -
\ No newline at end of file diff --git a/build/spinner/sample.html b/build/spinner/sample.html deleted file mode 100644 index 206451c..0000000 --- a/build/spinner/sample.html +++ /dev/null @@ -1,82 +0,0 @@ - - \ No newline at end of file diff --git a/dist/circle.html b/dist/circle.html index e991a26..5423b20 100644 --- a/dist/circle.html +++ b/dist/circle.html @@ -1,11 +1,15 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/dist/default.html b/dist/default.html index c2982f9..fa96f19 100644 --- a/dist/default.html +++ b/dist/default.html @@ -1,5 +1,5 @@ - #html - """ - - if type == \other => return - if type == \ls => - if /src\/ls/.exec src => - try - files = fs.readdir-sync \src/ls/ .map -> "src/ls/#it" - files = files.filter -> (/\/\./.exec it) == null - #result = [uglify.minify(lsc.compile(fs.read-file-sync(file)toString!,{bare:true}),{fromString:true}).code for file in files].join("") - # uglify gives undefined. debug this later... - result = [lsc.compile(fs.read-file-sync(file)toString!,{bare:true}) for file in files].join("") - fs.write-file-sync "build.min.js", result - console.log "[BUILD] #src --> build.min.js" - catch - console.log "[BUILD] #src failed: " - console.log e.message - return - else => - des = src.replace /\.ls$/, ".js" - try - mkdir-recurse path.dirname(des) - fs.write-file-sync( - des, - # uglify gives undefined. debug this later... - lsc.compile(fs.read-file-sync(src)toString!,{bare:true}) - ) - console.log "[BUILD] #src --> #des" - catch - console.log "[BUILD] #src failed: " - console.log e.message - return - if type == \styl => - if /(basic|vars)\.styl/.exec it => return - try - styl-tree.parse src - srcs = styl-tree.find-root src - catch - console.log "[BUILD] #src failed: " - console.log e.message - - console.log "[BUILD] recursive from #src:" - for src in srcs - try - des = src.replace(/src\/styl/, "static/css").replace(/\.styl$/, ".css") - code = fs.read-file-sync(src)toString! - if /^\/\/- ?(module) ?/.exec(code) => continue - stylus code - .set \filename, src - .define 'index', (a,b) -> - a = (a.string or a.val).split(' ') - return new stylus.nodes.Unit(a.indexOf b.val) - .render (e, css) -> - if e => - console.log "[BUILD] #src failed: " - console.log " >>>", e.name - console.log " >>>", e.message - else => - mkdir-recurse path.dirname(des) - fs.write-file-sync des, css - console.log "[BUILD] #src --> #des" - catch - console.log "[BUILD] #src failed: " - console.log e.message - - if type == \jade => - des = src.replace /\.jade$/, ".html" - try - code = fs.read-file-sync src .toString! - if /^\/\/- ?(module|view) ?/.exec(code) => return - desdir = path.dirname(des) - if !fs.exists-sync(desdir) or !fs.stat-sync(desdir).is-directory! => mkdir-recurse desdir - fs.write-file-sync des, jade.render code, {filename: src, basedir: path.join(cwd)} <<< jade-extapi - console.log "[BUILD] #src --> #des" - catch - console.log "[BUILD] #src failed: " - console.log e.message - return - - if type == \pug => - des = src.replace /\.pug/, ".html" - try - code = fs.read-file-sync src .toString! - if /^\/\/- ?(module|view) ?/.exec(code) => return - desdir = path.dirname(des) - if !fs.exists-sync(desdir) or !fs.stat-sync(desdir).is-directory! => mkdir-recurse desdir - fs.write-file-sync des, pug.render code, {filename: src, basedir: path.join(cwd)} <<< jade-extapi - console.log "[BUILD] #src --> #des" - catch - console.log "[BUILD] #src failed: " - console.log e.message - return - - -watcher = chokidar.watch watch-path, ignored: ignore-func, persistent: true - .on \add, update-file - .on \change, update-file - -http.createServer server .listen 9999, \0.0.0.0 - -console.log "running server on 0.0.0.0:9999" diff --git a/src/circle/main.pug b/src/circle/index.pug similarity index 100% rename from src/circle/main.pug rename to src/circle/index.pug diff --git a/src/circle/index.styl b/src/circle/index.styl new file mode 100644 index 0000000..8aacd3d --- /dev/null +++ b/src/circle/index.styl @@ -0,0 +1,24 @@ +//- module +@keyframes lds-circle + 0%, 100% + animation-timing-function: cubic-bezier(.5,0,1,.5) + 0% + transform: rotateY(0deg) + 50% + transform: rotateY(1800deg) + animation-timing-function: cubic-bezier(0,.5,.5,1) + 100% + transform: rotateY(3600deg) + +.lds-circle + display: inline-block + transform: translateZ(1px) + +.lds-circle > div + display: inline-block + width: prec-round(size * .8) + height: prec-round(size * .8) + margin: prec-round(size * .1) + background: color.fg + border-radius: 50% + animation: lds-circle (speed * 2) cubic-bezier(0,.2,.8,1) infinite diff --git a/src/circle/main.styl b/src/circle/main.styl deleted file mode 100644 index a010057..0000000 --- a/src/circle/main.styl +++ /dev/null @@ -1,23 +0,0 @@ -//- module -@keyframes lds-circle - 0%, 100% - animation-timing-function(cubic-bezier(.5,0,1,.5)) - 0% - transform(rotateY(0deg)) - 50% - transform(rotateY(1800deg)) - animation-timing-function(cubic-bezier(0,.5,.5,1)) - 100% - transform(rotateY(3600deg)) - -.lds-circle - display: inline-block - transform: translateZ(1px) -.lds-circle > div - display: inline-block - width: round(size * .8) - height: round(size * .8) - margin: round(size * .1) - border-radius: 50% - background: color.fg - animation(lds-circle (speed * 2) cubic-bezier(0,.2,.8,1) infinite) diff --git a/src/default/main.pug b/src/default/index.pug similarity index 100% rename from src/default/main.pug rename to src/default/index.pug diff --git a/src/default/index.styl b/src/default/index.styl new file mode 100644 index 0000000..fc284e5 --- /dev/null +++ b/src/default/index.styl @@ -0,0 +1,29 @@ +//- module +ballSize = size * .08 +radius = (size - ballSize) * .4 + +@keyframes lds-default + 0%,20%,80%,100% + transform: scale(1) + 50% + transform: scale(1.5) + +.lds-default + display: inline-block + position: relative + width: prec-round(size) + height: prec-round(size) + +.lds-default div + position: absolute + width: prec-round(ballSize) + height: prec-round(ballSize) + background: color.fg + border-radius: 50% + animation: lds-default speed linear infinite + +for angle,key in 0deg 30deg 60deg 90deg 120deg 150deg 180deg 210deg 240deg 270deg 300deg 330deg + .lds-default div:nth-child({key + 1}) + animation-delay: speed * (key * -1 / 12) + top: prec-round((size - ballSize) * .5 + sin(-1 * angle) * radius) + left: prec-round((size - ballSize) * .5 + cos(-1 * angle) * radius) diff --git a/src/default/main.styl b/src/default/main.styl deleted file mode 100644 index 40306a6..0000000 --- a/src/default/main.styl +++ /dev/null @@ -1,29 +0,0 @@ -//- module -ballSize = size * .08 -radius = (size - ballSize) * .4 - -@keyframes lds-default - 0%,20%,80%,100% - transform(scale(1)) - 50% - transform(scale(1.5)) - -.lds-default - display: inline-block - position: relative - width: round(size) - height: round(size) - -.lds-default div - position: absolute - width: round(ballSize) - height: round(ballSize) - background: color.fg - border-radius: 50% - animation(lds-default speed linear infinite) - -for angle,key in 0deg 30deg 60deg 90deg 120deg 150deg 180deg 210deg 240deg 270deg 300deg 330deg - .lds-default div:nth-child({key + 1}) - animation-delay(key * -1 * speed / 12) - top: round((size - ballSize) * .5 + sin(-1 * angle) * radius) - left: round((size - ballSize) * .5 + cos(-1 * angle) * radius) diff --git a/src/dual-ring/main.pug b/src/dual-ring/index.pug similarity index 100% rename from src/dual-ring/main.pug rename to src/dual-ring/index.pug diff --git a/src/dual-ring/index.styl b/src/dual-ring/index.styl new file mode 100644 index 0000000..8000a20 --- /dev/null +++ b/src/dual-ring/index.styl @@ -0,0 +1,24 @@ +//- module +borderSize = size * .08 + +@keyframes lds-dual-ring + 0% + transform: rotate(0deg) + 100% + transform: rotate(360deg) + +.lds-dual-ring + display: inline-block + width: prec-round(size) + height: prec-round(size) + +.lds-dual-ring:after + content: " " + display: block + width: prec-round(size * .8) + height: prec-round(size * .8) + margin: prec-round(size * .1) + border-radius: 50% + border: prec-round(borderSize) solid color.fg + border-color: color.fg transparent color.fg transparent + animation: lds-dual-ring speed linear infinite diff --git a/src/dual-ring/main.styl b/src/dual-ring/main.styl deleted file mode 100644 index 865a4f8..0000000 --- a/src/dual-ring/main.styl +++ /dev/null @@ -1,24 +0,0 @@ -//- module -borderSize = size * .08 - -@keyframes lds-dual-ring - 0% - transform(rotate(0deg)) - 100% - transform(rotate(360deg)) - -.lds-dual-ring - display: inline-block - width: round(size) - height: round(size) - -.lds-dual-ring:after - content: " " - display: block - width: round(size * .8) - height: round(size * .8) - margin: round(size * .1) - border-radius: 50% - border: round(borderSize) solid color.fg - border-color: color.fg transparent color.fg transparent - animation(lds-dual-ring speed linear infinite) diff --git a/src/ellipsis/main.pug b/src/ellipsis/index.pug similarity index 100% rename from src/ellipsis/main.pug rename to src/ellipsis/index.pug diff --git a/src/ellipsis/main.styl b/src/ellipsis/index.styl similarity index 51% rename from src/ellipsis/main.styl rename to src/ellipsis/index.styl index 1541ae3..28a5f42 100644 --- a/src/ellipsis/main.styl +++ b/src/ellipsis/index.styl @@ -6,29 +6,29 @@ mySpeed = speed * .5 .lds-ellipsis display: inline-block position: relative - width: round(size) - height: round(size) + width: prec-round(size) + height: prec-round(size) .lds-ellipsis div position: absolute - top: round((size - ballSize) * .5) - width: round(ballSize) - height: round(ballSize) + top: prec-round((size - ballSize) * .5) + width: prec-round(ballSize) + height: prec-round(ballSize) border-radius: 50% background: color.fg - animation-timing-function(cubic-bezier(0,1,1,0)) + animation-timing-function: cubic-bezier(0,1,1,0) .lds-ellipsis div:nth-child(1) - left: round(gapSize) - animation(lds-ellipsis1 mySpeed infinite) + left: prec-round(gapSize) + animation: lds-ellipsis1 mySpeed infinite .lds-ellipsis div:nth-child(2) - left: round(gapSize) - animation(lds-ellipsis2 mySpeed infinite) + left: prec-round(gapSize) + animation: lds-ellipsis2 mySpeed infinite .lds-ellipsis div:nth-child(3) - left: round(gapSize * 4) - animation(lds-ellipsis2 mySpeed infinite) + left: prec-round(gapSize * 4) + animation: lds-ellipsis2 mySpeed infinite .lds-ellipsis div:nth-child(4) - left: round(gapSize * 7) - animation(lds-ellipsis3 mySpeed infinite) + left: prec-round(gapSize * 7) + animation: lds-ellipsis3 mySpeed infinite @keyframes lds-ellipsis1 0% @@ -46,4 +46,4 @@ mySpeed = speed * .5 0% transform: translate(0,0) 100% - transform: translate(round(gapSize * 3),0) + transform: translate(prec-round(gapSize * 3),0) diff --git a/src/facebook/main.pug b/src/facebook/index.pug similarity index 100% rename from src/facebook/main.pug rename to src/facebook/index.pug diff --git a/src/facebook/index.styl b/src/facebook/index.styl new file mode 100644 index 0000000..e0e690d --- /dev/null +++ b/src/facebook/index.styl @@ -0,0 +1,35 @@ +//- module + +barWidth = size / 5 +gapSize = size / 10 + +@keyframes lds-facebook + 0% + top: prec-round(size * .1) + height: prec-round(size * .8) + 50%, 100% + top: prec-round(size * .3) + height: prec-round(size * .4) + +.lds-facebook + display: inline-block + position: relative + width: prec-round(size) + height: prec-round(size) + +.lds-facebook div + display: inline-block + position: absolute + left: prec-round(gapSize) + width: prec-round(barWidth) + background: color.fg + animation: lds-facebook speed cubic-bezier(0,.5,.5,1) infinite +.lds-facebook div:nth-child(1) + left: prec-round(gapSize * 1) + animation-delay: -0.2 * speed +.lds-facebook div:nth-child(2) + left: prec-round(gapSize * 4) + animation-delay: -0.1 * speed +.lds-facebook div:nth-child(3) + left: prec-round(gapSize * 7) + animation-delay: 0s diff --git a/src/facebook/main.styl b/src/facebook/main.styl deleted file mode 100644 index 12274d8..0000000 --- a/src/facebook/main.styl +++ /dev/null @@ -1,35 +0,0 @@ -//- module - -barWidth = size / 5 -gapSize = size / 10 - -@keyframes lds-facebook - 0% - top: round(size * .1) - height: round(size * .8) - 50%, 100% - top: round(size * .3) - height: round(size * .4) - -.lds-facebook - display: inline-block - position: relative - width: round(size) - height: round(size) - -.lds-facebook div - display: inline-block - position: absolute - left: round(gapSize) - width: round(barWidth) - background: color.fg - animation(lds-facebook speed cubic-bezier(0,.5,.5,1) infinite) -.lds-facebook div:nth-child(1) - left: round(gapSize * 1) - animation-delay(-0.2 * speed) -.lds-facebook div:nth-child(2) - left: round(gapSize * 4) - animation-delay(-0.1 * speed) -.lds-facebook div:nth-child(3) - left: round(gapSize * 7) - animation-delay(0) diff --git a/src/grid/main.pug b/src/grid/index.pug similarity index 100% rename from src/grid/main.pug rename to src/grid/index.pug diff --git a/src/grid/index.styl b/src/grid/index.styl new file mode 100644 index 0000000..e4c0308 --- /dev/null +++ b/src/grid/index.styl @@ -0,0 +1,28 @@ +//- module +ballSize = size / 5 +gapSize = size / 10 +@keyframes lds-grid + 0%, 100% + opacity: 1 + 50% + opacity: .5 + +.lds-grid + display: inline-block + position: relative + width: prec-round(size) + height: prec-round(size) + +.lds-grid div + position: absolute + width: prec-round(ballSize) + height: prec-round(ballSize) + border-radius: 50% + background: color.fg + animation: lds-grid speed linear infinite + +for key in 0 1 2 3 4 5 6 7 8 + .lds-grid div:nth-child({key + 1}) + top: prec-round(floor(key / 3) * (ballSize + gapSize) + gapSize) + left: prec-round(floor(key % 3) * (ballSize + gapSize) + gapSize) + animation-delay: speed * (-1 / 3 * (((key % 3) + floor(key / 3)) % 3)) diff --git a/src/grid/main.styl b/src/grid/main.styl deleted file mode 100644 index b758bc6..0000000 --- a/src/grid/main.styl +++ /dev/null @@ -1,28 +0,0 @@ -//- module -ballSize = size / 5 -gapSize = size / 10 -@keyframes lds-grid - 0%, 100% - opacity: 1 - 50% - opacity: .5 - -.lds-grid - display: inline-block - position: relative - width: round(size) - height: round(size) - -.lds-grid div - position: absolute - width: round(ballSize) - height: round(ballSize) - border-radius: 50% - background: color.fg - animation(lds-grid speed linear infinite) - -for key in 0 1 2 3 4 5 6 7 8 - .lds-grid div:nth-child({key + 1}) - top: round(floor(key / 3) * (ballSize + gapSize) + gapSize) - left: round(floor(key % 3) * (ballSize + gapSize) + gapSize) - animation-delay(-1 * speed / 3 * (((key % 3) + floor(key / 3)) % 3)) diff --git a/src/heart/main.pug b/src/heart/index.pug similarity index 100% rename from src/heart/main.pug rename to src/heart/index.pug diff --git a/src/heart/index.styl b/src/heart/index.styl new file mode 100644 index 0000000..f467c15 --- /dev/null +++ b/src/heart/index.styl @@ -0,0 +1,45 @@ +//- module +@keyframes lds-heart + 0% + transform: scale(.95) + 5% + transform: scale(1.1) + 39% + transform: scale(.85) + 45% + transform: scale(1) + 60% + transform: scale(.95) + 100% + transform: scale(.9) + +.lds-heart + display: inline-block + position: relative + width: prec-round(size) + height: prec-round(size) + transform: rotate(45deg) + transform-origin: prec-round(size * .5) prec-round(size * .5) + div + top: prec-round(size * .4) + left: prec-round(size * .4) + position: absolute + width: prec-round(size * .4) + height: prec-round(size * .4) + background: color.fg + animation: lds-heart speed infinite cubic-bezier(.215,.61,.355,1) + + div:after, div:before + content: " " + position: absolute + display: block + width: prec-round(size * .4) + height: prec-round(size * .4) + background: color.fg + div:before + left: prec-round(size * -.3) + border-radius: 50% 0 0 50% + + div:after + top: prec-round(size * -.3) + border-radius: 50% 50% 0 0 diff --git a/src/heart/main.styl b/src/heart/main.styl deleted file mode 100644 index daac580..0000000 --- a/src/heart/main.styl +++ /dev/null @@ -1,45 +0,0 @@ -//- module -@keyframes lds-heart - 0% - transform(scale(.95)) - 5% - transform(scale(1.1)) - 39% - transform(scale(.85)) - 45% - transform(scale(1)) - 60% - transform(scale(.95)) - 100% - transform(scale(.9)) - -.lds-heart - display: inline-block - position: relative - width: round(size) - height: round(size) - transform(rotate(45deg)) - transform-origin(round(size * .5), round(size * .5)) - div - top: round(size * .4) - left: round(size * .4) - position: absolute - width: round(size * .4) - height: round(size * .4) - background: color.fg - animation(lds-heart speed infinite cubic-bezier(.215,.61,.355,1)) - - div:after, div:before - content: " " - position: absolute - display: block - width: round(size * .4) - height: round(size * .4) - background: color.fg - div:before - left: round(size * -.3) - border-radius: 50% 0 0 50% - - div:after - top: round(size * -.3) - border-radius: 50% 50% 0 0 diff --git a/src/hourglass/main.pug b/src/hourglass/index.pug similarity index 100% rename from src/hourglass/main.pug rename to src/hourglass/index.pug diff --git a/src/hourglass/index.styl b/src/hourglass/index.styl new file mode 100644 index 0000000..df1e971 --- /dev/null +++ b/src/hourglass/index.styl @@ -0,0 +1,28 @@ +//- module +@keyframes lds-hourglass + 0% + transform: rotate(0) + animation-timing-function: cubic-bezier(.55,.055,.675,.19) + 50% + transform: rotate(900deg) + animation-timing-function: cubic-bezier(.215,.61,.355,1) + 100% + transform: rotate(1800deg) + +.lds-hourglass + display: inline-block + position: relative + width: prec-round(size) + height: prec-round(size) + +.lds-hourglass:after + content: " " + display: block + border-radius: 50% + width: 0 + height: 0 + margin: prec-round(size * .1) + box-sizing: border-box + border: prec-round(size * .4) solid color.fg + border-color: color.fg transparent color.fg transparent + animation: lds-hourglass speed infinite diff --git a/src/hourglass/main.styl b/src/hourglass/main.styl deleted file mode 100644 index 41a4183..0000000 --- a/src/hourglass/main.styl +++ /dev/null @@ -1,28 +0,0 @@ -//- module -@keyframes lds-hourglass - 0% - transform(rotate(0)) - animation-timing-function(cubic-bezier(.55,.055,.675,.19)) - 50% - transform(rotate(900deg)) - animation-timing-function(cubic-bezier(.215,.61,.355,1)) - 100% - transform(rotate(1800deg)) - -.lds-hourglass - display: inline-block - position: relative - width: round(size) - height: round(size) - -.lds-hourglass:after - content: " " - display: block - border-radius: 50% - width: 0 - height: 0 - margin: round(size * .1) - box-sizing: border-box - border: round(size * .4) solid color.fg - border-color: color.fg transparent color.fg transparent - animation(lds-hourglass speed infinite) diff --git a/src/mixin.pug b/src/mixin.pug new file mode 100644 index 0000000..7c8b7a0 --- /dev/null +++ b/src/mixin.pug @@ -0,0 +1,37 @@ +//- module +mixin lds-circle() + include circle/index.pug + +mixin lds-dual-ring() + include dual-ring/index.pug + +mixin lds-facebook() + include facebook/index.pug + +mixin lds-heart() + include heart/index.pug + +mixin lds-ring() + include ring/index.pug + +mixin lds-roller() + include roller/index.pug + +mixin lds-default() + include default/index.pug + +mixin lds-ellipsis() + include ellipsis/index.pug + +mixin lds-grid() + include grid/index.pug + +mixin lds-hourglass() + include hourglass/index.pug + +mixin lds-ripple() + include ripple/index.pug + +mixin lds-spinner() + include spinner/index.pug + diff --git a/src/ring/main.pug b/src/ring/index.pug similarity index 100% rename from src/ring/main.pug rename to src/ring/index.pug diff --git a/src/ring/index.styl b/src/ring/index.styl new file mode 100644 index 0000000..bb9c6d7 --- /dev/null +++ b/src/ring/index.styl @@ -0,0 +1,30 @@ +//- module +delta = -.125 +@keyframes lds-ring + 0% + transform: rotate(0deg) + 100% + transform: rotate(360deg) + +.lds-ring + display: inline-block + position: relative + width: prec-round(size) + height: prec-round(size) + div + box-sizing: border-box + display: block + position: absolute + width: prec-round(size * .8) + height: prec-round(size * .8) + margin: prec-round(size * .1) + border: prec-round(size * .1) solid color.fg + border-radius: 50% + animation: lds-ring speed cubic-bezier(.5,0,.5,1) infinite + border-color: color.fg transparent transparent transparent + div:nth-child(1) + animation-delay: delta * 3 * speed + div:nth-child(2) + animation-delay: delta * 2 * speed + div:nth-child(3) + animation-delay: delta * 1 * speed diff --git a/src/ring/main.styl b/src/ring/main.styl deleted file mode 100644 index eaf51b1..0000000 --- a/src/ring/main.styl +++ /dev/null @@ -1,30 +0,0 @@ -//- module -delta = -.125 -@keyframes lds-ring - 0% - transform(rotate(0deg)) - 100% - transform(rotate(360deg)) -.lds-ring - display: inline-block - position: relative - width: round(size) - height: round(size) - div - box-sizing: border-box - display: block - position: absolute - width: round(size * .8) - height: round(size * .8) - margin: round(size * .1) - border: round(size * .1) solid color.fg - border-radius: 50% - animation(lds-ring speed cubic-bezier(.5,0,.5,1) infinite) - border-color: color.fg transparent transparent transparent - div:nth-child(1) - animation-delay(delta * 3 * speed) - div:nth-child(2) - animation-delay(delta * 2 * speed) - div:nth-child(3) - animation-delay(delta * 1 * speed) - diff --git a/src/ripple/main.pug b/src/ripple/index.pug similarity index 100% rename from src/ripple/main.pug rename to src/ripple/index.pug diff --git a/src/ripple/index.styl b/src/ripple/index.styl new file mode 100644 index 0000000..cbc2696 --- /dev/null +++ b/src/ripple/index.styl @@ -0,0 +1,31 @@ +//- module +borderSize = 4px + +@keyframes lds-ripple + 0% + top: prec-round(size * .5) - borderSize + left: prec-round(size * .5) - borderSize + width: 0 + height: 0 + opacity: 1 + 100% + top: prec-round(size * .05) - borderSize + left: prec-round(size * .05) - borderSize + width: prec-round(size * .9) + height: prec-round(size * .9) + opacity: 0 + +.lds-ripple + display: inline-block + position: relative + width: prec-round(size) + height: prec-round(size) + +.lds-ripple div + position: absolute + border: prec-round(borderSize) solid color.fg + opacity: 1 + border-radius: 50% + animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite +.lds-ripple div:nth-child(2) + animation-delay: -.5s diff --git a/src/ripple/main.styl b/src/ripple/main.styl deleted file mode 100644 index b42ca6c..0000000 --- a/src/ripple/main.styl +++ /dev/null @@ -1,31 +0,0 @@ -//- module -borderSize = 4px - -@keyframes lds-ripple - 0% - top: round(size * .5) - borderSize - left: round(size * .5) - borderSize - width: 0 - height: 0 - opacity: 1 - 100% - top: round(size * .05) - borderSize - left: round(size * .05) - borderSize - width: round(size * .9) - height: round(size * .9) - opacity: 0 - -.lds-ripple - display: inline-block - position: relative - width: round(size) - height: round(size) - -.lds-ripple div - position: absolute - border: round(borderSize) solid color.fg - opacity: 1 - border-radius: 50% - animation(lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite) -.lds-ripple div:nth-child(2) - animation-delay(-.5s) diff --git a/src/roller/main.pug b/src/roller/index.pug similarity index 100% rename from src/roller/main.pug rename to src/roller/index.pug diff --git a/src/roller/index.styl b/src/roller/index.styl new file mode 100644 index 0000000..437a255 --- /dev/null +++ b/src/roller/index.styl @@ -0,0 +1,40 @@ +//- module +mySpeed = speed * 1 +ballSize = size * .09 +radius = size * .4 +dAngle = 15deg +oAngle = 90deg - dAngle * 8 * 0.5 + +@keyframes lds-roller + 0% + transform: rotate(0deg) + 100% + transform: rotate(360deg) + +.lds-roller + display: inline-block + position: relative + width: prec-round(size) + height: prec-round(size) + +.lds-roller div + animation: lds-roller mySpeed cubic-bezier(.5,0,.5,1) infinite + transform-origin: prec-round(size * .5) prec-round(size * .5) + +.lds-roller div:after + content: " " + display: block + position: absolute + width: prec-round(ballSize) + height: prec-round(ballSize) + border-radius: 50% + background: color.fg + margin: prec-round(ballSize * -.5) 0 0 prec-round(ballSize * -.5) + +for key in 1 2 3 4 5 6 7 8 + .lds-roller div:nth-child({key}) + animation-delay: -.03 * (key) * mySpeed + + .lds-roller div:nth-child({key}):after + top: prec-round(sin(oAngle + dAngle * key) * radius + size * .5) + left: prec-round(cos(oAngle + dAngle * key) * radius + size * .5) diff --git a/src/roller/main.styl b/src/roller/main.styl deleted file mode 100644 index 891ad6c..0000000 --- a/src/roller/main.styl +++ /dev/null @@ -1,40 +0,0 @@ -//- module -mySpeed = speed * 1 -ballSize = size * .09 -radius = size * .4 -dAngle = 15deg -oAngle = 90deg - dAngle * 8 * 0.5 - -@keyframes lds-roller - 0% - transform(rotate(0deg)) - 100% - transform(rotate(360deg)) - -.lds-roller - display: inline-block - position: relative - width: round(size) - height: round(size) - -.lds-roller div - animation(lds-roller mySpeed cubic-bezier(.5,0,.5,1) infinite) - transform-origin(round(size * .5), round(size * .5)) - -.lds-roller div:after - content: " " - display: block - position: absolute - width: round(ballSize) - height: round(ballSize) - border-radius: 50% - background: color.fg - margin: round(ballSize * -.5) 0 0 round(ballSize * -.5) - -for key in 1 2 3 4 5 6 7 8 - .lds-roller div:nth-child({key}) - animation-delay(-.03 * (key) * mySpeed) - - .lds-roller div:nth-child({key}):after - top: round(sin(oAngle + dAngle * key) * radius + size * .5) - left: round(cos(oAngle + dAngle * key) * radius + size * .5) diff --git a/src/spinner/main.pug b/src/spinner/index.pug similarity index 100% rename from src/spinner/main.pug rename to src/spinner/index.pug diff --git a/src/spinner/main.styl b/src/spinner/index.styl similarity index 50% rename from src/spinner/main.styl rename to src/spinner/index.styl index dcf7a6a..93ef078 100644 --- a/src/spinner/main.styl +++ b/src/spinner/index.styl @@ -13,23 +13,23 @@ height = size * .22 color: vendors display: inline-block position: relative - width: round(size) - height: round(size) + width: prec-round(size) + height: prec-round(size) div - transform-origin(round(size * .5), round(size * .5)) - animation(lds-spinner speed linear infinite) + transform-origin: prec-round(size * .5) prec-round(size * .5) + animation: lds-spinner speed linear infinite div:after content: " " display: block position: absolute - top: round(size * .5 - radius - height * .5) - left: round(size * .5 - width * .5) - width: round(width) - height: round(height) + top: prec-round(size * .5 - radius - height * .5) + left: prec-round(size * .5 - width * .5) + width: prec-round(width) + height: prec-round(height) border-radius: 20% background: color.fg for angle,key in 0 1 2 3 4 5 6 7 8 9 10 11 .lds-spinner div:nth-child({key + 1}) - transform(rotate(angle * 30deg)) - animation-delay(speed * -1 * (11 - key) / 12) + transform: rotate(angle * 30deg) + animation-delay: speed * (-1 * (11 - key) / 12) diff --git a/vars.styl b/vars.styl index d11f58d..bd810d2 100644 --- a/vars.styl +++ b/vars.styl @@ -1,7 +1,11 @@ vendors = official size = 80px speed = 1.2s +precision = 5 color = { bg: none - fg: #fff + fg: currentColor } + +prec-round(a) + round(a, precision) diff --git a/web/src/pug/index.pug b/web/src/pug/index.pug new file mode 100644 index 0000000..5ea7459 --- /dev/null +++ b/web/src/pug/index.pug @@ -0,0 +1,29 @@ +doctype html +html + head + link(rel="stylesheet",href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css") + link(rel="stylesheet",type="text/css",href="/assets/index.css") + + style: :stylus + body { background: #eee; color: #2bf; font-size: 8px; } + .item { margin: 32px } + + body + include ../../../src/mixin.pug + .w-50.mx-auto + .row + .col-md: .item: +lds-circle + .col-md: .item: +lds-dual-ring + .col-md: .item: +lds-facebook + .row + .col-md: .item: +lds-heart + .col-md: .item: +lds-ring + .col-md: .item: +lds-roller + .row + .col-md: .item: +lds-default + .col-md: .item: +lds-ellipsis + .col-md: .item: +lds-grid + .row + .col-md: .item: +lds-hourglass + .col-md: .item: +lds-ripple + .col-md: .item: +lds-spinner diff --git a/web/src/styl/index.styl b/web/src/styl/index.styl new file mode 100644 index 0000000..e69de29 diff --git a/index.styl b/web/src/styl/test.styl similarity index 100% rename from index.styl rename to web/src/styl/test.styl diff --git a/web/static/assets/index.css b/web/static/assets/index.css new file mode 100644 index 0000000..d150d46 --- /dev/null +++ b/web/static/assets/index.css @@ -0,0 +1,606 @@ +.lds-circle { + display: inline-block; + transform: translateZ(1px); +} +.lds-circle > div { + display: inline-block; + width: 64px; + height: 64px; + margin: 8px; + background: currentColor; + border-radius: 50%; + animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite; +} +@keyframes lds-circle { + 0%, 100% { + animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); + } + 0% { + transform: rotateY(0deg); + } + 50% { + transform: rotateY(1800deg); + animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); + } + 100% { + transform: rotateY(3600deg); + } +} +.lds-default { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-default div { + position: absolute; + width: 6.4px; + height: 6.4px; + background: currentColor; + border-radius: 50%; + animation: lds-default 1.2s linear infinite; +} +.lds-default div:nth-child(1) { + animation-delay: 0s; + top: 36.8px; + left: 66.24px; +} +.lds-default div:nth-child(2) { + animation-delay: -0.1s; + top: 22.08px; + left: 62.29579px; +} +.lds-default div:nth-child(3) { + animation-delay: -0.2s; + top: 11.30421px; + left: 51.52px; +} +.lds-default div:nth-child(4) { + animation-delay: -0.3s; + top: 7.36px; + left: 36.8px; +} +.lds-default div:nth-child(5) { + animation-delay: -0.4s; + top: 11.30421px; + left: 22.08px; +} +.lds-default div:nth-child(6) { + animation-delay: -0.5s; + top: 22.08px; + left: 11.30421px; +} +.lds-default div:nth-child(7) { + animation-delay: -0.6s; + top: 36.8px; + left: 7.36px; +} +.lds-default div:nth-child(8) { + animation-delay: -0.7s; + top: 51.52px; + left: 11.30421px; +} +.lds-default div:nth-child(9) { + animation-delay: -0.8s; + top: 62.29579px; + left: 22.08px; +} +.lds-default div:nth-child(10) { + animation-delay: -0.9s; + top: 66.24px; + left: 36.8px; +} +.lds-default div:nth-child(11) { + animation-delay: -1s; + top: 62.29579px; + left: 51.52px; +} +.lds-default div:nth-child(12) { + animation-delay: -1.1s; + top: 51.52px; + left: 62.29579px; +} +@keyframes lds-default { + 0%, 20%, 80%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.5); + } +} +.lds-dual-ring { + display: inline-block; + width: 80px; + height: 80px; +} +.lds-dual-ring:after { + content: " "; + display: block; + width: 64px; + height: 64px; + margin: 8px; + border-radius: 50%; + border: 6.4px solid currentColor; + border-color: currentColor transparent currentColor transparent; + animation: lds-dual-ring 1.2s linear infinite; +} +@keyframes lds-dual-ring { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +.lds-ellipsis { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-ellipsis div { + position: absolute; + top: 33.33333px; + width: 13.33333px; + height: 13.33333px; + border-radius: 50%; + background: currentColor; + animation-timing-function: cubic-bezier(0, 1, 1, 0); +} +.lds-ellipsis div:nth-child(1) { + left: 8px; + animation: lds-ellipsis1 0.6s infinite; +} +.lds-ellipsis div:nth-child(2) { + left: 8px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(3) { + left: 32px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(4) { + left: 56px; + animation: lds-ellipsis3 0.6s infinite; +} +@keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} +@keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} +@keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(24px, 0); + } +} +.lds-facebook { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-facebook div { + display: inline-block; + position: absolute; + left: 8px; + width: 16px; + background: currentColor; + animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite; +} +.lds-facebook div:nth-child(1) { + left: 8px; + animation-delay: -0.24s; +} +.lds-facebook div:nth-child(2) { + left: 32px; + animation-delay: -0.12s; +} +.lds-facebook div:nth-child(3) { + left: 56px; + animation-delay: 0s; +} +@keyframes lds-facebook { + 0% { + top: 8px; + height: 64px; + } + 50%, 100% { + top: 24px; + height: 32px; + } +} +.lds-grid { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-grid div { + position: absolute; + width: 16px; + height: 16px; + border-radius: 50%; + background: currentColor; + animation: lds-grid 1.2s linear infinite; +} +.lds-grid div:nth-child(1) { + top: 8px; + left: 8px; + animation-delay: 0s; +} +.lds-grid div:nth-child(2) { + top: 8px; + left: 32px; + animation-delay: -0.4s; +} +.lds-grid div:nth-child(3) { + top: 8px; + left: 56px; + animation-delay: -0.8s; +} +.lds-grid div:nth-child(4) { + top: 32px; + left: 8px; + animation-delay: -0.4s; +} +.lds-grid div:nth-child(5) { + top: 32px; + left: 32px; + animation-delay: -0.8s; +} +.lds-grid div:nth-child(6) { + top: 32px; + left: 56px; + animation-delay: -1.2s; +} +.lds-grid div:nth-child(7) { + top: 56px; + left: 8px; + animation-delay: -0.8s; +} +.lds-grid div:nth-child(8) { + top: 56px; + left: 32px; + animation-delay: -1.2s; +} +.lds-grid div:nth-child(9) { + top: 56px; + left: 56px; + animation-delay: -1.6s; +} +@keyframes lds-grid { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} +.lds-heart { + display: inline-block; + position: relative; + width: 80px; + height: 80px; + transform: rotate(45deg); + transform-origin: 40px 40px; +} +.lds-heart div { + top: 32px; + left: 32px; + position: absolute; + width: 32px; + height: 32px; + background: currentColor; + animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); +} +.lds-heart div:after, +.lds-heart div:before { + content: " "; + position: absolute; + display: block; + width: 32px; + height: 32px; + background: currentColor; +} +.lds-heart div:before { + left: -24px; + border-radius: 50% 0 0 50%; +} +.lds-heart div:after { + top: -24px; + border-radius: 50% 50% 0 0; +} +@keyframes lds-heart { + 0% { + transform: scale(0.95); + } + 5% { + transform: scale(1.1); + } + 39% { + transform: scale(0.85); + } + 45% { + transform: scale(1); + } + 60% { + transform: scale(0.95); + } + 100% { + transform: scale(0.9); + } +} +.lds-hourglass { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-hourglass:after { + content: " "; + display: block; + border-radius: 50%; + width: 0; + height: 0; + margin: 8px; + box-sizing: border-box; + border: 32px solid currentColor; + border-color: currentColor transparent currentColor transparent; + animation: lds-hourglass 1.2s infinite; +} +@keyframes lds-hourglass { + 0% { + transform: rotate(0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 50% { + transform: rotate(900deg); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + 100% { + transform: rotate(1800deg); + } +} +.lds-ring { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-ring div { + box-sizing: border-box; + display: block; + position: absolute; + width: 64px; + height: 64px; + margin: 8px; + border: 8px solid currentColor; + border-radius: 50%; + animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + border-color: currentColor transparent transparent transparent; +} +.lds-ring div:nth-child(1) { + animation-delay: -0.45s; +} +.lds-ring div:nth-child(2) { + animation-delay: -0.3s; +} +.lds-ring div:nth-child(3) { + animation-delay: -0.15s; +} +@keyframes lds-ring { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +.lds-ripple { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-ripple div { + position: absolute; + border: 4px solid currentColor; + opacity: 1; + border-radius: 50%; + animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; +} +.lds-ripple div:nth-child(2) { + animation-delay: -0.5s; +} +@keyframes lds-ripple { + 0% { + top: 36px; + left: 36px; + width: 0; + height: 0; + opacity: 1; + } + 100% { + top: 0px; + left: 0px; + width: 72px; + height: 72px; + opacity: 0; + } +} +.lds-roller { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-roller div { + animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + transform-origin: 40px 40px; +} +.lds-roller div:after { + content: " "; + display: block; + position: absolute; + width: 7.2px; + height: 7.2px; + border-radius: 50%; + background: currentColor; + margin: -3.6px 0 0 -3.6px; +} +.lds-roller div:nth-child(1) { + animation-delay: -0.036s; +} +.lds-roller div:nth-child(1):after { + top: 62.62742px; + left: 62.62742px; +} +.lds-roller div:nth-child(2) { + animation-delay: -0.072s; +} +.lds-roller div:nth-child(2):after { + top: 67.71281px; + left: 56px; +} +.lds-roller div:nth-child(3) { + animation-delay: -0.108s; +} +.lds-roller div:nth-child(3):after { + top: 70.90963px; + left: 48.28221px; +} +.lds-roller div:nth-child(4) { + animation-delay: -0.144s; +} +.lds-roller div:nth-child(4):after { + top: 72px; + left: 40px; +} +.lds-roller div:nth-child(5) { + animation-delay: -0.18s; +} +.lds-roller div:nth-child(5):after { + top: 70.90963px; + left: 31.71779px; +} +.lds-roller div:nth-child(6) { + animation-delay: -0.216s; +} +.lds-roller div:nth-child(6):after { + top: 67.71281px; + left: 24px; +} +.lds-roller div:nth-child(7) { + animation-delay: -0.252s; +} +.lds-roller div:nth-child(7):after { + top: 62.62742px; + left: 17.37258px; +} +.lds-roller div:nth-child(8) { + animation-delay: -0.288s; +} +.lds-roller div:nth-child(8):after { + top: 56px; + left: 12.28719px; +} +@keyframes lds-roller { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +.lds-spinner { + color: official; + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-spinner div { + transform-origin: 40px 40px; + animation: lds-spinner 1.2s linear infinite; +} +.lds-spinner div:after { + content: " "; + display: block; + position: absolute; + top: 3.2px; + left: 36.8px; + width: 6.4px; + height: 17.6px; + border-radius: 20%; + background: currentColor; +} +.lds-spinner div:nth-child(1) { + transform: rotate(0deg); + animation-delay: -1.1s; +} +.lds-spinner div:nth-child(2) { + transform: rotate(30deg); + animation-delay: -1s; +} +.lds-spinner div:nth-child(3) { + transform: rotate(60deg); + animation-delay: -0.9s; +} +.lds-spinner div:nth-child(4) { + transform: rotate(90deg); + animation-delay: -0.8s; +} +.lds-spinner div:nth-child(5) { + transform: rotate(120deg); + animation-delay: -0.7s; +} +.lds-spinner div:nth-child(6) { + transform: rotate(150deg); + animation-delay: -0.6s; +} +.lds-spinner div:nth-child(7) { + transform: rotate(180deg); + animation-delay: -0.5s; +} +.lds-spinner div:nth-child(8) { + transform: rotate(210deg); + animation-delay: -0.4s; +} +.lds-spinner div:nth-child(9) { + transform: rotate(240deg); + animation-delay: -0.3s; +} +.lds-spinner div:nth-child(10) { + transform: rotate(270deg); + animation-delay: -0.2s; +} +.lds-spinner div:nth-child(11) { + transform: rotate(300deg); + animation-delay: -0.1s; +} +.lds-spinner div:nth-child(12) { + transform: rotate(330deg); + animation-delay: 0s; +} +@keyframes lds-spinner { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} diff --git a/web/static/css/index.css b/web/static/css/index.css new file mode 100644 index 0000000..e69de29 diff --git a/web/static/index.html b/web/static/index.html new file mode 100644 index 0000000..9bde103 --- /dev/null +++ b/web/static/index.html @@ -0,0 +1,9 @@ +
\ No newline at end of file From 298c5f6ac4ad580b45ebb581ebfd2169a87d5ce6 Mon Sep 17 00:00:00 2001 From: Kirby Wu Date: Fri, 4 Oct 2019 16:38:55 +0800 Subject: [PATCH 02/22] build mixin file and remove all module comment --- build.ls | 6 ++++++ dist/mixin.pug | 24 ++++++++++++++++++++++++ src/circle/index.pug | 1 - src/default/index.pug | 1 - src/dual-ring/index.pug | 1 - src/ellipsis/index.pug | 2 -- src/facebook/index.pug | 1 - src/grid/index.pug | 1 - src/heart/index.pug | 1 - src/hourglass/index.pug | 1 - src/ring/index.pug | 1 - src/ripple/index.pug | 1 - src/roller/index.pug | 1 - src/spinner/index.pug | 1 - 14 files changed, 30 insertions(+), 13 deletions(-) create mode 100644 dist/mixin.pug diff --git a/build.ls b/build.ls index 0dbcaee..aa4024a 100755 --- a/build.ls +++ b/build.ls @@ -14,6 +14,7 @@ spinners = fs.readdir-sync \src/ bar = progress-bar spinners.length, "Build Spinners" vars = fs.read-file-sync "vars.styl" .toString! all-css = "" +all-pug = "" spinners.map -> src = do @@ -32,8 +33,13 @@ spinners.map -> fs.write-file-sync "dist/entries/#it/index.css", css fs.write-file-sync "dist/entries/#it/index.html", html fs.write-file-sync "dist/#it.html", html-css + all-pug += """ + mixin lds-#it() + #{src.pug.split(\\n).filter(->it).map(->" #it").join(\\n)}\n + """ bar.tick! fs.write-file-sync "dist/index.css", all-css fs.write-file-sync "web/static/assets/index.css", all-css +fs.write-file-sync "dist/mixin.pug", all-pug console.log "\nFinished." diff --git a/dist/mixin.pug b/dist/mixin.pug new file mode 100644 index 0000000..4c75dd9 --- /dev/null +++ b/dist/mixin.pug @@ -0,0 +1,24 @@ +mixin lds-circle() + .lds-circle: div +mixin lds-default() + .lds-default #[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div] +mixin lds-dual-ring() + .lds-dual-ring +mixin lds-ellipsis() + .lds-ellipsis #[div]#[div]#[div]#[div] +mixin lds-facebook() + .lds-facebook #[div]#[div]#[div] +mixin lds-grid() + .lds-grid #[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div] +mixin lds-heart() + .lds-heart: div +mixin lds-hourglass() + .lds-hourglass +mixin lds-ring() + .lds-ring #[div]#[div]#[div]#[div] +mixin lds-ripple() + .lds-ripple #[div]#[div] +mixin lds-roller() + .lds-roller #[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div] +mixin lds-spinner() + .lds-spinner #[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div] diff --git a/src/circle/index.pug b/src/circle/index.pug index 409c496..cc8b67f 100644 --- a/src/circle/index.pug +++ b/src/circle/index.pug @@ -1,2 +1 @@ -//- module .lds-circle: div diff --git a/src/default/index.pug b/src/default/index.pug index 66fd820..b662bfa 100644 --- a/src/default/index.pug +++ b/src/default/index.pug @@ -1,2 +1 @@ -//- module .lds-default #[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div] diff --git a/src/dual-ring/index.pug b/src/dual-ring/index.pug index 283f735..e1d373b 100644 --- a/src/dual-ring/index.pug +++ b/src/dual-ring/index.pug @@ -1,2 +1 @@ -//- module .lds-dual-ring diff --git a/src/ellipsis/index.pug b/src/ellipsis/index.pug index c3828c4..77bff3e 100644 --- a/src/ellipsis/index.pug +++ b/src/ellipsis/index.pug @@ -1,3 +1 @@ -//- module .lds-ellipsis #[div]#[div]#[div]#[div] - diff --git a/src/facebook/index.pug b/src/facebook/index.pug index 8acb632..d1e6283 100644 --- a/src/facebook/index.pug +++ b/src/facebook/index.pug @@ -1,2 +1 @@ -//- module .lds-facebook #[div]#[div]#[div] diff --git a/src/grid/index.pug b/src/grid/index.pug index 4c3934d..2326f09 100644 --- a/src/grid/index.pug +++ b/src/grid/index.pug @@ -1,2 +1 @@ -//- module .lds-grid #[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div] diff --git a/src/heart/index.pug b/src/heart/index.pug index 9fa3d36..ae50aff 100644 --- a/src/heart/index.pug +++ b/src/heart/index.pug @@ -1,2 +1 @@ -//- module .lds-heart: div diff --git a/src/hourglass/index.pug b/src/hourglass/index.pug index a1981f6..5adbb9e 100644 --- a/src/hourglass/index.pug +++ b/src/hourglass/index.pug @@ -1,2 +1 @@ -//- module .lds-hourglass diff --git a/src/ring/index.pug b/src/ring/index.pug index 7954071..c3a9994 100644 --- a/src/ring/index.pug +++ b/src/ring/index.pug @@ -1,2 +1 @@ -//- module .lds-ring #[div]#[div]#[div]#[div] diff --git a/src/ripple/index.pug b/src/ripple/index.pug index a69d547..7f3dd32 100644 --- a/src/ripple/index.pug +++ b/src/ripple/index.pug @@ -1,2 +1 @@ -//- module .lds-ripple #[div]#[div] diff --git a/src/roller/index.pug b/src/roller/index.pug index 983557c..ea11c8d 100644 --- a/src/roller/index.pug +++ b/src/roller/index.pug @@ -1,2 +1 @@ -//- module .lds-roller #[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div] diff --git a/src/spinner/index.pug b/src/spinner/index.pug index 383e17a..a2a31e3 100644 --- a/src/spinner/index.pug +++ b/src/spinner/index.pug @@ -1,2 +1 @@ -//- module .lds-spinner #[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div]#[div] From a848ef377530b35e7de1056dff1cc72331da16b3 Mon Sep 17 00:00:00 2001 From: Kirby Wu Date: Wed, 29 Apr 2020 23:33:20 +0800 Subject: [PATCH 03/22] fix ripple and heart alignment --- src/heart/index.styl | 4 ++-- src/ripple/index.styl | 16 ++++++++-------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/heart/index.styl b/src/heart/index.styl index f467c15..af3832e 100644 --- a/src/heart/index.styl +++ b/src/heart/index.styl @@ -21,8 +21,8 @@ transform: rotate(45deg) transform-origin: prec-round(size * .5) prec-round(size * .5) div - top: prec-round(size * .4) - left: prec-round(size * .4) + top: prec-round(size * .35) + left: prec-round(size * .35) position: absolute width: prec-round(size * .4) height: prec-round(size * .4) diff --git a/src/ripple/index.styl b/src/ripple/index.styl index cbc2696..244c465 100644 --- a/src/ripple/index.styl +++ b/src/ripple/index.styl @@ -3,16 +3,16 @@ borderSize = 4px @keyframes lds-ripple 0% - top: prec-round(size * .5) - borderSize - left: prec-round(size * .5) - borderSize - width: 0 - height: 0 + top: prec-round(size * .5 - borderSize) + left: prec-round(size * .5 - borderSize) + width: borderSize * 2 + height: borderSize * 2 opacity: 1 100% - top: prec-round(size * .05) - borderSize - left: prec-round(size * .05) - borderSize - width: prec-round(size * .9) - height: prec-round(size * .9) + top: 0 + left: 0 + width: prec-round(size) + height: prec-round(size) opacity: 0 .lds-ripple From 501500ce8dfb3096a924bf8696e21e2fc367840f Mon Sep 17 00:00:00 2001 From: Kirby Wu Date: Thu, 30 Apr 2020 00:10:23 +0800 Subject: [PATCH 04/22] add favicon to prevent error in dev console --- web/static/favicon.ico | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 web/static/favicon.ico diff --git a/web/static/favicon.ico b/web/static/favicon.ico new file mode 100644 index 0000000..e69de29 From b75ae10a7a20f99fc419853a0ddc3bda916e942d Mon Sep 17 00:00:00 2001 From: Kirby Wu Date: Thu, 30 Apr 2020 00:13:50 +0800 Subject: [PATCH 05/22] remove useless file in css --- web/src/styl/test.styl | 28 ---------------------------- 1 file changed, 28 deletions(-) delete mode 100644 web/src/styl/test.styl diff --git a/web/src/styl/test.styl b/web/src/styl/test.styl deleted file mode 100644 index f9f5340..0000000 --- a/web/src/styl/test.styl +++ /dev/null @@ -1,28 +0,0 @@ -@import 'vars.styl' -@import 'basic.styl' -@import 'src/default/main.styl' -@import 'src/grid/main.styl' -@import 'src/ellipsis/main.styl' -@import 'src/ripple/main.styl' -@import 'src/facebook/main.styl' -@import 'src/dual-ring/main.styl' -@import 'src/roller/main.styl' -@import 'src/heart/main.styl' -@import 'src/spinner/main.styl' -@import 'src/circle/main.styl' -@import 'src/hourglass/main.styl' -@import 'src/ring/main.styl' - -.block - width: size - height: size - background: color.bg - margin: 20px - box-shadow: 0 0px 0px rgba(0,0,0,.2) - border-radius: 2px - padding: 10px - transform: scale(1) - display: inline-block - -body - background: #fa5 From f605890324e8b949359a387c908549c82a110d27 Mon Sep 17 00:00:00 2001 From: Kirby Wu Date: Thu, 30 Apr 2020 00:14:14 +0800 Subject: [PATCH 06/22] relayout index.html --- web/.view/index.js | 434 ++++++++++++++++++++++++++++++++++++++++++ web/src/pug/index.pug | 48 +++-- web/static/index.html | 20 +- 3 files changed, 478 insertions(+), 24 deletions(-) create mode 100644 web/.view/index.js diff --git a/web/.view/index.js b/web/.view/index.js new file mode 100644 index 0000000..905310d --- /dev/null +++ b/web/.view/index.js @@ -0,0 +1,434 @@ + (function() { function pug_rethrow(n,e,r,t){if(!(n instanceof Error))throw n;if(!("undefined"==typeof window&&e||t))throw n.message+=" on line "+r,n;try{t=t||require("fs").readFileSync(e,"utf8")}catch(e){pug_rethrow(n,null,r)}var i=3,a=t.split("\n"),o=Math.max(r-i,0),h=Math.min(a.length,r+i),i=a.slice(o,h).map(function(n,e){var t=e+o+1;return(t==r?" > ":" ")+t+"| "+n}).join("\n");throw n.path=e,n.message=(e||"Pug")+":"+r+"\n"+i+"\n\n"+n.message,n}function template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;var pug_debug_filename, pug_debug_line;try {;pug_debug_line = 1;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003C!DOCTYPE html\u003E"; +;pug_debug_line = 2;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Chtml\u003E"; +;pug_debug_line = 3;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Chead\u003E"; +;pug_debug_line = 4;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fstackpath.bootstrapcdn.com\u002Fbootstrap\u002F4.3.1\u002Fcss\u002Fbootstrap.min.css\"\u003E"; +;pug_debug_line = 5;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"\u002Fassets\u002Findex.css\"\u003E"; +;pug_debug_line = 7;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cstyle\u003E"; +;pug_debug_line = 7;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "html,\nbody {\n width: 100%;\n height: 100%;\n}\nbody {\n background: linear-gradient(45deg, #eea518, #feb528);\n background-size: cover;\n color: #fff;\n font-size: 18px;\n}\n.item {\n margin: 32px auto;\n width: 80px;\n height: 80px;\n}\n\u003C\u002Fstyle\u003E\u003C\u002Fhead\u003E"; +;pug_debug_line = 18;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cbody\u003E"; +;pug_debug_line = 2;pug_debug_filename = "..\u002Fsrc\u002Fmixin.pug"; +pug_mixins["lds-circle"] = pug_interp = function(){ +var block = (this && this.block), attributes = (this && this.attributes) || {}; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fcircle\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"lds-circle\"\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fcircle\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +}; +;pug_debug_line = 5;pug_debug_filename = "..\u002Fsrc\u002Fmixin.pug"; +pug_mixins["lds-dual-ring"] = pug_interp = function(){ +var block = (this && this.block), attributes = (this && this.attributes) || {}; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdual-ring\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"lds-dual-ring\"\u003E\u003C\u002Fdiv\u003E"; +}; +;pug_debug_line = 8;pug_debug_filename = "..\u002Fsrc\u002Fmixin.pug"; +pug_mixins["lds-facebook"] = pug_interp = function(){ +var block = (this && this.block), attributes = (this && this.attributes) || {}; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Ffacebook\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"lds-facebook\"\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Ffacebook\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Ffacebook\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Ffacebook\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Ffacebook\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Ffacebook\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Ffacebook\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Ffacebook\u002Findex.pug"; +pug_html = pug_html + "\u003C\u002Fdiv\u003E"; +}; +;pug_debug_line = 11;pug_debug_filename = "..\u002Fsrc\u002Fmixin.pug"; +pug_mixins["lds-heart"] = pug_interp = function(){ +var block = (this && this.block), attributes = (this && this.attributes) || {}; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fheart\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"lds-heart\"\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fheart\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +}; +;pug_debug_line = 14;pug_debug_filename = "..\u002Fsrc\u002Fmixin.pug"; +pug_mixins["lds-ring"] = pug_interp = function(){ +var block = (this && this.block), attributes = (this && this.attributes) || {}; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fring\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"lds-ring\"\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fring\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fring\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fring\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fring\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fring\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fring\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fring\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fring\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fring\u002Findex.pug"; +pug_html = pug_html + "\u003C\u002Fdiv\u003E"; +}; +;pug_debug_line = 17;pug_debug_filename = "..\u002Fsrc\u002Fmixin.pug"; +pug_mixins["lds-roller"] = pug_interp = function(){ +var block = (this && this.block), attributes = (this && this.attributes) || {}; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"lds-roller\"\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Froller\u002Findex.pug"; +pug_html = pug_html + "\u003C\u002Fdiv\u003E"; +}; +;pug_debug_line = 20;pug_debug_filename = "..\u002Fsrc\u002Fmixin.pug"; +pug_mixins["lds-default"] = pug_interp = function(){ +var block = (this && this.block), attributes = (this && this.attributes) || {}; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"lds-default\"\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fdefault\u002Findex.pug"; +pug_html = pug_html + "\u003C\u002Fdiv\u003E"; +}; +;pug_debug_line = 23;pug_debug_filename = "..\u002Fsrc\u002Fmixin.pug"; +pug_mixins["lds-ellipsis"] = pug_interp = function(){ +var block = (this && this.block), attributes = (this && this.attributes) || {}; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fellipsis\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"lds-ellipsis\"\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fellipsis\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fellipsis\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fellipsis\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fellipsis\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fellipsis\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fellipsis\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fellipsis\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fellipsis\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fellipsis\u002Findex.pug"; +pug_html = pug_html + "\u003C\u002Fdiv\u003E"; +}; +;pug_debug_line = 26;pug_debug_filename = "..\u002Fsrc\u002Fmixin.pug"; +pug_mixins["lds-grid"] = pug_interp = function(){ +var block = (this && this.block), attributes = (this && this.attributes) || {}; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"lds-grid\"\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fgrid\u002Findex.pug"; +pug_html = pug_html + "\u003C\u002Fdiv\u003E"; +}; +;pug_debug_line = 29;pug_debug_filename = "..\u002Fsrc\u002Fmixin.pug"; +pug_mixins["lds-hourglass"] = pug_interp = function(){ +var block = (this && this.block), attributes = (this && this.attributes) || {}; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fhourglass\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"lds-hourglass\"\u003E\u003C\u002Fdiv\u003E"; +}; +;pug_debug_line = 32;pug_debug_filename = "..\u002Fsrc\u002Fmixin.pug"; +pug_mixins["lds-ripple"] = pug_interp = function(){ +var block = (this && this.block), attributes = (this && this.attributes) || {}; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fripple\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"lds-ripple\"\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fripple\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fripple\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fripple\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fripple\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fripple\u002Findex.pug"; +pug_html = pug_html + "\u003C\u002Fdiv\u003E"; +}; +;pug_debug_line = 35;pug_debug_filename = "..\u002Fsrc\u002Fmixin.pug"; +pug_mixins["lds-spinner"] = pug_interp = function(){ +var block = (this && this.block), attributes = (this && this.attributes) || {}; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"lds-spinner\"\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + ""; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 1;pug_debug_filename = "..\u002Fsrc\u002Fspinner\u002Findex.pug"; +pug_html = pug_html + "\u003C\u002Fdiv\u003E"; +}; +;pug_debug_line = 21;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"text-center py-4\"\u003E"; +;pug_debug_line = 22;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Ch1 class=\"mb-0\"\u003E"; +;pug_debug_line = 22;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "CSS Spinner\u003C\u002Fh1\u003E"; +;pug_debug_line = 23;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv\u003E"; +;pug_debug_line = 23;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "by "; +;pug_debug_line = 23;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Ca class=\"text-white\" href=\"https:\u002F\u002Floading.io\u002Fcss\"\u003E"; +;pug_debug_line = 23;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "loading.io\u003C\u002Fa\u003E"; +;pug_debug_line = 23;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 25;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"w-50 mx-auto\"\u003E"; +;pug_debug_line = 26;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"row text-center\"\u003E"; +;pug_debug_line = 27;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"col-sm\"\u003E"; +;pug_debug_line = 27;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"item\"\u003E"; +;pug_debug_line = 27;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_mixins["lds-circle"](); +pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 28;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"col-sm\"\u003E"; +;pug_debug_line = 28;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"item\"\u003E"; +;pug_debug_line = 28;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_mixins["lds-dual-ring"](); +pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 29;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"col-sm\"\u003E"; +;pug_debug_line = 29;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"item\"\u003E"; +;pug_debug_line = 29;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_mixins["lds-facebook"](); +pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 30;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"row text-center\"\u003E"; +;pug_debug_line = 31;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"col-sm\"\u003E"; +;pug_debug_line = 31;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"item\"\u003E"; +;pug_debug_line = 31;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_mixins["lds-heart"](); +pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 32;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"col-sm\"\u003E"; +;pug_debug_line = 32;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"item\"\u003E"; +;pug_debug_line = 32;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_mixins["lds-ring"](); +pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 33;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"col-sm\"\u003E"; +;pug_debug_line = 33;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"item\"\u003E"; +;pug_debug_line = 33;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_mixins["lds-roller"](); +pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 34;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"row text-center\"\u003E"; +;pug_debug_line = 35;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"col-sm\"\u003E"; +;pug_debug_line = 35;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"item\"\u003E"; +;pug_debug_line = 35;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_mixins["lds-default"](); +pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 36;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"col-sm\"\u003E"; +;pug_debug_line = 36;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"item\"\u003E"; +;pug_debug_line = 36;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_mixins["lds-ellipsis"](); +pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 37;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"col-sm\"\u003E"; +;pug_debug_line = 37;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"item\"\u003E"; +;pug_debug_line = 37;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_mixins["lds-grid"](); +pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 38;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"row text-center\"\u003E"; +;pug_debug_line = 39;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"col-sm\"\u003E"; +;pug_debug_line = 39;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"item\"\u003E"; +;pug_debug_line = 39;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_mixins["lds-hourglass"](); +pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 40;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"col-sm\"\u003E"; +;pug_debug_line = 40;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"item\"\u003E"; +;pug_debug_line = 40;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_mixins["lds-ripple"](); +pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +;pug_debug_line = 41;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"col-sm\"\u003E"; +;pug_debug_line = 41;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_html = pug_html + "\u003Cdiv class=\"item\"\u003E"; +;pug_debug_line = 41;pug_debug_filename = "src\u002Fpug\u002Findex.pug"; +pug_mixins["lds-spinner"](); +pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Fbody\u003E\u003C\u002Fhtml\u003E";} catch (err) {pug_rethrow(err, pug_debug_filename, pug_debug_line);};return pug_html;}; module.exports = template; })() \ No newline at end of file diff --git a/web/src/pug/index.pug b/web/src/pug/index.pug index 5ea7459..4b5599f 100644 --- a/web/src/pug/index.pug +++ b/web/src/pug/index.pug @@ -5,25 +5,37 @@ html link(rel="stylesheet",type="text/css",href="/assets/index.css") style: :stylus - body { background: #eee; color: #2bf; font-size: 8px; } - .item { margin: 32px } + html,body + width: 100% + height: 100% + body + background: linear-gradient(45deg,#eea518,#feb528) + background-size: cover + color: #fff + font-size: 18px + .item { margin: 32px auto; width: 80px; height: 80px } body include ../../../src/mixin.pug + + .text-center.py-4 + h1.mb-0 CSS Spinner + div by #[a.text-white(href="https://loading.io/css") loading.io] + .w-50.mx-auto - .row - .col-md: .item: +lds-circle - .col-md: .item: +lds-dual-ring - .col-md: .item: +lds-facebook - .row - .col-md: .item: +lds-heart - .col-md: .item: +lds-ring - .col-md: .item: +lds-roller - .row - .col-md: .item: +lds-default - .col-md: .item: +lds-ellipsis - .col-md: .item: +lds-grid - .row - .col-md: .item: +lds-hourglass - .col-md: .item: +lds-ripple - .col-md: .item: +lds-spinner + .row.text-center + .col-sm: .item: +lds-circle + .col-sm: .item: +lds-dual-ring + .col-sm: .item: +lds-facebook + .row.text-center + .col-sm: .item: +lds-heart + .col-sm: .item: +lds-ring + .col-sm: .item: +lds-roller + .row.text-center + .col-sm: .item: +lds-default + .col-sm: .item: +lds-ellipsis + .col-sm: .item: +lds-grid + .row.text-center + .col-sm: .item: +lds-hourglass + .col-sm: .item: +lds-ripple + .col-sm: .item: +lds-spinner diff --git a/web/static/index.html b/web/static/index.html index 9bde103..759486f 100644 --- a/web/static/index.html +++ b/web/static/index.html @@ -1,9 +1,17 @@ -
\ No newline at end of file +

CSS Spinner

\ No newline at end of file From d2187c158815f5ebd8f58bbe058e524fa6ca14c3 Mon Sep 17 00:00:00 2001 From: Kirby Wu Date: Thu, 30 Apr 2020 00:14:28 +0800 Subject: [PATCH 07/22] force border-box in every spinner --- dist/circle.html | 4 ++ dist/default.html | 4 ++ dist/dual-ring.html | 4 ++ dist/ellipsis.html | 4 ++ dist/entries/circle/index.css | 4 ++ dist/entries/default/index.css | 4 ++ dist/entries/dual-ring/index.css | 4 ++ dist/entries/ellipsis/index.css | 4 ++ dist/entries/facebook/index.css | 4 ++ dist/entries/grid/index.css | 4 ++ dist/entries/heart/index.css | 10 ++++- dist/entries/hourglass/index.css | 4 ++ dist/entries/ring/index.css | 4 ++ dist/entries/ripple/index.css | 16 +++++--- dist/entries/roller/index.css | 5 +++ dist/entries/spinner/index.css | 5 +++ dist/facebook.html | 4 ++ dist/grid.html | 4 ++ dist/heart.html | 10 ++++- dist/hourglass.html | 4 ++ dist/index.css | 68 ++++++++++++++++++++++++++++---- dist/ring.html | 4 ++ dist/ripple.html | 16 +++++--- dist/roller.html | 5 +++ dist/spinner.html | 5 +++ src/circle/index.styl | 3 ++ src/default/index.styl | 3 ++ src/dual-ring/index.styl | 3 ++ src/ellipsis/index.styl | 3 ++ src/facebook/index.styl | 3 ++ src/grid/index.styl | 3 ++ src/heart/index.styl | 3 ++ src/hourglass/index.styl | 3 ++ src/ring/index.styl | 3 ++ src/ripple/index.styl | 3 ++ src/roller/index.styl | 3 ++ src/spinner/index.styl | 3 ++ web/static/assets/index.css | 68 ++++++++++++++++++++++++++++---- 38 files changed, 276 insertions(+), 32 deletions(-) diff --git a/dist/circle.html b/dist/circle.html index 5423b20..347f61d 100644 --- a/dist/circle.html +++ b/dist/circle.html @@ -1,4 +1,8 @@

CSS Spinner

\ No newline at end of file +

CSS Spinner

\ No newline at end of file