Skip to content
This repository has been archived by the owner on Jan 2, 2023. It is now read-only.

Commit

Permalink
indented code of animation for counters
Browse files Browse the repository at this point in the history
  • Loading branch information
@supunTE
supunTE committed Apr 7, 2020
1 parent 59c86f4 commit b39f113
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 94 deletions.
104 changes: 62 additions & 42 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,30 +11,36 @@
<div class="animation-cards-content">
<div class="animation-cards-item d-flex align-items-center justify-content-center" onclick="hidestatuscard()">
<span>
<h2 id="activeCases" class="text-center animation-cards-item-count"><div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div></h2>
<h2 id="activeCases" class="text-center animation-cards-item-count">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</h2>
<h4 class="animation-cards-item-subtitle">Active Cases</h2>
<img src="./virus.png" class="card-virus-cell">
</span>
</div>
<div class="animation-cards-item d-flex align-items-center justify-content-center" onclick="hidestatuscard()">
<span>
<h2 id="recovered" class="text-center animation-cards-item-count"><div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div></h2>
<h2 id="recovered" class="text-center animation-cards-item-count">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</h2>
<h4 class="animation-cards-item-subtitle">Recovered</h2>
<img src="./virus.png" class="card-virus-cell">
</span>
</div>
<div class="animation-cards-item d-flex align-items-center justify-content-center" onclick="hidestatuscard()">
<span>
<h2 id="deaths" class="text-center animation-cards-item-count"><div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div></h2>
<h2 id="deaths" class="text-center animation-cards-item-count">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</h2>
<h4 class="animation-cards-item-subtitle">Deaths</h2>
<img src="./virus.png" class="card-virus-cell">
</span>
Expand All @@ -60,32 +66,38 @@ <h4 class="animation-cards-item-subtitle">Deaths</h2>
<div class="card card-details text-white bg-primary">
<div class="card-header table-card-header">Active Cases</div>
<div class="card-body table-card-body">
<h1 class="card-title" id="activeCases-2"><div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div></h1>
<h1 class="card-title" id="activeCases-2">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</h1>
</div>
</div>
</div>
<div class="col col-details mb-4" onclick="hidetabledetails()">
<div class="card card-details text-white bg-success">
<div class="card-header table-card-header">Recovered</div>
<div class="card-body table-card-body">
<h1 class="card-title" id="recovered-2"><div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div></h1>
<h1 class="card-title" id="recovered-2">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</h1>
</div>
</div>
</div>
<div class="col col-details mb-4" onclick="hidetabledetails()">
<div class="card card-details text-white bg-danger">
<div class="card-header table-card-header">Deaths</div>
<div class="card-body table-card-body">
<h1 class="card-title" id="deaths-2"><div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div></h1>
<h1 class="card-title" id="deaths-2">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</h1>
</div>
</div>
</div>
Expand All @@ -100,21 +112,25 @@ <h1 class="card-title" id="deaths-2"><div class="spinner">
<div class="card card-details text-white" style="background-color: #c79600">
<div class="card-header table-card-header">Total</div>
<div class="card-body table-card-body">
<h1 class="card-title" id="totalInfected"><div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div></h1>
<h1 class="card-title" id="totalInfected">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</h1>
</div>
</div>
</div>
<div class="col col-xl-6 col-md-4 col-details mb-4">
<div class="card card-details text-white bg-secondary">
<div class="card-header table-card-header">Suspected</div>
<div class="card-body table-card-body">
<h1 class="card-title" id="suspected"><div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div></h1>
<h1 class="card-title" id="suspected">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</h1>
</div>
</div>
</div>
Expand All @@ -129,21 +145,25 @@ <h1 class="card-title" id="suspected"><div class="spinner">
<div class="card card-details text-white bg-info">
<div class="card-header table-card-header">Death Rate</div>
<div class="card-body table-card-body">
<h1 class="card-title" id="deathRate"><div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div></h1>
<h1 class="card-title" id="deathRate">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</h1>
</div>
</div>
</div>
<div class="col col-xl-6 col-md-4 col-details mb-4">
<div class="card card-details text-white bg-info">
<div class="card-header table-card-header">Recovery Rate</div>
<div class="card-body table-card-body">
<h1 class="card-title" id="recoveryRate"><div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div></h1>
<h1 class="card-title" id="recoveryRate">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</h1>
</div>
</div>
</div>
Expand Down Expand Up @@ -222,7 +242,7 @@ <h5 class="card-text">{{ item.description }}</h5>
</div>
<a href="./news.html" class="btn btn-see-all text-white mx-auto" id="see-all" style="display: none;">See All
News</a>

<div class="card-emergency font-1">
<div class="row row-cols-1 row-cols-md-3 text-white">
<div class="col mb-4">
Expand Down Expand Up @@ -303,4 +323,4 @@ <h5 class="card-title emergency-number">011 309 0502 / 113</h5>
</div>
</div>

<script src="./script.js"></script>
<script src="./script.js"></script>
120 changes: 68 additions & 52 deletions main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ body {
.margin-top-under-nav-xl {
margin: 140px auto 10px;
}
.margin-bottom-before-footer-xl{

.margin-bottom-before-footer-xl {
margin-bottom: 100px;
}
}
Expand Down Expand Up @@ -450,6 +451,63 @@ body {
width: 100%;
}

/* Spinner Animation */

.spinner {
width: 40px;
height: 40px;
position: relative;
margin: 8px auto;
}

.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: rgb(226, 224, 224);
opacity: 0.6;
position: absolute;
top: 0;
left: 0;

-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {

0%,
100% {
-webkit-transform: scale(0.0)
}

50% {
-webkit-transform: scale(1.0)
}
}

@keyframes sk-bounce {

0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}

50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}

/* Timeline */

ul.timeline {
list-style-type: none;
position: relative;
Expand Down Expand Up @@ -594,21 +652,21 @@ ul.timeline>li:before {
color: rgb(255, 255, 255) !important;
}

.card-emergency{
.card-emergency {
background-color: red;
padding: 20px;
margin: 20px 0px;
}

h2.emergency-number{
h2.emergency-number {
font-size: 180%;
}

h5.emergency-number{
h5.emergency-number {
font-size: 140%;
}

.emergency-text{
.emergency-text {
font-size: 100%;
}

Expand Down Expand Up @@ -795,13 +853,13 @@ h5.emergency-number{
margin: 20px;
}

h2.emergency-number{
h2.emergency-number {
font-size: 180% !important;
}
h5.emergency-number{

h5.emergency-number {
font-size: 140% !important;
}
}

.footer {
display: none !important;
Expand Down Expand Up @@ -842,46 +900,4 @@ h5.emergency-number{

.map-centers-sl-frame {
height: 300px !important;
}

.spinner {
width: 40px;
height: 40px;

position: relative;
margin: 8px auto;
}

.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: rgb(226, 224, 224);
opacity: 0.6;
position: absolute;
top: 0;
left: 0;

-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
}

0 comments on commit b39f113

Please sign in to comment.