diff --git a/Balance-Wheel Loading/README.md b/Balance-Wheel Loading/README.md new file mode 100644 index 0000000..e69de29 diff --git a/Balance-Wheel Loading/img.png b/Balance-Wheel Loading/img.png new file mode 100644 index 0000000..095b6d2 Binary files /dev/null and b/Balance-Wheel Loading/img.png differ diff --git a/Balance-Wheel Loading/index.html b/Balance-Wheel Loading/index.html new file mode 100644 index 0000000..f770cbb --- /dev/null +++ b/Balance-Wheel Loading/index.html @@ -0,0 +1,17 @@ + + + + + + + + Wheel pre-loader + + +
+ + + \ No newline at end of file diff --git a/Balance-Wheel Loading/style.css b/Balance-Wheel Loading/style.css new file mode 100644 index 0000000..b197431 --- /dev/null +++ b/Balance-Wheel Loading/style.css @@ -0,0 +1,52 @@ +body { + background: #fefae0; +} +.pre-loader { + width: 150px; + height: 50px; + margin: 100px auto 0; + border-bottom: 4px solid #0c8b00; + position: relative; + animation: animate 3s infinite linear; +} +.pre-loader:before { + content: ""; + background: #fb5000; + width: 40px; + height: 45px; + position: absolute; + bottom: 0; + left: 0; + z-index: 1; + clip-path: circle(40%); + animation: animate1 3s infinite linear; +} +@keyframes animate { + 0%, + 100% { + transform: rotate(-20deg); + } + 50% { + transform: rotate(20deg); + } +} +@keyframes animate1 { + 0%, + 100% { + transform: rotate(0); + left: 0; + } + 50% { + transform: rotate(200deg); + left: calc(100% - 40px); + } +} +.foot { + margin: auto; + margin-top: 40vh; + color: rgb(0, 109, 211); + text-align: center; +} +.name { + color: #0071f1; +}