SWAMPy

✎ CARVE FLESH

EDITING: _LoadingSpinner.scss

/*
 * Copyright (C) 2016 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@keyframes rotate {

to {
    transform: rotate(360deg);
  }
}

@keyframes morph {

0% {
    stroke-dashoffset: 190%;
  }

50% {
    stroke-dashoffset: 50%;
    transform: rotate(90deg);
  }

100% {
    stroke-dashoffset: 190%;
    transform: rotate(360deg);
  }
}

.LoadingSpinner {
  position: relative;
  top: 200px;
  display: block;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0 auto;
}

.LoadingSpinner-medium {
  width: 5em;
  height: 5em;

.circle {
    stroke-width: 0.5em;
    width: 5em;
    height: 5em;
  }

.circleShadow {
    stroke-width: calc(0.5em * 1.75);
  }

.circleTrack,
  .circleSpin {
    stroke-width: 0.5em;
  }

.circleSpin {
    stroke-dasharray: 10.5em;
    transform-origin: calc(5em / 2);
  }

}

.circle {
  display: block;
  position: absolute;
  top: 0;
  #{direction(left)}: 0;
  animation-name: rotate;
  animation-duration: 2.25s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.circleTrack,
.circleShadow,
.circleSpin {
  fill: none;
}

.circleSpin {
  stroke-linecap: round;
  animation-name: morph;
  animation-duration: 1.75s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

.LoadingSpinner-lightBg {
  .circleShadow {
    stroke: none;
  }
  .circleTrack {
    stroke: rgb(230, 230, 230);
  }
  .circleSpin {
    stroke: rgb(0, 115, 172);
  }
}

.LoadingSpinner-darkBg {

.circleShadow {
    stroke: rgba(0, 0, 0, 0.3);
  }
}

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📄 _Collaboration.scss	SCSS	1.1 KB	2023-09-24 03:36	EDIT
📄 _CollaborationsApp.scss	SCSS	1.2 KB	2023-09-24 03:36	EDIT
📄 _DeleteConfirmation.scss	SCSS	1 KB	2023-09-24 03:36	EDIT
📄 _LoadingSpinner.scss	SCSS	2.1 KB	2023-09-24 03:36	EDIT