diff --git a/index.html b/index.html
index 7b88dac0..e696bb74 100644
--- a/index.html
+++ b/index.html
@@ -38,37 +38,50 @@
padding-bottom: 48px;
}
- #pre-loading-animation
- .pre-loading-animation__wrapper
- .pre-loading-animation__wrapper-loader {
- margin: 0 0 2em;
- height: 100px;
- width: 20%;
- text-align: center;
- padding: 1em;
- margin: 0 auto 1em;
- display: inline-block;
- vertical-align: top;
+ .pre-loading-animation__wrapper-loading {
+ display: block;
+ position: relative;
+ width: 6px;
+ height: 10px;
+
+ animation: rectangle infinite 1s ease-in-out -0.2s;
+
+ background-color: #ff6700;
}
- #pre-loading-animation
- .pre-loading-animation__wrapper
- .pre-loading-animation__wrapper-loader
- svg
- path,
- #pre-loading-animation
- .pre-loading-animation__wrapper
- .pre-loading-animation__wrapper-loader
- svg
- rect {
- fill: #ff6700;
+ .pre-loading-animation__wrapper-loading:before,
+ .pre-loading-animation__wrapper-loading:after {
+ position: absolute;
+ width: 6px;
+ height: 10px;
+ content: '';
+ background-color: #ff6700;
}
- #pre-loading-animation
- .pre-loading-animation__wrapper
- .pre-loading-animation__wrapper-loader
- svg {
- transform: scale(2);
+ .pre-loading-animation__wrapper-loading:before {
+ left: -14px;
+
+ animation: rectangle infinite 1s ease-in-out -0.4s;
+ }
+
+ .pre-loading-animation__wrapper-loading:after {
+ right: -14px;
+
+ animation: rectangle infinite 1s ease-in-out;
+ }
+
+ @keyframes rectangle {
+ 0%,
+ 80%,
+ 100% {
+ height: 20px;
+ box-shadow: 0 0 #ff6700;
+ }
+
+ 40% {
+ height: 30px;
+ box-shadow: 0 -20px #ff6700;
+ }
}
</style>
<body>
@@ -76,55 +89,7 @@
<div id="pre-loading-animation">
<div class="pre-loading-animation__wrapper">
<div class="pre-loading-animation__wrapper-title">Ray Template</div>
- <div class="pre-loading-animation__wrapper-loader">
- <svg
- version="1.1"
- id="Layer_1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- x="0px"
- y="0px"
- width="24px"
- height="30px"
- viewBox="0 0 24 30"
- style="enable-background: new 0 0 50 50"
- xml:space="preserve"
- >
- <rect x="0" y="0" width="4" height="10" fill="#333">
- <animateTransform
- attributeType="xml"
- attributeName="transform"
- type="translate"
- values="0 0; 0 20; 0 0"
- begin="0"
- dur="0.6s"
- repeatCount="indefinite"
- />
- </rect>
- <rect x="10" y="0" width="4" height="10" fill="#333">
- <animateTransform
- attributeType="xml"
- attributeName="transform"
- type="translate"
- values="0 0; 0 20; 0 0"
- begin="0.2s"
- dur="0.6s"
- repeatCount="indefinite"
- />
- </rect>
- <rect x="20" y="0" width="4" height="10" fill="#333">
- <animateTransform
- attributeType="xml"
- attributeName="transform"
- type="translate"
- values="0 0; 0 20; 0 0"
- begin="0.4s"
- dur="0.6s"
- repeatCount="indefinite"
- />
- </rect>
- </svg>
- </div>
+ <div class="pre-loading-animation__wrapper-loading"></div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>