mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 09:05:47 +02:00
Code Issues Releases Wiki Activity

Add Bootstrap's very first spinners omfg it's actually happening

Browse Source
This commit is contained in:
Mark Otto
2017-07-02 04:51:53 +03:00
committed by XhmikosR
parent f3bd8602df
commit 52a86cc671
5 changed files with 249 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
scss/_spinners.scss Normal file
View File

@@ -0,0 +1,69 @@
//
// Rotating border
//
@keyframes spinner-border {
to { transform: rotate(360deg); }
}
.spinner-border {
position: relative;
display: inline-block;
width: $spinner-width;
height: $spinner-height;
overflow: hidden;
text-indent: -999em;
vertical-align: text-bottom;
border: $spinner-border-width solid;
border-color: currentColor transparent currentColor currentColor;
border-radius: 50%;
animation-name: spinner-border;
animation-duration: .75s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.spinner-border-sm {
width: $spinner-width-sm;
height: $spinner-height-sm;
border-width: $spinner-border-width-sm;
}
//
// Growing circle
//
@keyframes spinner-grow {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1);
}
}
.spinner-grow {
position: relative;
display: inline-block;
width: $spinner-width;
height: $spinner-height;
overflow: hidden;
text-indent: -999em;
vertical-align: text-bottom;
background-color: currentColor;
border-radius: 50%;
animation-name: spinner-grow;
animation-duration: .75s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.spinner-grow-sm {
width: $spinner-width-sm;
height: $spinner-height-sm;
}

11
scss/_variables.scss
View File

@@ -1024,6 +1024,17 @@ $carousel-transition-duration: .6s !default;
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
// Spinners
$spinner-width: 2rem !default;
$spinner-height: $spinner-width !default;
$spinner-border-width: .25em !default;
$spinner-width-sm: 1rem !default;
$spinner-height-sm: $spinner-width-sm !default;
$spinner-border-width-sm: .2em !default;
// Close
$close-font-size: $font-size-base * 1.5 !default;

1
scss/bootstrap.scss vendored
View File

@@ -38,5 +38,6 @@
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "utilities";
@import "print";