@charset "UTF-8"; .wrapper { width: 56px; /* Set the size of the progress bar */ height: 56px; position: absolute; /* Enable clipping */ clip: rect(0px, 56px, 56px, 28px); /* Hide half of the progress bar */ } /* Set the sizes of the elements that make up the progress bar */ .circle { width: 48px; height: 48px; border: 4px solid #FFB902; border-radius: 24px; position: absolute; clip: rect(0px, 24px, 48px, 0px); top: 4px; left: 4px; } /* Using the data attributes for the animation selectors. */ /* Base settings for all animated elements */ div[data-anim~=base] { -webkit-animation-iteration-count: 1; /* Only run once */ -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */ -webkit-animation-timing-function:linear; /* Linear animation */ } .wrapper[data-anim~=wrapper] { -webkit-animation-duration: 10ms; /* Complete keyframes asap */ -webkit-animation-delay: 2500ms; /* Wait half of the animation */ -webkit-animation-name: close-wrapper; /* Keyframes name */ } .circle[data-anim~=left] { -webkit-animation-duration: 5000ms; /* Full animation time */ -webkit-animation-name: left-spin; } .circle[data-anim~=right] { -webkit-animation-duration: 2500ms; /* Half animation time */ -webkit-animation-name: right-spin; } /* Rotate the right side of the progress bar from 0 to 180 degrees */ @-webkit-keyframes right-spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(180deg); } } /* Rotate the left side of the progress bar from 0 to 360 degrees */ @-webkit-keyframes left-spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } /* Set the wrapper clip to auto, effectively removing the clip */ @-webkit-keyframes close-wrapper { to { clip: rect(auto, auto, auto, auto); } } @-webkit-keyframes tooltip-show { to { opacity: 1; visibility: visible } } @-webkit-keyframes images-show { 50% { opacity: 0; background-image: none } 100% { opacity: 1; background-image: url(/static/inc/images/image_starbucks.jpg) } } @-webkit-keyframes move-top { to { opacity: 1; top: -36px } }