Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import url("https://fonts.googleapis.com/css?family=Roboto:300");
- * {
- padding: 0;
- margin: 0;
- box-sizing:
- }
- html,
- body {
- overflow: hidden;
- }
- body {
- display: -ms-flexbox;
- display: flex;
- -ms-flex-align: center;
- align-items: center;
- -ms-flex-pack: center;
- justify-content: center;
- }
- body > div {
- width: 100%;
- }
- #wrap {
- font-family: "Roboto", sans-serif;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-flex-align: center;
- align-items: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- }
- .goal-cont {
- color: {#000000};
- font-size: 0px;
- position: relative;
- padding: 1em;
- width: calc(100% - 12px * 2);
- text-transform: uppercase;
- }
- .goal-cont::before {
- content: '';
- position: absolute;
- top: 0;
- right: -12px;
- bottom: 0;
- left: -12px;
- border: 3px solid {backgroundColor};
- opacity: 0;
- }
- .goal-cont > div {
- position: relative;
- }
- .goal-cont .main-background {
- background: {backgroundColor};
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- opacity: 0;
- }
- #goal-bg {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
- #goal-bg::before {
- content: '';
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background: {goalBarColor};
- opacity: 0.5;
- }
- #goal-bar {
- height: 30px;
- line-height: 16px;
- position: relative;
- margin: 16px 0;
- display: -ms-flexbox;
- display: flex;
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- border-radius: 100px;
- overflow: hidden;
- }
- #goal-start {
- background: {goalBarColor};
- display: inline-block;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- width: 0;
- transition: width 1s;
- }
- .goal-numbers {
- position: relative;
- }
- #goal-progress {
- font-family: "Roboto", sans-serif;
- position: absolute;
- text-align: right;
- left: -800;
- width: 100%;
- bottom: 50;
- display: block;
- color: ffffff;
- font-size: 15;
- }
- #goal-total {
- position: absolute;
- right: 0;
- bottom: 0;
- opacity: 0;
- }
- #goal-end-date {
- position: absolute;
- right: 0;
- top: 0;
- opacity: 0;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement