Skip to content

Commit

Permalink
WiFiSymbol
Browse files Browse the repository at this point in the history
  • Loading branch information
Debayan Deb authored and Debayan Deb committed Mar 15, 2017
1 parent d528763 commit 6d6f0af
Show file tree
Hide file tree
Showing 9 changed files with 403 additions and 34 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
Binary file removed images/.DS_Store
View file
Binary file not shown.
Binary file removed images/strength_almost.png
View file
Binary file not shown.
Binary file removed images/strength_full.png
View file
Binary file not shown.
Binary file removed images/strength_half.png
View file
Binary file not shown.
Binary file removed images/strength_none.png
View file
Binary file not shown.
324 changes: 324 additions & 0 deletions internet-monitor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,328 @@
width:200px; height:160px;
display: inline-block;
margin: 1em;
}

.wifi{
z-index : 1;
}
.wifi-symbol-1 {
display: none;
}
.wifi-symbol-1 [foo], .wifi-symbol-1 {
display: block;
position: absolute;
top: 65%;
display: inline-block;
width: 150px;
height: 150px;
margin-top: -187.5px;
-ms-transform: rotate(-45deg) translate(-100px);
-moz-transform: rotate(-45deg) translate(-100px);
-o-transform: rotate(-45deg) translate(-100px);
-webkit-transform: rotate(-45deg) translate(-100px);
transform: rotate(-45deg) translate(-100px);
}
.wifi-symbol-1 .wifi-circle {
box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
width: 100%;
height: 100%;
font-size: 21.42857px;
position: absolute;
bottom: 0;
left: 0;
border-color: #FFFFCC;
border-style: solid;
border-width: 1em 1em 0 0;
-webkit-border-radius: 0 100% 0 0;
border-radius: 0 100% 0 0;
opacity: 0;
-o-animation: wifianimation-2 3s infinite;
-moz-animation: wifianimation-2 3s infinite;
-webkit-animation: wifianimation-2 3s infinite;
animation: wifianimation-2 3s infinite;
}
.wifi-symbol-1 .wifi-circle.first {
-o-animation-delay: 800ms;
-moz-animation-delay: 800ms;
-webkit-animation-delay: 800ms;
animation-delay: 800ms;
}
.wifi-symbol-1 .wifi-circle.second {
width: 5em;
height: 5em;
-o-animation-delay: 400ms;
-moz-animation-delay: 400ms;
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.wifi-symbol-1 .wifi-circle.third {
width: 3em;
height: 3em;
}
.wifi-symbol-1 .wifi-circle.fourth {
width: 1em;
height: 1em;
opacity: 1;
background-color: #FFFFCC;
-o-animation: none;
-moz-animation: none;
-webkit-animation: none;
animation: none;
}

.wifi-symbol-2 {
display: none;
}
.wifi-symbol-2 [foo], .wifi-symbol-2 {
display: block;
position: absolute;
top: 65%;
display: inline-block;
width: 150px;
height: 150px;
margin-top: -187.5px;
-ms-transform: rotate(-45deg) translate(-100px);
-moz-transform: rotate(-45deg) translate(-100px);
-o-transform: rotate(-45deg) translate(-100px);
-webkit-transform: rotate(-45deg) translate(-100px);
transform: rotate(-45deg) translate(-100px);
}
.wifi-symbol-2 .wifi-circle {
box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
width: 100%;
height: 100%;
font-size: 21.42857px;
position: absolute;
bottom: 0;
left: 0;
border-color: #FFFF0C;
border-style: solid;
border-width: 1em 1em 0 0;
-webkit-border-radius: 0 100% 0 0;
border-radius: 0 100% 0 0;
opacity: 0;
-o-animation: wifianimation-2 3s infinite;
-moz-animation: wifianimation-2 3s infinite;
-webkit-animation: wifianimation-2 3s infinite;
animation: wifianimation-2 3s infinite;
}
.wifi-symbol-2 .wifi-circle.first {
opacity: 0.3;
-o-animation: none;
-moz-animation: none;
-webkit-animation: none;
animation: none;
}
.wifi-symbol-2 .wifi-circle.second {
width: 5em;
height: 5em;
-o-animation-delay: 400ms;
-moz-animation-delay: 400ms;
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.wifi-symbol-2 .wifi-circle.third {
width: 3em;
height: 3em;
}
.wifi-symbol-2 .wifi-circle.fourth {
width: 1em;
height: 1em;
opacity: 1;
background-color: #FFFF0C;
-o-animation: none;
-moz-animation: none;
-webkit-animation: none;
animation: none;
}

.wifi-symbol-3 {
display: none;
}
.wifi-symbol-3 [foo], .wifi-symbol-3 {
display: block;
position: absolute;
top: 65%;
display: inline-block;
width: 150px;
height: 150px;
margin-top: -187.5px;
-ms-transform: rotate(-45deg) translate(-100px);
-moz-transform: rotate(-45deg) translate(-100px);
-o-transform: rotate(-45deg) translate(-100px);
-webkit-transform: rotate(-45deg) translate(-100px);
transform: rotate(-45deg) translate(-100px);
}
.wifi-symbol-3 .wifi-circle {
box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
width: 100%;
height: 100%;
font-size: 21.42857px;
position: absolute;
bottom: 0;
left: 0;
border-color: #FFFF0C;
border-style: solid;
border-width: 1em 1em 0 0;
-webkit-border-radius: 0 100% 0 0;
border-radius: 0 100% 0 0;
opacity: 0;
-o-animation: wifianimation-2 3s infinite;
-moz-animation: wifianimation-2 3s infinite;
-webkit-animation: wifianimation-2 3s infinite;
animation: wifianimation-2 3s infinite;
}
.wifi-symbol-3 .wifi-circle.first {
opacity: 0.3;
-o-animation: none;
-moz-animation: none;
-webkit-animation: none;
animation: none;
}
.wifi-symbol-3 .wifi-circle.second {
width: 5em;
height: 5em;
opacity: 0.3;
-o-animation: none;
-moz-animation: none;
-webkit-animation: none;
animation: none;
}
.wifi-symbol-3 .wifi-circle.third {
width: 3em;
height: 3em;
}
.wifi-symbol-3 .wifi-circle.fourth {
width: 1em;
height: 1em;
opacity: 1;
background-color: #FFFF0C;
-o-animation: none;
-moz-animation: none;
-webkit-animation: none;
animation: none;
}

.wifi-symbol-4 {
display: none;
}
.wifi-symbol-4 [foo], .wifi-symbol-4 {
display: block;
position: absolute;
top: 65%;
display: inline-block;
width: 150px;
height: 150px;
margin-top: -187.5px;
-ms-transform: rotate(-45deg) translate(-100px);
-moz-transform: rotate(-45deg) translate(-100px);
-o-transform: rotate(-45deg) translate(-100px);
-webkit-transform: rotate(-45deg) translate(-100px);
transform: rotate(-45deg) translate(-100px);
}
.wifi-symbol-4 .wifi-circle {
box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
width: 100%;
height: 100%;
font-size: 21.42857px;
position: absolute;
bottom: 0;
left: 0;
border-color: #FFFF0C;
border-style: solid;
border-width: 1em 1em 0 0;
-webkit-border-radius: 0 100% 0 0;
border-radius: 0 100% 0 0;
opacity: 0;
-o-animation: wifianimation-2 3s infinite;
-moz-animation: wifianimation-2 3s infinite;
-webkit-animation: wifianimation-2 3s infinite;
animation: wifianimation-2 3s infinite;
}
.wifi-symbol-4 .wifi-circle.first {
opacity: 0.3;
-o-animation: none;
-moz-animation: none;
-webkit-animation: none;
animation: none;
}
.wifi-symbol-4 .wifi-circle.second {
width: 5em;
height: 5em;
opacity: 0.3;
-o-animation: none;
-moz-animation: none;
-webkit-animation: none;
animation: none;
}
.wifi-symbol-4 .wifi-circle.third {
width: 3em;
height: 3em;
opacity: 0.3;
-o-animation: none;
-moz-animation: none;
-webkit-animation: none;
animation: none;
}
.wifi-symbol-4 .wifi-circle.fourth {
width: 1em;
height: 1em;
opacity: 1;
background-color: #FFFF0C;
-o-animation: none;
-moz-animation: none;
-webkit-animation: none;
animation: none;
}

@-o-keyframes wifianimation-2 {
0% {
opacity: 1;
}
5% {
opactiy: 0.8;
}
6% {
opactiy: 0.9;
}
100% {
opactiy: 0.1;
}
}
@-moz-keyframes wifianimation-2 {
0% {
opacity: 1;
}
5% {
opactiy: 0.8;
}
6% {
opactiy: 0.9;
}
100% {
opactiy: 0.1;
}
}
@-webkit-keyframes wifianimation-2 {
0% {
opacity: 1;
}
5% {
opactiy: 0.8;
}
6% {
opactiy: 0.9;
}
100% {
opactiy: 0.1;
}
}
Loading

0 comments on commit 6d6f0af

Please sign in to comment.