From 749e3a9a240257e2eb92840ce2234719bb4cd712 Mon Sep 17 00:00:00 2001
From: Tushar Gupta <77679386+iamtushar11@users.noreply.github.com>
Date: Sat, 15 Oct 2022 23:28:30 +0530
Subject: [PATCH] new: added progress bar animation (#93)
---
ProgressBar/index.html | 23 +++++++++
ProgressBar/index.js | 25 +++++++++
ProgressBar/style.css | 114 +++++++++++++++++++++++++++++++++++++++++
3 files changed, 162 insertions(+)
create mode 100644 ProgressBar/index.html
create mode 100644 ProgressBar/index.js
create mode 100644 ProgressBar/style.css
diff --git a/ProgressBar/index.html b/ProgressBar/index.html
new file mode 100644
index 0000000..fb5d81c
--- /dev/null
+++ b/ProgressBar/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+ Progress bar
+
+
+ Progressing
+
+
+
+
+
+
+
+
diff --git a/ProgressBar/index.js b/ProgressBar/index.js
new file mode 100644
index 0000000..1e08927
--- /dev/null
+++ b/ProgressBar/index.js
@@ -0,0 +1,25 @@
+const progressBar = document.querySelector(".progress-bar");
+let progressComplete = progressBar.getAttribute("data-complete");
+const start = document.querySelector(".start");
+const reset = document.querySelector(".reset");
+
+start.addEventListener("click", clickEvent);
+reset.addEventListener("click", function() {
+ progressBar.style.opacity = "10";
+});
+
+function clickEvent() {
+ let width = 10;
+ progressComplete = 100;
+
+ const count = setInterval(() => {
+ if (width != progressComplete) {
+ width++;
+ progressBar.style.opacity = "10";
+ progressBar.style.width = width + "%";
+ progressBar.innerHTML = width + "%";
+ } else {
+ clearInterval(count);
+ }
+ }, 10);
+}
diff --git a/ProgressBar/style.css b/ProgressBar/style.css
new file mode 100644
index 0000000..d18eccc
--- /dev/null
+++ b/ProgressBar/style.css
@@ -0,0 +1,114 @@
+@import url("https://fonts.googleapis.com/css?family=PT+Sans&display=swap");
+
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+ font-family: monospace;
+ }
+
+/* CSS Variables */
+:root {
+ --primary-color: #256D85;
+ --secondary-color: #2B4865;
+ --light-color: #f4f4f4;
+}
+
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ font-family: "PT Sans", sans-serif;
+ font-weight: 600;
+ line-height: 1.6;
+}
+h2{
+ margin-bottom: 20px;
+}
+.container {
+ height: 3rem;
+ width: 600px;
+ margin-bottom: 3rem;
+ background-color: var(--light-color);
+ border-radius: 10rem;
+}
+
+.progress {
+ height: 3rem;
+ width: 100%;
+ border-radius: 10rem;
+}
+
+.progress-bar {
+
+ width: 10%;
+ height: 30px;
+ background-color: #256D85;
+ text-align: center; /* To center it horizontally (if you want) */
+ line-height: 30px; /* To center it vertically */
+ color: white;
+ border-radius: 10rem;
+ height: 3rem;
+ background: linear-gradient(to right,#533483, #002B5B);
+ color: var(--light-color);
+
+}
+
+.btn-container {
+ display: flex;
+ justify-content: center;
+}
+
+.btn {
+ flex: 1;
+ min-width: 50%;
+ padding: 1rem 2.5rem;
+ margin: 0 1rem;
+ background: linear-gradient(to left, #533483, #11998e);
+ color: var(--light-color);
+ border: none;
+ border-radius: 10rem;
+ outline: 0;
+ transition: transform 400ms;
+ box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.3);
+ cursor: pointer;
+}
+
+.btn:hover {
+ transform: translateY(-10px);
+}
+
+.start {
+ background: linear-gradient(to right, #533483, #11998e);
+}
+
+.reset {
+ background: linear-gradient(to left, #533483, #11998e);
+}
+
+@media screen and (max-width: 900px) {
+ .container {
+ width: 500px;
+ }
+}
+
+@media screen and (max-width: 750px) {
+ .container {
+ width: 90%;
+ }
+
+ .btn {
+ margin: 0 15px;
+ width: 100%;
+ height: 36px;
+ line-height: 0.5;
+ }
+}