/***************************************************************************************************
 Animate ProgressBar Circle-Spinner
 -> Animating moving circle-spinner to represent a progress bar.
 -> CSS Animation Property
    ->> animation-name = animate-progressBar-circleSpinner-keyframe
        The name of animation to use. This must match with the keyframes definition.
    
 -> @keyframes
    The actual animaton. Here, we define how the entire element (a circle with radius = 50%) 
    would rotate to 360 degree at its 100% state.
 
 -> Small vs. Large: Offer flexible styling for the circle-spinner size and color.
 -> PositionParallel vs. PositionCenter
    ->> Offer flexible positioning of the circle-spinner within a page.
    ->> '-positionParallel-*' = The spinner and label would sit next to each other (inline) at the center of the container
    ->> '-positionCenter-*' = The spinner and the label would both be at center, and not inline. One on top of the other.
  
 -> CSS Validator:
    Requires the "standard" property to come LAST after "vendor-specific" property. 
    
 -> REF
    (*) https://www.w3schools.com/css/css3_animations.asp
    (*) http://projects.lukehaas.me/css-loaders
**************************************************************************************************/
.animate-progressBar-circleSpinner {
    border-radius: 50%;

    -moz-animation: animate-progressBar-circleSpinner-keyframe 2s infinite linear;
    -webkit-animation: animate-progressBar-circleSpinner-keyframe 2s infinite linear;
    -o-animation: animate-progressBar-circleSpinner-keyframe 2s infinite linear;
    -ms-animation: animate-progressBar-circleSpinner-keyframe 2s infinite linear;
    animation: animate-progressBar-circleSpinner-keyframe 2s infinite linear;
}

@-moz-keyframes animate-progressBar-circleSpinner-keyframe {
    0% { 
        -moz-transform: rotate(0deg); 
        transform: rotate(0deg); 
    }
    100% { 
        -moz-transform: rotate(360deg); 
        transform: rotate(360deg); 
    }
}
@-webkit-keyframes animate-progressBar-circleSpinner-keyframe {
    0% { 
        -webkit-transform: rotate(0deg); 
        transform: rotate(0deg); 
    }
    100% { 
        -webkit-transform: rotate(360deg); 
        transform: rotate(360deg); 
    }
} 
@-o-keyframes animate-progressBar-circleSpinner-keyframe {
    0% { 
        -o-transform: rotate(0deg); 
        transform: rotate(0deg); 
    }
    100% { 
        -o-transform: rotate(360deg); 
        transform: rotate(360deg); 
    }
} 
@-ms-keyframes animate-progressBar-circleSpinner-keyframe {
    0% { 
        -ms-transform: rotate(0deg); 
        transform: rotate(0deg); 
    }
    100% { 
        -ms-transform: rotate(360deg); 
        transform: rotate(360deg); 
    }
} 
@keyframes animate-progressBar-circleSpinner-keyframe {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.animate-progressBar-circleSpinner-small {
    width: 20px;
    height: 20px;

    border-top: 5px solid rgba(49, 47, 46, 0.25);
    border-right: 5px solid rgba(49, 47, 46, 0.25);
    border-bottom: 5px solid rgba(49, 47, 46, 0.25);
    border-left: 5px solid #312F2E;
} @media screen and (min-width: 768px) {
    .animate-progressBar-circleSpinner-small {
        width: 30px;
        height: 30px;
    }
}

.animate-progressBar-circleSpinner-large {
    width: 60px;
    height: 60px;
    
    border-top: 15px solid rgba(49, 47, 46, 0.25);
    border-right: 15px solid rgba(49, 47, 46, 0.25);
    border-bottom: 15px solid rgba(49, 47, 46, 0.25);
    border-left: 15px solid #312F2E;
}

.animate-progressBar-circleSpinner-positionParallel-container {
    margin: 0px auto; 
    text-align: center; 
}

.animate-progressBar-circleSpinner-positionParallel-icon {
    display: inline-block; 
    vertical-align: middle;
}

.animate-progressBar-circleSpinner-positionParallel-label {
    display: inline-block; 
    vertical-align: middle;
    max-width: 100px;
}

.animate-progressBar-circleSpinner-positionCenter-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);

    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;

    text-align:center; 
}

.animate-progressBar-circleSpinner-positionCenter-icon {
    display: block; 
    margin-left: auto;
    margin-right: auto;
}

.animate-progressBar-circleSpinner-positionCenter-label {
    margin: 10px auto 0px auto;
    max-width: 150px;
}