From 3beab8fefb184977aff5d814afb44e7a59a9dfcf Mon Sep 17 00:00:00 2001 From: "nae.ikari" Date: Thu, 14 Apr 2016 18:48:49 +0800 Subject: [PATCH] add loader animation --- css/other.css | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 1 - js/Template.js | 8 +++++++- main.4.1.html | 8 ++++++++ 4 files changed, 71 insertions(+), 2 deletions(-) create mode 100644 css/other.css diff --git a/css/other.css b/css/other.css new file mode 100644 index 0000000..deef037 --- /dev/null +++ b/css/other.css @@ -0,0 +1,56 @@ +.spinner { + position: absolute; + top: 8px; + left: 40px; + height: 40px; + text-align: center; + font-size: 10px; + color: white; + z-index: 20000; + visibility: hidden; +} + +.spinner > div { + background-color: #fff; + height: 100%; + width: 6px; + display: inline-block; + + -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; + animation: sk-stretchdelay 1.2s infinite ease-in-out; +} + +.spinner .rect2 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} + +.spinner .rect3 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +.spinner .rect4 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} + +.spinner .rect5 { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; +} + +@-webkit-keyframes sk-stretchdelay { + 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } + 20% { -webkit-transform: scaleY(1.0) } +} + +@keyframes sk-stretchdelay { + 0%, 40%, 100% { + transform: scaleY(0.4); + -webkit-transform: scaleY(0.4); + } 20% { + transform: scaleY(1.0); + -webkit-transform: scaleY(1.0); + } +} \ No newline at end of file diff --git a/index.html b/index.html index ded7aea..175c009 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,6 @@ 海报大师 -