title: Gradient Progress Bar (NSProgressIndicator)
body: <p>I am attempting to customize my progress bar (NSProgressIndicator) to load the coloured tint as a gradient. For example:</p>
  
  <p><strong>Estimated Progress Value &amp; Corresponding Colours</strong></p>
  
  <ul>
  <li><code>0.0 = NSColor.blue</code></li>
  <li><code>0.5 = NSColor.red</code></li>
  <li><code>1.0 = NSColor.green</code></li>
  </ul>
  
  <p>If you're still not sure as to what I'm trying to accomplish, it looks something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/ZFd9N.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZFd9N.jpg" alt="https://i0.wp.com/www.cssscript.com/wp-content/uploads/2015/01/iOS-Style-Gradient-Progress-Bar-with-Pure-CSS-CSS3.jpg?zoom=2&amp;fit=427%2C315&amp;ssl=1"></a></p>
  
  <p>There's a good chance that I'm not heading in the right direction, but I thought I'd try. Still new to programming for macOS (haven't covered it in school yet).</p>
  
  <p><strong>ViewController.swift</strong></p>
  
  <pre><code>import Cocoa
  import WebKit
  
  class ViewController: NSViewController, WKUIDelegate, WKNavigationDelegate {
  
      // Main View Elements
      @IBOutlet var webView: WKWebView!
      @IBOutlet var progressBar: NSProgressIndicator!
  
      override func viewWillAppear() {
          webView.addObserver(self, forKeyPath: "estimatedProgress", options: .new, context: nil)
  
          let gradient = CAGradientLayer()
  
          gradient.colors = [NSColor.blue.cgColor,
                             NSColor.red.cgColor,
                             NSColor.green.cgColor]
  
          gradient.locations = [0, 0.5, 1.0]
  
          gradient.frame = view.frame
  
          // view.layer.mask = gradient
          progressBar.layer?.mask = gradient
          progressBar.layer?.compositingFilter = gradient
          progressBar.layer?.borderColor = CGColor.clear
          progressBar.layer?.backgroundColor = CGColor.clear
          progressBar.wantsLayer = true
          progressBar.isBezeled = false
      }
  
      override func viewWillDisappear() {
          webView.removeObserver(self, forKeyPath: "estimatedProgress")
      }
  
      // Observer for WebView Loading Progress
      override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
          if (keyPath == "estimatedProgress") {
              DispatchQueue.main.async {
                  self.setProgress(self.webView.estimatedProgress * 100)
              }
          }
      }
  
      // Set Progress for ProgressBar
      fileprivate func setProgress(_ value: Double) {
          if value == 100 {
              self.progressBar.isHidden = true
              return
          }
  
          self.progressBar.isHidden = false
          self.progressBar.doubleValue = value
      }
  
      override func viewDidLoad() {
          super.viewDidLoad()
  
          webView.navigationDelegate = self
          let request = URL(string: "https://google.com")!
          webView.load(URLRequest(url: request))
      }
  
      func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
          self.setProgress(0)
      }
  
      func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
          self.setProgress(100)
      }
  
  }
  </code></pre>
  
  <p>Furthermore, if possible, could you explain why your method works, as well as why mine fails to work. I'm really trying to improve my programming knowledge and skills.</p>
  
  <p>Thank you for reading!</p>