Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- :root {
- --bg: #232428;
- --bgImg: none;
- --track: #3c3c3c;
- --shadow: #fff000;
- --color: #d5c999;
- --circle: #d5c999;
- --font: Arial;
- }
- body {
- margin: 0;
- padding: 0;
- overflow-x: hidden;
- }
- body:before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: var(--bg);
- background-image: var(--bgImg);
- background-size: 100% 100%;
- }
- .ind1 {
- padding-top: 5px;
- font-size: 18px;
- }
- .ind2 {
- padding-top: 5px;
- font-size: 18px;
- }
- .ind3 {
- padding-top: 10px;
- font-size: 16px;
- line-height: 25px;
- }
- #indicator {
- position: absolute;
- top: 50%;
- left: 50%;
- padding-left: 2px;
- transform: translate(-50%,-50%);
- width: 150px;
- height: 150px;
- background: transparent;
- border: 3px solid var(--track);
- border-radius: 50%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- text-align: center;
- font-family: var(--font);
- color: var(--color);
- letter-spacing: 3px;
- text-transform: uppercase;
- text-shadow: 0 0 10px var(--shadow);
- box-shadow: 0 0 20px rgba(0,0,0,.5);
- }
- #indicator:before {
- content: "";
- position: absolute;
- top: -3px;
- left: -3px;
- width: 104%;
- height: 104%;
- border: 3px solid transparent;
- border-top: 3px solid var(--circle);
- border-right: 3px solid var(--circle);
- border-radius: 50%;
- animation: animateC 2s linear infinite;
- }
- #indicator > div {
- max-width: 120px;
- }
- #lm {
- opacity: 0;
- transition: opacity 0.5s;
- }
- @keyframes animateC {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
- }
- @keyframes animate {
- 0% {
- transform: rotate(45deg);
- }
- 100% {
- transform: rotate(405deg);
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment