Materialization of loading indicators #29

ardacebi · 2018-07-24T11:46:33Z

The current loader uses an icon from Font Awesome and it makes it a bit harder to replace it with the loader from mdl.

We should do some research and make this possible anyways. I'm leaving the spinner (includes horizontal and round but we need to use the round and the single color one) style from mdl below:

.mdl-spinner {
  display: inline-block;
  position: relative;
  width: 28px;
  height: 28px; }
  .mdl-spinner:not(.is-upgraded).is-active:after {
    content: "Loading..."; }
  .mdl-spinner.is-upgraded.is-active {
    -webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
            animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite; }

@-webkit-keyframes mdl-spinner__container-rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes mdl-spinner__container-rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.mdl-spinner__layer {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0; }

.mdl-spinner__layer-1 {
  border-color: rgb(66,165,245); }
  .mdl-spinner--single-color .mdl-spinner__layer-1 {
    border-color: rgb(63,81,181); }
  .mdl-spinner.is-active .mdl-spinner__layer-1 {
    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
            animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

.mdl-spinner__layer-2 {
  border-color: rgb(244,67,54); }
  .mdl-spinner--single-color .mdl-spinner__layer-2 {
    border-color: rgb(63,81,181); }
  .mdl-spinner.is-active .mdl-spinner__layer-2 {
    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
            animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

.mdl-spinner__layer-3 {
  border-color: rgb(253,216,53); }
  .mdl-spinner--single-color .mdl-spinner__layer-3 {
    border-color: rgb(63,81,181); }
  .mdl-spinner.is-active .mdl-spinner__layer-3 {
    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
            animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

.mdl-spinner__layer-4 {
  border-color: rgb(76,175,80); }
  .mdl-spinner--single-color .mdl-spinner__layer-4 {
    border-color: rgb(63,81,181); }
  .mdl-spinner.is-active .mdl-spinner__layer-4 {
    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
            animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

@-webkit-keyframes mdl-spinner__fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg); }
  25% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); }
  37.5% {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg); }
  50% {
    -webkit-transform: rotate(540deg);
            transform: rotate(540deg); }
  62.5% {
    -webkit-transform: rotate(675deg);
            transform: rotate(675deg); }
  75% {
    -webkit-transform: rotate(810deg);
            transform: rotate(810deg); }
  87.5% {
    -webkit-transform: rotate(945deg);
            transform: rotate(945deg); }
  to {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg); } }

@keyframes mdl-spinner__fill-unfill-rotate {
  12.5% {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg); }
  25% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); }
  37.5% {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg); }
  50% {
    -webkit-transform: rotate(540deg);
            transform: rotate(540deg); }
  62.5% {
    -webkit-transform: rotate(675deg);
            transform: rotate(675deg); }
  75% {
    -webkit-transform: rotate(810deg);
            transform: rotate(810deg); }
  87.5% {
    -webkit-transform: rotate(945deg);
            transform: rotate(945deg); }
  to {
    -webkit-transform: rotate(1080deg);
            transform: rotate(1080deg); } }

/**
* HACK: Even though the intention is to have the current .mdl-spinner__layer-N
* at `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
* to do proper subpixel rendering for the elements being animated. This is
* especially visible in Chrome 39 on Ubuntu 14.04. See:
*
* - https://github.com/Polymer/paper-spinner/issues/9
* - https://code.google.com/p/chromium/issues/detail?id=436255
*/
@-webkit-keyframes mdl-spinner__layer-1-fade-in-out {
  from {
    opacity: 0.99; }
  25% {
    opacity: 0.99; }
  26% {
    opacity: 0; }
  89% {
    opacity: 0; }
  90% {
    opacity: 0.99; }
  100% {
    opacity: 0.99; } }
@keyframes mdl-spinner__layer-1-fade-in-out {
  from {
    opacity: 0.99; }
  25% {
    opacity: 0.99; }
  26% {
    opacity: 0; }
  89% {
    opacity: 0; }
  90% {
    opacity: 0.99; }
  100% {
    opacity: 0.99; } }

@-webkit-keyframes mdl-spinner__layer-2-fade-in-out {
  from {
    opacity: 0; }
  15% {
    opacity: 0; }
  25% {
    opacity: 0.99; }
  50% {
    opacity: 0.99; }
  51% {
    opacity: 0; } }

@keyframes mdl-spinner__layer-2-fade-in-out {
  from {
    opacity: 0; }
  15% {
    opacity: 0; }
  25% {
    opacity: 0.99; }
  50% {
    opacity: 0.99; }
  51% {
    opacity: 0; } }

@-webkit-keyframes mdl-spinner__layer-3-fade-in-out {
  from {
    opacity: 0; }
  40% {
    opacity: 0; }
  50% {
    opacity: 0.99; }
  75% {
    opacity: 0.99; }
  76% {
    opacity: 0; } }

@keyframes mdl-spinner__layer-3-fade-in-out {
  from {
    opacity: 0; }
  40% {
    opacity: 0; }
  50% {
    opacity: 0.99; }
  75% {
    opacity: 0.99; }
  76% {
    opacity: 0; } }

@-webkit-keyframes mdl-spinner__layer-4-fade-in-out {
  from {
    opacity: 0; }
  65% {
    opacity: 0; }
  75% {
    opacity: 0.99; }
  90% {
    opacity: 0.99; }
  100% {
    opacity: 0; } }

@keyframes mdl-spinner__layer-4-fade-in-out {
  from {
    opacity: 0; }
  65% {
    opacity: 0; }
  75% {
    opacity: 0.99; }
  90% {
    opacity: 0.99; }
  100% {
    opacity: 0; } }

/**
* Patch the gap that appear between the two adjacent
* div.mdl-spinner__circle-clipper while the spinner is rotating
* (appears on Chrome 38, Safari 7.1, and IE 11).
*
* Update: the gap no longer appears on Chrome when .mdl-spinner__layer-N's
* opacity is 0.99, but still does on Safari and IE.
*/
.mdl-spinner__gap-patch {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 45%;
  width: 10%;
  height: 100%;
  overflow: hidden;
  border-color: inherit; }
  .mdl-spinner__gap-patch .mdl-spinner__circle {
    width: 1000%;
    left: -450%; }

.mdl-spinner__circle-clipper {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-color: inherit; }
  .mdl-spinner__circle-clipper.mdl-spinner__left {
    float: left; }
  .mdl-spinner__circle-clipper.mdl-spinner__right {
    float: right; }
  .mdl-spinner__circle-clipper .mdl-spinner__circle {
    width: 200%; }

.mdl-spinner__circle {
  box-sizing: border-box;
  height: 100%;
  border-width: 3px;
  border-style: solid;
  border-color: inherit;
  border-bottom-color: transparent !important;
  border-radius: 50%;
  -webkit-animation: none;
          animation: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }
  .mdl-spinner__left .mdl-spinner__circle {
    border-right-color: transparent !important;
    -webkit-transform: rotate(129deg);
            transform: rotate(129deg); }
    .mdl-spinner.is-active .mdl-spinner__left .mdl-spinner__circle {
      -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
              animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
  .mdl-spinner__right .mdl-spinner__circle {
    left: -100%;
    border-left-color: transparent !important;
    -webkit-transform: rotate(-129deg);
            transform: rotate(-129deg); }
    .mdl-spinner.is-active .mdl-spinner__right .mdl-spinner__circle {
      -webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
              animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

@-webkit-keyframes mdl-spinner__left-spin {
  from {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg); }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  to {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg); } }

@keyframes mdl-spinner__left-spin {
  from {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg); }
  50% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg); }
  to {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg); } }

@-webkit-keyframes mdl-spinner__right-spin {
  from {
    -webkit-transform: rotate(-130deg);
            transform: rotate(-130deg); }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  to {
    -webkit-transform: rotate(-130deg);
            transform: rotate(-130deg); } }

@keyframes mdl-spinner__right-spin {
  from {
    -webkit-transform: rotate(-130deg);
            transform: rotate(-130deg); }
  50% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg); }
  to {
    -webkit-transform: rotate(-130deg);
            transform: rotate(-130deg); } }

The text was updated successfully, but these errors were encountered:

Wolfuryo · 2018-07-24T14:54:27Z

You're talking about something like this:https://codepen.io/mrrocks/pen/EiplA ?

ardacebi · 2018-07-24T14:56:47Z

@Wolfuryo Exactly! But if possible, the single color version of that.

The color should be from the focus color that users can modify via the admin panel, to match up with the other components.

Wolfuryo · 2018-07-24T16:03:27Z

I can't think of a way to do the changing length of the border without additional elements, which would require an extension. There is a div in another div in another one and the last one contains other 8 divs for the default spinner to work, which doesn't really help either. The 8 divs also have inline styles.
What I did so far:https://imgur.com/XO8c1Uy (it's also rotating). I can post the css here if it helps.

ardacebi · 2018-07-24T16:07:04Z

@Wolfuryo Can you send me the image you uploaded on imgur here on GitHub? I'm having some trouble with imgur.

CSS will help too.

Wolfuryo · 2018-07-24T16:14:42Z

The css:
.LoadingIndicator>.spinner{ display:none; } .LoadingIndicator{ width:100%; display:flex; justify-content:center; } .LoadingIndicator:after{ content:" "; display:table; width:40px; height:40px; border:4px solid white; border-top:4px solid green; border-left:4px solid green; border-radius:100%; animation:2s linear infinite loading; } @keyframes loading{ 0%{ transform:rotate(0deg); } 50%{ transform:rotate(360deg); } 100%{ transform:rotate(720deg); } }

ardacebi · 2018-07-24T16:19:58Z

@Wolfuryo Looks better than the original one, will do the trick.

But, can we have ANY luck with the animated one?

ardacebi · 2018-07-24T16:20:49Z

Also, can you apply this?

The color should be from the focus color that users can modify via the admin panel, to match up with the other components.

Wolfuryo · 2018-07-24T16:32:58Z

I forgot about the color thing. I'm not sure but I'll try.

ardacebi · 2018-07-24T16:35:15Z

@Wolfuryo I will be waiting for you here.

ardacebi · 2018-07-25T09:53:16Z

I forgot about the color thing. I'm not sure but I'll try.

@Wolfuryo Any updates?

Wolfuryo · 2018-07-25T20:44:58Z

I don't think it's possible without an extension. Or at least I cant find a way

ardacebi · 2018-07-25T20:46:35Z

@Wolfuryo OK, thank you anyways. I appreciate your help.

ardacebi · 2018-07-28T07:04:16Z

Loading indicator doesn't pull the highlight color @primary-color. Leading to visibility issues. Reopened this.

ardacebi added enhancement New feature or request mdl priority: high status: confirmed materialization labels Jul 24, 2018

ardacebi added this to the 1.0.0 milestone Jul 24, 2018

ardacebi assigned ardacebi and ghost Jul 24, 2018

ardacebi removed the status: confirmed label Jul 24, 2018

ardacebi mentioned this issue Jul 24, 2018

Completion of component materialization #22

Closed

13 tasks

ardacebi unassigned ardacebi and ghost Jul 25, 2018

ardacebi removed component: spinner labels Jul 25, 2018

ardacebi removed this from the 1.0.0 milestone Jul 25, 2018

ardacebi modified the milestone: 1.0.0-beta.3 Jul 25, 2018

ardacebi added priority: medium and removed priority: high labels Jul 26, 2018

ardacebi added this to the 1.0.0-beta.1 milestone Jul 26, 2018

ardacebi closed this as completed Jul 26, 2018

ardacebi reopened this Jul 28, 2018

ardacebi self-assigned this Jul 28, 2018

ardacebi added the help wanted Extra attention is needed label Jul 28, 2018

ardacebi modified the milestones: 1.0.0-beta.1, 1.0.0-beta.2 Jul 28, 2018

ardacebi closed this as completed in f9ac84c Jul 29, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Materialization of loading indicators #29

Materialization of loading indicators #29

ardacebi commented Jul 24, 2018 •

edited

Loading

Wolfuryo commented Jul 24, 2018

ardacebi commented Jul 24, 2018 •

edited

Loading

Wolfuryo commented Jul 24, 2018

ardacebi commented Jul 24, 2018 •

edited

Loading

Wolfuryo commented Jul 24, 2018

ardacebi commented Jul 24, 2018 •

edited

Loading

ardacebi commented Jul 24, 2018

Wolfuryo commented Jul 24, 2018

ardacebi commented Jul 24, 2018

ardacebi commented Jul 25, 2018

Wolfuryo commented Jul 25, 2018

ardacebi commented Jul 25, 2018

ardacebi commented Jul 28, 2018

Materialization of loading indicators #29

Materialization of loading indicators #29

Comments

ardacebi commented Jul 24, 2018 • edited Loading

Wolfuryo commented Jul 24, 2018

ardacebi commented Jul 24, 2018 • edited Loading

Wolfuryo commented Jul 24, 2018

ardacebi commented Jul 24, 2018 • edited Loading

Wolfuryo commented Jul 24, 2018

ardacebi commented Jul 24, 2018 • edited Loading

ardacebi commented Jul 24, 2018

Wolfuryo commented Jul 24, 2018

ardacebi commented Jul 24, 2018

ardacebi commented Jul 25, 2018

Wolfuryo commented Jul 25, 2018

ardacebi commented Jul 25, 2018

ardacebi commented Jul 28, 2018

ardacebi commented Jul 24, 2018 •

edited

Loading

ardacebi commented Jul 24, 2018 •

edited

Loading

ardacebi commented Jul 24, 2018 •

edited

Loading

ardacebi commented Jul 24, 2018 •

edited

Loading